Vue聲明式渲染詳解
更新時(shí)間：2017年05月17日 10:43:14 作者：街角小七
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(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)文章
vue3中的reactive函數(shù)聲明數(shù)組方式
這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue+ElementUI?實(shí)現(xiàn)分頁(yè)功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁(yè)查詢-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫(kù)中數(shù)據(jù)比較多時(shí),就每次只查詢一部分來(lái)緩解服務(wù)器和頁(yè)面壓力。這里使用elementui的?Pagination?分頁(yè)?組件,配合mysql的limit語(yǔ)句，實(shí)現(xiàn)分頁(yè)查詢mysql數(shù)據(jù),下面來(lái)看看具體實(shí)現(xiàn)過(guò)程,希望對(duì)大家學(xué)習(xí)有所幫助2021-12-12
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
使用vue實(shí)現(xiàn)多規(guī)格選擇實(shí)例（SKU）
這篇文章主要介紹了使用vue實(shí)現(xiàn)多規(guī)格選擇實(shí)例（SKU），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案
這篇文章主要介紹了當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
再做前端頁(yè)面的時(shí)候,想獲取本地的ip地址,可能是為了和服務(wù)器通信,可能是為了展示,無(wú)論哪種,下面給大家總結(jié)下方法,這篇文章主要給大家介紹了關(guān)于vue前端獲取本地IP地址的相關(guān)資料,需要的朋友可以參考下2024-05-05
詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包
這篇文章主要介紹了詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可拖拽組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇vuex存儲(chǔ)token示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11