显示为插值语法java js插值

(一)数据双向绑定

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

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