(一)數據雙向綁定
數據的雙向綁定是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>
這樣我們完成了一個在頁面上實時變化的時間