成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

1-2. Vue.js核心知識(shí)之模板渲染

shiina / 1185人閱讀

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

Vue.js 使用了基于 HTML 的模板語(yǔ)法，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。

插值 


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



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



輸出html代碼: 





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



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

vue中使用v-if、v-else和v-else-if來(lái)實(shí)現(xiàn)條件渲染




 是
 否

另一個(gè)用于根據(jù)條件展示元素的方法是使用v-show



顯示內(nèi)容

v-if 是惰性的，如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。
v-show 就簡(jiǎn)單得多，不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。

列表

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



    
 
  • 
  {{ item.message }}
 
    •

也可以用 v-for 通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代。



    
 
  • 
  {{ value }}
 
    • 



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

指令 (Directives) 是帶有 v- 前綴的特殊屬性。當(dāng)指令對(duì)應(yīng)的表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。



現(xiàn)在你看到我了


這里是個(gè)鏈接

點(diǎn)擊觸發(fā)事件


修飾符作用
小結(jié)

本節(jié)主要學(xué)習(xí)了vue模板渲染的幾種形式：文本插值、屬性渲染、條件渲染、列表渲染和指令改變渲染。我們通過(guò)這些渲染方式就可以輕松的通過(guò)數(shù)據(jù)控制頁(yè)面的顯示內(nèi)容了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104495.html

相關(guān)文章

  • 1-1. Vue.js核心知識(shí)之實(shí)例簡(jiǎn)介

    摘要：的核心庫(kù)只關(guān)注視圖層，易于上手，便于與第三方庫(kù)或既有項(xiàng)目整合。全局注冊(cè)全局注冊(cè)組件我的組件創(chuàng)建根實(shí)例渲染后的我的組件總結(jié)本節(jié)學(xué)習(xí)的核心知識(shí)點(diǎn)莫過(guò)于模板渲染表單綁定事件處理組件化這幾點(diǎn)了，下面我們針對(duì)每一個(gè)知識(shí)點(diǎn)細(xì)細(xì)學(xué)習(xí)。 Vue.js是什么 Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue.js的核心庫(kù)只關(guān)注視圖層，易于上手，便于與第三方庫(kù)或既有項(xiàng)目整合。Vue.js與現(xiàn)代化的工...

    amuqiao 評(píng)論0 收藏0

  • 1-5. Vue.js核心知識(shí)之組件化

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

    weknow619 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<