vue.js实战学习——数据绑定

 注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

1.vue.js应用创建很简单，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：

var app=new Vue({
      //选项  
})

变量app就代表了这个Vue实例。事实上，几乎所有的代码都是一个对象，写入Vue实例的选项内。

首先，必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器。

var app=new Vue({
   el:'#app'     //或者'document.getElementById('app')' 
})

通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。

Vue实例本身也代理了data对象里所有属性。

var app=new Vue({
    el:'#app',
    data:{
        a:2   
     } 
});
console.log(app.a);

除了显式的声明数据外，也可以指向一个已有的变量，并且他们只见默认建立了双向绑定，当修改任意一个是，另一个也会一起变化。　　

2.每个Vue实例创建时，都会经历一系列的初始化过程，同伙私也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

比较常用的有：

created:实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据是会比较有用。

mounted: el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。

beforeDestroy: 实例销毁之前调用，主要解绑一些使用addEventListener 监听的事件等。

这些钩子与el和data类似，也是作为选项写入Vue实例内，并且钩子的this指向的是调用它的Vue实例

var app=new Vue({
    el:'#app',
    data:{
        a:2   
     } ,
    created:function(){
        console.log(this.a); //2
     },
    mounted:function(){
        console.log(this.$el);   //<div id="app"></div>
    }
});

3.使用双大括号“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。

var app3=new Vue({
    el:'.app3',
    data:{
           date:new Date()
    },
    mounted:function(){
        var _this=this;  //声明一个变量指向Vue实例this,保证作用域一致
        this.timer=setInterval(function(){
            _this.date=new Date(); //修改数据date
        },1000);
    },
    beforeDestroy:function(){
        if(this.timer){
            clearInterval(this.timer); //在实例销毁前，清除我们的定时器
        }
    }
});

如果想输出HTML，而不是将数据解释后的纯文本，可以使用 v-html：

<div class="app4">
    <span v-html='link'></span>
</div>

var app4=new Vue({
    el:'.app4',
    data:{
        link:'<a href="#">这是一个链接哦</a>'
    }
});

Vue.js只支持单个表达式，不支持语句和流控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date。

4.Vue.js支持在{{}}插值的尾部添加一个管道符(|)对数据进行过滤，经常用于格式化文本。过滤的规则是自定义的，通过Vue实例添加选项filters来设置。

<div class="app6">
    {{date|formatDate}}
</div>
var padDate=function(value){
    return value<10?'0'+value:value;
};
var app6=new Vue({
    el:'.app6',
    data:{
        date:new Date()
    },
    filters:{
        formatDate:function(value){
            var date=new Date(value);
            var year=date.getFullYear();
            var month=padDate(date.getMonth()+1);
            var day=padDate(date.getDate());
            var hours=padDate(date.getHours());
            var minutes=padDate(date.getMinutes());
            var seconds=padDate(date.getSeconds());
            return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
        },
                    
    },
    mounted:function(){
        var _this=this;
        this.timer=setInterval(function(){
            _this.date=new Date();
        },1000);
    },
    beforeDestory:function(){
        if(this.timer){
            clearInterval(this.timer);
        }
    }
})

 注：此内容摘抄自：梁灏的《Vue.js实战》