实例属性#

$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()
      })
    }
  }
})

Vm 实例属性/方法

实例属性#

实例方法#

猜你喜欢