(一)数据双向绑定
数据的双向绑定是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)
使用双大括号{{}}是最基本的文本插值的方法，他会自动将我们双向绑定的数据实时显示出来，微信小程序也是通过此方法进行的数据绑定显示在前端页面上，但是！！！微信小程序用{{}}绑定时，大括号与变量之间不用留有空格，而Vue.js两边要留有空格否则变量不能被解析只要注意这一小点就行了，下面为一个简单的文本插值
<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>
这样我们完成了一个在页面上实时变化的时间