(一)數(shù)據(jù)雙向綁定

數(shù)據(jù)的雙向綁定是Vue.js的核心功能在上一篇記錄中已經(jīng)簡(jiǎn)單創(chuàng)建了一個(gè)Vue實(shí)例如下

var myVue=new Vue({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?el:'#myvue'//myvue是已經(jīng)存在的div，其id值為myvue

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})

使用選項(xiàng)el掛載成功后，我們可以通過(guò)myVue.$el來(lái)訪問(wèn)該元素，如果需要在此div內(nèi)綁定數(shù)據(jù)，就要用到Vue實(shí)例的另外一個(gè)選項(xiàng)data，data選項(xiàng)可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)，建議所有會(huì)用到的數(shù)據(jù)都預(yù)先再data內(nèi)聲明這樣不至于將數(shù)據(jù)散落在業(yè)務(wù)邏輯中，難以維護(hù)。

Vue實(shí)例本身也代理了data對(duì)象里所有的屬性可以這樣進(jìn)行訪問(wèn)：

var myVue=new Vue({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?el:'#myvue',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?data:{?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? num:3

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

?})

console.log(myVue.num);//3

除了顯式聲明數(shù)據(jù)外，也可以紙箱一個(gè)已有的變量，并且他們之間默認(rèn)建立了雙向綁定，當(dāng)修改其中任意一個(gè)是，另一個(gè)也會(huì)一起變化比如：

var myData={

? ? ? ? ? ? ? num：2

}

var myVue=new Vue({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?el:'#myvue',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?data:myData

?})

console.log(myVue.num)//2

myVue.num=1//修改屬性原數(shù)據(jù)也會(huì)變

console.log(myData.num)//1

myData.num=3//修改原數(shù)據(jù)屬性也會(huì)變

console.log(myVue.num)//3

(二)文本插值

(1)

使用雙大括號(hào){{}}是最基本的文本插值的方法，他會(huì)自動(dòng)將我們雙向綁定的數(shù)據(jù)實(shí)時(shí)顯示出來(lái)，微信小程序也是通過(guò)此方法進(jìn)行的數(shù)據(jù)綁定顯示在前端頁(yè)面上，下面為一個(gè)簡(jiǎn)單的文本插值

<div id='myvue'>

當(dāng)前時(shí)間為{{ date }} ? ? ? ? ? ? ? ? ? ? ? ? ?

</div>

<script src='XXX'></script> ? ? ? ? ? ? ? ? ? //引用下載好的Vue.js此路徑為文件的相對(duì)路徑，此后所有引用相同

<script>

? var myVue=new Vue({

? ? ? ? ? ? ? ? ? ? ?el:'#myvue',

? ? ? ? ? ? ? ? ? ? ?data:{

? ? ? ? ? ? ? ? ? ? ?date:new Date()

? ? ? ? ? ? ? ? ? ? ? }

})

</script>

這樣就可以在頁(yè)面實(shí)現(xiàn)顯示‘當(dāng)前時(shí)間為+頁(yè)面加載出來(lái)的時(shí)間’

(2)

此時(shí)我們讓他每秒更新一下，思路就是用setInterval()定時(shí)器每隔1000毫秒進(jìn)行一次new Date()，然后把new Date()的值賦給data屬性里的date.就可以實(shí)時(shí)更新變換，但是這時(shí)候我們就要思考Vue.js的生命周期了，因?yàn)槊總€(gè)vue實(shí)例創(chuàng)建時(shí)都會(huì)經(jīng)過(guò)一系列的初始化過(guò)程，同時(shí)也會(huì)調(diào)用相應(yīng)的生命周期鉤子，我們可以利用這些鉤子，在合適的時(shí)候執(zhí)行我們的業(yè)務(wù)邏輯。就像jQuery中的ready()方法一樣Vue的生命周期鉤子與之類似，比較常用得有：

creatd(創(chuàng)建):實(shí)例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測(cè)等，但尚未掛載，$el還不能用，需要初始化處理一些數(shù)據(jù)時(shí)會(huì)比較有用；

mounted(掛載):el掛載到實(shí)例上后調(diào)用，一般我們的第一個(gè)業(yè)務(wù)邏輯會(huì)從這里開(kāi)始；

beforeDestroy(銷(xiāo)毀之前):實(shí)例銷(xiāo)毀之前調(diào)用，主要解綁一些使用addEventerListener 監(jiān)聽(tīng)的事件等

這些鉤子與el data類似是被作為選項(xiàng)寫(xiě)入Vue實(shí)例內(nèi)的，并且這些鉤子也就是方法內(nèi)的this指的是調(diào)用這些方法的實(shí)例本身比如

<div id='myvue'></div>

<script src='XXX'></script>

<script>

? var myVue=new Vue({

? ? ? ? ? ? ? ? ? ? ?el:'#myvue',

? ? ? ? ? ? ? ? ? ? ?data:{

? ? ? ? ? ? ? ? ? ? ? ? num:1

? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? created:function(){

? ? ? ? ? ? ? ? ? ? ? ? console.log(this.num)//1

? ? ? ? ? ? ? ? ? ? ? ? console.log(this.$el)//undefined(由于此時(shí)還未掛載)

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ?mounted:function(){

? ? ? ? ? ? ? ? ? ? ? ? ?console.log(this.num)//1

? ? ? ? ? ? ? ? ? ? ? ? ?console.log(this.$el)//<div id='myvue'></div>

? ? ? ? ? ? ? ? ? ?}

})

</script>

最后了解到生命周期后我們就可以編輯我們的業(yè)務(wù)邏輯了，我們要把我們的處理的業(yè)務(wù)邏輯寫(xiě)在mounted里如下

修改為

<div id='myvue'>

當(dāng)前時(shí)間為{{ date }} //注意要有空格呀

</div>

<script src='XXX'></script>

<script>

?var myVue=new Vue(){

? ? el:'#myvue',

? ? data:{

? ? ? ? date:new Date()

? ? },

? ?mounted:function(){

? ? ? ? ? ? ? ? ?var _this=this; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//聲明一個(gè)變量指向本實(shí)例

? ? ? ? ? ? ? ? ?this.timer=setInterval(function(){ ? ? ? ? ? ? //這個(gè)this和_this代表的都是本實(shí)例

? ? ? ? ? ? ? ? ? ? ? ? _this.date=new Date(); ? ? ? ? ? ? ? ? ? ?//因?yàn)樾枰玫降膶?duì)象是實(shí)例所以用_this，如果直接寫(xiě)this的指的是setInterval方法

? ? ? ? ? ? ? ? ? },1000)

? ? },

beforeDestroy:function(){

? ? ?if(this.timer){

? ? ? ? ?clearInterval(this.timer); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//在實(shí)例銷(xiāo)毀前清除定時(shí)器

? ? ?}

}

}

</script>

這樣我們完成了一個(gè)在頁(yè)面上實(shí)時(shí)變化的時(shí)間

?

?

?

?

?

? ? ?

?

轉(zhuǎn)載于:https://www.cnblogs.com/gulugulul/p/11201723.html

總結(jié)

以上是生活随笔為你收集整理的初学Vue.js--数据绑定与文本插值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。