vue学习总结(一)-Vue基础

MVVM模式

Model-View-ViewModel
视图层变化时,会自动更新到视图模型，反之亦然。View和ViewModel通过双向绑定联系。

数据绑定

通过构造函数Vue创建一个Vue的根实例，var app = new Vue({ // 选项})
el ： 用于指定页面中已存在的DOM元素来挂载Vue实例，可以是HTMLElement或者css选择器。故可以是document.getElementById("app") // "#app",挂载成功后可以通过app.$el来访问改元素。
Vue实例本身也代理了data对象里的所有属性，所以可以通过变量app访问data对象里的所有属性。
data也可以指向一个已有的变量，并且默认它们之间建立了双向绑定，修改app或者这个变量，另一个都会变化。

生命周期

Vue生命周期钩子:
beforeCreate
created:实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时比较有用。
beforeMounted:编译模板后挂载前。
mouted:el挂载到实例上后调用，一般第一个业务逻辑再此。
beforeUpdate:
updated:
beforeDestroy:实例销毁之前调用，主要解绑addEventListener监听的事件等。
destroyed:

插值与表达式

使用双大括号。
如果想输出HTML，直接使用v-html。<span v-html='link'></span>注意span还在，包裹link中元素。
如果想显示双大括号标签，使用v-pre即可跳过这个元素和它的子元素的编译过程。

过滤器

Vue支持在双大括号插值的尾部添加一个管道符 “|”对数据进行过滤，经常用于格式话文本，字母大小写，货币使用分隔符等。通过在Vue实例添加选项filters来设置。并且过滤器可以通过"|"串联，也可以接受参数。

指令与事件

指令是Vue常用的一项功能，带有前缀v-，v-bind可写作“:”,v-on写作“@”
Vue将methods里的方法也代理了，所以可以像访问data里的数据一样调用方法。
@click调用的方法名后可以不跟括号“()”,此时如果该方法有参数，默认将原生事件对象event传入.

计算属性

所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。计算属性可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。每个计算属性都包含一个getter和一个setter。但多数情况只是用默认getter方法读取属性。
注意 1：计算属性可以依赖其他计算属性。
2.计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据。
3.计算属性基于它的依赖缓存，一个计算属性所依赖的数据发生变化时，才会重新取值。因此遍历大数组和做大量计算时应使用计算属性，除非不希望得到缓存则使用methods。