Vue聲明式渲染詳解
更新時(shí)間：2017年05月17日 10:43:14 作者：街角小七
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM，也就是將模板中的文本數(shù)據(jù)寫進(jìn)DOM中，使用 {{data}} 的格式寫入。此代碼都是Vue.js官網(wǎng)上的實(shí)例。
1、首先導(dǎo)入Vue.js
<script type="text/javascript" src="vue.js"></script>
2、html和js代碼
<body>
<div id="id"> //id為實(shí)例中el的屬性
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'渲染到html中的數(shù)據(jù)！'
}
})
</script>
3、渲染結(jié)構(gòu)：
下面看看將文本數(shù)據(jù)單向綁定到DOM元素屬性上，將這個(gè)元素節(jié)點(diǎn)的title 屬性和 Vue 實(shí)例的 message 屬性保持一致，代碼如下
<body>
<div id="id">
<span v-bind:title="message"> <!--綁定實(shí)例中的數(shù)據(jù)-->
<!-- <span :title="message"> 簡(jiǎn)寫-->
鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！
</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'頁(yè)面加載的時(shí)間'+new Date()
}
})
</script>
渲染結(jié)構(gòu)：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0實(shí)現(xiàn)倒計(jì)時(shí)的插件(時(shí)間戳 刷新 跳轉(zhuǎn) 都不影響)
我發(fā)現(xiàn)好多倒計(jì)時(shí)的插件，刷新都會(huì)變成從頭再來，于是自己用vue2.0寫了一個(gè)，感覺還不錯(cuò)，特此分享到腳本之家平臺(tái)供大家參考下2017-03-03
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
這篇文章主要介紹了 vue中v-for 循環(huán)對(duì)象中的屬性，文章圍繞v-for 循環(huán)對(duì)象的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
詳解vue 動(dòng)態(tài)加載并注冊(cè)組件且通過 render動(dòng)態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動(dòng)態(tài)加載并注冊(cè)組件且通過 render動(dòng)態(tài)創(chuàng)建該組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁(yè)面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁(yè)面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-10-10
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue 實(shí)現(xiàn)setInterval 創(chuàng)建和銷毀實(shí)例
這篇文章主要介紹了vue 實(shí)現(xiàn)setInterval 創(chuàng)建和銷毀實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了在 React、Vue項(xiàng)目中使用SVG的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue開發(fā)Sort組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-10-10
解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因?yàn)榘姹締栴}在創(chuàng)建項(xiàng)目時(shí)出現(xiàn)的各種報(bào)錯(cuò)問題,這次在運(yùn)行時(shí)出現(xiàn)的問題,下面這篇文章主要給大家介紹了關(guān)于解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關(guān)資料,需要的朋友可以參考下2023-04-04