vue2基础总结

Vue2 API
Vue2 guide
参考以上资料选择一些常用高频核心的Vue2知识进行总结归纳

1.基础

创建vue实例 var vm = new Vue({选项对象})
html标签体插值{ {xxx}} ，xxxx 会作为js 表达式解析
单向数据绑定data–>html:v-bind:href ="xxx" 或简写为:href
双向数据绑定data<–>html:v-mode:value="xxx" 或简写为v-model="xxx"
事件绑定:v-on:事件名="方法名"或简写为@事件名="方法名"
访问vm的选项对象:vm.$选项对象名

2.选项对象

data

 1.对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
 2.访问 vm.a 等价于访问 vm.$data.a(vm代理了 data 对象上所有的 property)
 3.以 _ 或 $ 开头的 property 不会被 vm代理,以避免冲突，使用vm.$data._property访问
 4.组件中data 必须声明为返回一个初始数据对象的函数，因为组件可以创建多个实例，必须调用 data 函数，返回初始数据的一个全新副本数据对象，而不是所有实例共享同一个数据对象
 5.将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 可以得到深拷贝的原始数据对象

props

 1.props 可以是数组或对象，用于接收来自父组件的数据
 2.对象允许配置高级选项，如类型检测、自定义验证和设置默认值

computed

1.{ [key: string]: Function | { get: Function, set: Function } }
2.计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算
3.计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例

methods

1.{ [key: string]: Function }
2.methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
3.不应该使用箭头函数来定义 method 函数,箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例

watch

1.{ [key: string]: string | Function | Object | Array }
2.一个对象，键