7.vue实例的属性和方法

vue实例的属性和方法

1. 属性

vm.$el

类型：Element

只读

详细：

Vue 实例使用的根 DOM 元素。

vm.$data

类型：Object
详细：
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问

vm.$options

类型：Object

只读

详细：

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

vm.$refs

类型：Object

只读

详细：

一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

2. 方法

vm.$mount()

参数：

{Element | string} [elementOrSelector]
{boolean} [hydrating]
返回值：vm - 实例自身

用法：

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法。

vm.$destroy()

用法：

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

vm.$nextTick(callback)

参数：

{Function} [callback]
用法：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不是原生支持 Promise (IE：你们都看我干嘛)，你得自行 polyfill。

• vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM

• DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间。则需要用此方法调用
  

  vm.$set(object,key,value)

参数：

{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值。

用法：

这是全局 Vue.set 的别名。

vm.$delete(object,key)

参数：

{Object | Array} target
{string | number} propertyName/index
用法：

这是全局 Vue.delete 的别名。

vm.$watch(data,callback[,options])

参数：

{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} immediate
返回值：{Function} unwatch

用法：

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。深度监视，当对象中的属性发生变化时也会监视

五、自定义指令

分类：全局指令、局部指令

1. 自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)    

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素，像这样：

当页面加载时，元素将获得焦点。事实上，你访问后还没点击任何内容，input 就获得了焦点。

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

钩子函数

指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。被绑定元素插入到DOM中时调用
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。
  接下来我们来看一下钩子函数的参数 (包括 el，binding，vnode，oldVnode) 。

钩子函数的参数

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  name: 指令名，不包括 v- 前缀。
  value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。
• oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression: 绑定值的字符串形式。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
• arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
• modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

2. 自定义局部指令

也可以注册局部指令，组件中接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义---
  }
}