《vue的数据绑定，事件》

什么是数据绑定

• 通过构造函数创建一个vue实例，其中el,用于指定页面已经存在的的DOM元素来挂载vue实例
• 其中data,可以声明应用内的双向绑定数据。

el:'#dateApp',
data:{
    date:new Date()
},

生命周期钩子

• created 数据进入内存
• mounted 数据挂载，进入页面
• update 数据更新
• beforeDestroy 数据消亡

//挂载
mounted:function () {
    const _this = this;
    this.timer = setInterval(function (){
        _this.date = new Date();
                                       },1000)
},
//消亡前结束
beforeDestroy:function () {
    if(this.timer){
        clearInterval(this.timer);
    }
}

Vue模板

template使用XML语法，不是html

文本插入和表达式

使用双大括号（ Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，

什么是过滤器

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格 式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义 的， 通过给 Vue 实例添加选项 filters 来设置

index.html部分代码

<div id="dateApp">
    {{date}}<br>
    {{date  | formatDate}}
</div>

main.js部分代码

//定义过滤器
filters:{
    formatDate(value){
        const date = new Date(value);
        const year = date.getFullYear();
        const month = zeroize(date.getMonth()+1);
        const day = zeroize(date.getDay());
        const hours =zeroize(date.getHours());
        const minutes =zeroize(date.getMinutes());
        const sc  =zeroize(date.getSeconds()) ;

        return year +'/'+month +'/'+ day +' '+ hours+':'+minutes+':'+sc+' (中国北京时间)';
    }
},