技術(shù)員聯(lián)盟提供win764位系統(tǒng)下載,win10,win7,xp,裝機(jī)純凈版,64位旗艦版,綠色軟件,免費(fèi)軟件下載基地!

當(dāng)前位置:主頁 > 教程 > 服務(wù)器類 >

Vue聲明式渲染教程

來源:技術(shù)員聯(lián)盟┆發(fā)布時(shí)間:2017-10-23 06:36┆點(diǎn)擊:

Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明式的將數(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=http://www.3lian.com/edu/2017/05-17/"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):

Vue聲明式渲染教程 三聯(lián)

下面看看將文本數(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"> 簡寫--> 鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息! </span> </div> </body> <script> var vm = new Vue({ el:"#id", data:{ message:'頁面加載的時(shí)間'+new Date() } }) </script>

渲染結(jié)構(gòu):

Vue聲明式渲染教程