1-2. Vue.js核心知識之模板渲染

shiina 發布于2019-08-23 18:00 / 1161人閱讀

摘要：使用了基于的模板語法，允許開發者聲明式地將綁定至底層實例的數據。所有的模板都是合法的，所以能被遵循規范的瀏覽器和解析器解析。列表中使用把數組渲染成選項列表。我們通過這些渲染方式就可以輕松的通過數據控制頁面的顯示內容了。

Vue.js 使用了基于 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。

插值


普通文本，雙向綁定: {{ msg }}

普通文本，單次綁定: {{ msg }}

輸出html代碼: 



{{ value ? "是" : "否" }}

{{ message.split("").reverse().join("") }}

條件

vue中使用v-if、v-else和v-else-if來實現條件渲染

是否

另一個用于根據條件展示元素的方法是使用v-show


顯示內容

v-if 是惰性的，如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
v-show 就簡單得多，不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。

列表

vue中使用 v-for 把數組渲染成選項列表。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組，item 是數組元素迭代的別名。



 
  {{ item.message }}

也可以用 v-for 通過一個對象的屬性來迭代。



 
  {{ value }}
 


new Vue({
 el: "#object",
 data: {
  object: {
   firstName: "John",
   lastName: "Doe",
   age: 30
  }
 }
}

指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性。當指令對應的表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM。

現在你看到我了

這里是個鏈接點擊觸發事件

小結

本節主要學習了vue模板渲染的幾種形式：文本插值、屬性渲染、條件渲染、列表渲染和指令改變渲染。我們通過這些渲染方式就可以輕松的通過數據控制頁面的顯示內容了。

云服務器 GPU云服務器 js核心知識 java核心知識點 jsp 模板渲染引擎 js模板渲染ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104495.html

1-1. Vue.js核心知識之實例簡介

摘要：的核心庫只關注視圖層，易于上手，便于與第三方庫或既有項目整合。全局注冊全局注冊組件我的組件創建根實例渲染后的我的組件總結本節學習的核心知識點莫過于模板渲染表單綁定事件處理組件化這幾點了，下面我們針對每一個知識點細細學習。 Vue.js是什么 Vue.js是一套用于構建用戶界面的漸進式框架。Vue.js的核心庫只關注視圖層，易于上手，便于與第三方庫或既有項目整合。Vue.js與現代化的工...

amuqiao 2019-08-23 18:00 評論0 收藏0
1-5. Vue.js核心知識之組件化

摘要：組件是最強大的功能之一。組件的創建和注冊我們可以使用注冊一個全局組件。父組件的數據需要通過才能下發到子組件中。如果傳入的數據不符合要求，會發出警告。這對于開發給他人使用的組件非常有用。組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。組件的創建和注冊我們可以使用 Vue.component(tagName, opti...

weknow619 2019-08-23 18:00 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0