一、Vue实例与数据绑定

1、实例与数据

var app =new Vue({

el: docur1'ent.getElementByld ( ’ app ’) ／／或者是’＃ app ’

data：{

    a: 2

}

})

变量app就是Vue实例，el用于制抵挡一个页面中存在的DOM元素来挂载Vue实例；

v-model指令的值对应于Vue实例中data选项中的name字段，需要双向绑定的数据建议声明在data中，便于维护；

2、生命周期

created：实力创构建完成之后调用，此阶段完成了数据的观测等，尚未挂载，el还不可用，需要初始化处理一些数据时比较有用

mounthed：el挂在到实例上之后调用。一般第一个业务逻辑会在这里开始时；

beforeDeatroy：实例销毁之前调用，主要绑定一些使用addEveentListener监听的事件等；

3、插值与表达式

使用双大括号{{}}是基本的文本插值方法，他会自动将我们的双向绑定的数据实时显示出来；

如果想输出html可以使用v-html，<span v-html="link"></span>

注意，如果将用户产生的内容使用v-html输出后，可能导致xss攻击，需要在服务端对用户提交的内容进项处理；

如果想显示{{}}标签，而不进行替换，使用v-pre可跳过编译过程，如：<span v-pre>{{这里的内容不会被编译}}</span>

{{}}中除了简单的绑定属性值之外还可使用js进项简单的运算，三目运算等，但是不支持语句和流控制，且不能使用自定义变量，只能使用vue白名单中的全局变量；

4、过滤器

在{{}}插值尾部添加一个管道符 | 对数据进行过滤，常用于格式化文本；

{{ date |  formatDate }}

var app =new Vue({

el : ’ #app ’ ,

data: {

    date : new Date()

},

filters : {

    formatDate : function (value) { ／／这里的value 就是需要过滤的数据

        ...

    }

}