(一)數據雙向綁定

數據的雙向綁定是Vue.js的核心功能在上一篇記錄中已經簡單創建了一個Vue實例如下

var myVue=new Vue({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?el:'#myvue'//myvue是已經存在的div，其id值為myvue

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

使用選項el掛載成功后，我們可以通過myVue.$el來訪問該元素，如果需要在此div內綁定數據，就要用到Vue實例的另外一個選項data，data選項可以聲明應用內需要雙向綁定的數據，建議所有會用到的數據都預先再data內聲明這樣不至于將數據散落在業務邏輯中，難以維護。

Vue實例本身也代理了data對象里所有的屬性可以這樣進行訪問：

var myVue=new Vue({

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

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

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

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

?})

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

除了顯式聲明數據外，也可以紙箱一個已有的變量，并且他們之間默認建立了雙向綁定，當修改其中任意一個是，另一個也會一起變化比如：

var myData={

? ? ? ? ? ? ? num：2

}

var myVue=new Vue({

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

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

?})

console.log(myVue.num)//2

myVue.num=1//修改屬性原數據也會變

console.log(myData.num)//1

myData.num=3//修改原數據屬性也會變

console.log(myVue.num)//3

(二)文本插值

(1)

使用雙大括號{{}}是最基本的文本插值的方法，他會自動將我們雙向綁定的數據實時顯示出來，微信小程序也是通過此方法進行的數據綁定顯示在前端頁面上，下面為一個簡單的文本插值

<div id='myvue'>

當前時間為{{ date }} ? ? ? ? ? ? ? ? ? ? ? ? ?

</div>

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

<script>

? var myVue=new Vue({

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

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

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

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

})

</script>

這樣就可以在頁面實現顯示‘當前時間為+頁面加載出來的時間’

(2)

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

creatd(創建):實例創建完成后調用，此階段完成了數據的觀測等，但尚未掛載，$el還不能用，需要初始化處理一些數據時會比較有用；

mounted(掛載):el掛載到實例上后調用，一般我們的第一個業務邏輯會從這里開始；

beforeDestroy(銷毀之前):實例銷毀之前調用，主要解綁一些使用addEventerListener 監聽的事件等

這些鉤子與el data類似是被作為選項寫入Vue實例內的，并且這些鉤子也就是方法內的this指的是調用這些方法的實例本身比如

<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(由于此時還未掛載)

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

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

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

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

? ? ? ? ? ? ? ? ? ?}

})

</script>

最后了解到生命周期后我們就可以編輯我們的業務邏輯了，我們要把我們的處理的業務邏輯寫在mounted里如下

修改為

<div id='myvue'>

當前時間為{{ date }} //注意要有空格呀

</div>

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

<script>

?var myVue=new Vue(){

? ? el:'#myvue',

? ? data:{

? ? ? ? date:new Date()

? ? },

? ?mounted:function(){

? ? ? ? ? ? ? ? ?var _this=this; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//聲明一個變量指向本實例

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

? ? ? ? ? ? ? ? ? ? ? ? _this.date=new Date(); ? ? ? ? ? ? ? ? ? ?//因為需要用到的對象是實例所以用_this，如果直接寫this的指的是setInterval方法

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

? ? },

beforeDestroy:function(){

? ? ?if(this.timer){

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

? ? ?}

}

}

</script>

這樣我們完成了一個在頁面上實時變化的時間

?

?

?

?

?

? ? ?

?

轉載于:https://www.cnblogs.com/gulugulul/p/11201723.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。