实例方法和自定义指令

Vue实例方法

假设此处我们已经创建了一个Vue实例

1
2
3
var v = new Vue({
	......//具体属性
})

$mount

v.$mount('')可以对v的作用域进行定义，当时需要注意的是，它的级别并没有el那么高，当v中定义了具体的el时，我们是无法通过$mountd的方法来更改作用域的。

$data

v.$data就是操作data属性的。

$el

若在v中定义了el作用域为#div1，那么v.$el可以直接获取这个id名为div1的原生dom对象，一般可以用这个方法对dom节点进行操作。

$options

v.$options可以获得一个对象，里面包含着v的所有属性，包括正常属性和自定义属性。

$log

v.$log将返回一个对象，对象里面包含的是v中data属性中的内容。

$destory

v.$destory可以销毁v这个对象。

v-cloak

有时我们用模板语法输出变量的值，在页面初始化的时候我们往往会看到页面出现的并不是变量的值，而是变量名，过一下才闪动变成变量的值，这是初始化缓慢所导致的问题。为了解决这个问题，就需要用到v-cloak（一般配合display: none使用）。
如下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div v-cloak>
    {{message}}
  </div>
</template>

<script>
  export default {
    name: "VCloak",
    data() {
      return {
        message: 'v-cloak示例'
      }
    }
  }
</script>

<style scoped>
  [v-cloak] {
    display: none;
  }
</style>

我们对div标签添加了属性，css中使用属性选择器对含有v-cloak的所有标签设置了display：none。而运行的机制是，当页面未加载出message变量的值时，v-cloak属性将起作用，整个div框都不显示出来，当message的值加载完毕时，v-cloak将不再起作用，它的css自然也就失效，div框又能显现出来，以此解决初始化页面闪动的问题。

自定义指令

基本用法

Vue还设置了自定义指令来更加方便地操作dom节点。

1
2
3
Vue.directive('yang',function(){
	//函数体
})

第一个参数为定义的名字，第二个为执行的函数。在调用时只需要在标签中加入相应名字的属性，如下图：

1
<div v-yang></div>

这样即可让div块执行函数，需要注意的是，若以驼峰命名法命名，如yangNing，那么在标签处应写为v-yang-ning。

钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

  • el：指令所绑定的元素，可以用来直接操作 DOM 。
  • binding：一个对象，包含以下属性：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1” 中，表达式为 “1 + 1”。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用