溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數(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元素屬性上，將這個元素節(jié)點(diǎn)的title 屬性和 Vue 實(shí)例的 message 屬性保持一致，代碼如下
<body>
<div id="id">
<span v-bind:title="message"> <!--綁定實(shí)例中的數(shù)據(jù)-->
<!-- <span :title="message"> 簡寫-->
鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'頁面加載的時間'+new Date()
}
})
</script>
渲染結(jié)構(gòu)：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼