vm.$data
- 类型:
Object
- 详细:
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。 - 参考:选项 / 数据 - data
vm.$props
2.2.0 新增
- 类型:
Object
- 详细:
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
vm.$el
- 类型:
HTMLElement
- 只读
- 详细:
Vue 实例使用的根 DOM 元素。
vm.$options
- 类型:
Object
- 只读
- 详细:
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:
vm.$parent
- 类型:
Vue instance
- 只读
- 详细:
父实例,如果当前实例有的话。
vm.$root
- 类型:
Vue instance
- 只读
- 详细:
当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。
vm.$children
- 类型:
Array<Vue instance>
- 只读
- 详细:
当前实例的直接子组件。需要注意$children
并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children
来进行数据绑定,考虑使用一个数组配合 v-for
来生成子组件,并且使用 Array 作为真正的来源。
vm.$slots
- 类型:
{ [name: string]: ?Array<VNode> }
- 只读
- 详细:
用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:slot="foo"
中的内容将会在 vm.$slots.foo
中被找到)。default
属性包括了所有没有被包含在具名插槽中的节点。
在使用渲染函数书写一个组件时,访问 vm.$slots
最有帮助。 - 示例:
- 参考:
vm.$scopedSlots
2.1.0 新增
- 类型:
{ [name: string]: props => VNode | Array<VNode> }
- 只读
- 详细:
用来访问作用域插槽。对于包括默认 slot
在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots
在使用渲染函数开发一个组件时特别有用。 - 参考:
vm.$refs
- 类型:
Object
- 只读
- 详细:
一个对象,持有注册过ref 的所有 DOM 元素和组件实例。 - 参考:
vm.$isServer
- 类型:
boolean
- 只读
- 详细:
当前 Vue 实例是否运行于服务器。 - 参考:服务端渲染
vm.$attrs
- 类型:
{ [key: string]: string }
- 只读
- 详细:
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class
和style
除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class
和style
除外),并且可以通过v-bind="$attrs"
传入内部组件——在创建高级别的组件时非常有用。
vm.$listeners
- 类型:
{ [key: string]: Function | Array<Function> }
- 只读
- 详细:
包含了父作用域中的 (不含.native
修饰器的)v-on
事件监听器。它可以通过v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用。
实例方法 / 数据
vm.$watch( expOrFn, callback, [options] )
- 参数:
-
{string | Function} expOrFn
-
{Function | Object} callback
-
{Object} [options]
-
{boolean} deep
-
{boolean} immediate
- 返回值:
{Function} unwatch
- 用法:
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。 - 示例:
vm.$watch
返回一个取消观察函数,用来停止触发回调:
- 选项:deep
为了发现对象内部值的变化,可以在选项参数中指定deep: true
。注意监听数组的变动不需要这么做。
- 选项:immediate
在选项参数中指定immediate: true
将立即以表达式的当前值触发回调:
vm.$set( target, key, value )
- 参数:
-
{Object | Array} target
-
{string | number} key
-
{any} value
- 返回值:设置的值。
- 用法:
这是全局Vue.set
的别名。 - 参考:Vue.set
vm.$delete( target, key )
- 参数:
-
{Object | Array} target
-
{string | number} key
- 用法:
这是全局Vue.delete
的别名。 - 参考:Vue.delete
vm.$on( event, callback )
- 参数:
-
{string | Array<string>} event
(数组只在 2.2.0+ 中支持) -
{Function} callback
- 用法:
监听当前实例上的自定义事件。事件可以由vm.$emit
触发。回调函数会接收所有传入事件触发函数的额外参数。 - 示例:
vm.$once( event, callback )
- 参数:
-
{string} event
-
{Function} callback
- 用法:
监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。
vm.$off( [event, callback] )
- 参数:
-
{string | Array<string>} event
(只在 2.2.2+ 支持数组) -
{Function} [callback]
- 用法:
移除自定义事件监听器。
- 如果没有提供参数,则移除所有的事件监听器;
- 如果只提供了事件,则移除该事件所有的监听器;
- 如果同时提供了事件与回调,则只移除这个回调的监听器。
vm.$emit( eventName, […args] )
- 参数:
-
{string} eventName
-
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
- 示例:
只配合一个事件名使用$emit
:
Click me to be welcomed
配合额外的参数使用 $emit
:
实例方法 / 生命周期
vm.$mount( [elementOrSelector] )
- 参数:
-
{Element | string} [elementOrSelector]
-
{boolean} [hydrating]
- 返回值:
vm
- 实例自身 - 用法:
如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用vm.$mount()
手动地挂载一个未挂载的实例。
如果没有提供elementOrSelector
参数,模板将被渲染为文档之外的的元素,并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身,因而可以链式调用其它实例方法。 - 示例:
- 参考:
vm.$forceUpdate()
- 示例:
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
vm.$nextTick( [callback] )
- 参数:
-
{Function} [callback]
- 用法:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法Vue.nextTick
一样,不同的是回调的this
自动绑定到调用它的实例上。
2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不是原生支持 Promise (IE:你们都看我干嘛),你得自行 polyfill。
- 示例:
- 参考:Vue.nextTick
vm.$destroy()
- 用法:
完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。
触发beforeDestroy
和destroyed
的钩子。
在大多数场景中你不应该调用这个方法。最好使用v-if
和v-for
指令以数据驱动的方式控制子组件的生命周期。 - 参考:生命周期图示
指令
v-text
- 预期:
string
- 详细:
更新元素的textContent
。如果要更新部分的textContent
,需要使用{{ Mustache }}
插值。 - 示例:
- 参考:数据绑定语法 - 插值
v-html
- 预期:
string
- 详细:
更新元素的innerHTML
。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用v-html
组合模板,可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致XSS 攻击。只在可信内容上使用v-html
,永不用在用户提交的内容上。
在单文件组件里,scoped
的样式不会应用在v-html
内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对v-html
的内容设置带作用域的 CSS,你可以替换为CSS Modules 或用一个额外的全局<style>
元素手动设置类似 BEM 的作用域策略。 - 示例:
- 参考:数据绑定语法 - 插值
v-show
- 预期:
any
- 用法:
根据表达式之真假值,切换元素的display
CSS 属性。
当条件变化时该指令触发过渡效果。 - 参考:条件渲染 - v-show
v-if
- 预期:
any
- 用法:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是<template>
,将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
当和v-if
一起使用时,v-for
的优先级比v-if
更高。详见列表渲染教程 - 参考:条件渲染 - v-if
v-else
- 不需要表达式
- 限制:前一兄弟元素必须有
v-if
或v-else-if
。 - 用法:
为v-if
或者v-else-if
添加“else 块”。
- 参考:条件渲染 - v-else
v-else-if
2.1.0 新增
- 类型:
any
- 限制:前一兄弟元素必须有
v-if
或v-else-if
。 - 用法:
表示v-if
的 “else if 块”。可以链式调用。
- 参考:条件渲染 - v-else-if
v-for
- 预期:
Array | Object | number | string
- 用法:
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法alias in expression
,为当前遍历的元素提供别名:
另外也可以为数组索引指定别名 (或者用于对象的键):
v-for
默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key
的特殊属性:
v-for
的详细用法可以通过以下链接查看教程详细说明。
- 参考:
v-on
- 缩写:
@
- 预期:
Function | Inline Statement | Object
- 参数:
event
- 修饰符:
-
.stop
- 调用event.stopPropagation()
。 -
.prevent
- 调用event.preventDefault()
。 -
.capture
- 添加事件侦听器时使用 capture 模式。 -
.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。 -
.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。 -
.native
- 监听组件根元素的原生事件。 -
.once
- 只触发一次回调。 -
.left
- (2.2.0) 只当点击鼠标左键时触发。 -
.right
- (2.2.0) 只当点击鼠标右键时触发。 -
.middle
- (2.2.0) 只当点击鼠标中键时触发。 -
.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
- 用法:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个$event
属性:v-on:click="handle('ok', $event)"
。
从2.4.0
开始,v-on
同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。 - 示例:
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器):
- 参考:
v-bind
- 缩写:
:
- 预期:
any (with argument) | Object (without argument)
- 参数:
attrOrProp (optional)
- 修饰符:
-
.prop
- 被用于绑定 DOM 属性 (property)。(差别在哪里?) -
.camel
- (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持) -
.sync
(2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的v-on
侦听器。
- 用法:
动态地绑定一个或多个特性,或一个组件 prop 到表达式。
在绑定class
或style
特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时,可以绑定到一个包含键值对的对象。注意此时class
和style
绑定不支持数组和对象。 - 示例:
.camel
修饰符允许在使用 DOM 模板时将 v-bind
属性名称驼峰化,例如 SVG 的 viewBox
属性:
在使用字符串模板或通过 vue-loader
/vueify
编译时,无需使用 .camel
。
- 参考:
v-model
- 预期:随表单控件类型不同而不同。
- 限制:
-
<input>
-
<select>
-
<textarea>
- components
- 修饰符:
- 用法:
在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。 - 参考:
v-cloak
- 不需要表达式
- 用法:
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 - 示例:
不会显示,直到编译结束。
v-once
- 不需要表达式
- 详细:
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
- 参考: