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