主题
Vue 2 语法速览
Vue 是一套用于构建用户界面的渐进式框架。
版本说明
Vue 2 已经终止支持且不再维护。 请升级到 Vue 3 或了解有关 Vue 2 终止支持 (EOL) 的信息。
语法是基于 Vue 2 官网语法的一个速览，方便快速查阅。更多更加详细的语法解析，请参考 Vue 2 官网。
要有一个正确的态度：官网才是第一手资料。
场景
- 实例
Vue 应用是通过用 Vue 函数创建一个新的 Vue 实例开始的：
js
const vm = new Vue({
// 选项对象
});vm：ViewModel 的缩写，这个变量名表示 Vue 实例，该实例叫 根 Vue 实例。- Vue 组件就是 Vue 实例。
APIs
指令
选项/数据
不应该使用箭头函数来定义 method、watch 函数。因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例。
- data
- 类型：
Function|Object - 限制：组件接受
Function。提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！ - 说明：
Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。
推荐在创建实例之前，就声明所有的根级响应式 property。实例创建之后，可以通过 vm.$data 访问原始数据对象。
命名注意：以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。
js
var data = { a: 1 };
// 直接创建一个实例
var vm = new Vue({
data: data
});
vm.a === data.a; // `true`- props
- 类型：
Array<string>|Object
props 可以是数组或对象，用于接收来自父组件的数据。
- type：可以是下列原生构造函数中的一种：
String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。 - default：
any。为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。 - required：
Boolean。定义该 prop 是否是必填项。在非生产环境中，如果这个值为truthy且该 prop 没有被传入的，则一个控制台警告将会被抛出。 - validator：
Function。自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个falsy的值 (也就是验证失败)，一个控制台警告将会被抛出。
js
// 对象语法，提供验证
Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})- computed
- 类型：
{ [key: string]: Function | { get: Function, set: Function } }
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。
- methods
- 类型：
{ [key: string]: Function }
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意
箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
- watch
- 类型：
{ [key: string]: Function | Object }
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
js
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组，它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1选项/DOM
el
提供一个在页面上已经存在的 DOM 元素作为 Vue 实例的挂载目标，在实例挂载之后，元素可以用 vm.$el 访问。
选项/生命周期钩子
所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例。
create: 是实例创建。
beforeCreate:- 实例初始化已经完成，负责数据侦听和事件/侦听器的配置之前同步调用。
- 实例还未创建创建。
- created：
- 此时实例已经创建完成
- 但还没有挂载，所以
$el还没有被定义。