(一)数据双向绑定

数据的双向绑定是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>

这样我们完成了一个在页面上实时变化的时间