实例属性#
$data
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
$props
一个对象，代表当前组件收到的 props。Vue 实例代理访问到这个 props 对象的属性们。
$el
Vue 实例使用的根 DOM 元素。
$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
})
$parent
父实例，如果当前实例有的话。
$root
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自已。
$children
当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用
$children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
$slots
用于以编程式来访问 [由 slots 分发](https://vue.docschina.org/v2/guide/components.html#使用-slots-进行内
容分发) 的内容。在 vm.$slots 上，有着与每个 [具名 slot]
相应的属性（例如：在 `vm.$slots.foo` 上可
以找到 `slot="foo"` 中的内容）。`default` 属性是由所有匿名 slot 的 VNode 节点构成的数组。
<blog-post>
<h1 slot="header">
About Me
</h1>
<p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
<p slot="footer">
Copyright 2016 Evan You
</p>
<p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>
Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
})
$scopedSlots
用来访问。对于包括 `默认 slot` 在内的每一个 slot， 该对象都包含一个返回相应 VNode 的函数。
$refs
一个对象，包含 DOM 元素和组件实例，通过ref注册。
$isServer
当前 Vue 实例是否运行于服务器。
$attrs
含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何
props 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组
件——在创建高阶组件(higher-order component)时非常有用。
$listenners
包括父作用域中的 v-on 事件监听器（但不包括添加了 .native 修饰器的那些事件监听器）。可以通过 v-
on="$listeners"，将这些事件监听器向下传入到组件内部，在创建透明容器组件(transparent wrapper component)时非常有用。
实例方法#
$watch
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
// 函数
vm.$watch(
function () {
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)
$set
vm.$set( target, key, value )
this.$set(this.someObject,'b',2)
$delete
vm.$delete( target, key )
$emit
Vue.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
`
})
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
$nextTick
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方
法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})
网友评论