Vue 指令的自定义

我们可能需要先知道的

Vue 中自带默认指令（v-if 和 v-show 等），我们在使用 Vue 框架的时候，这样使用指令的语句

<h3 v-if="flag">hello world</h3>
<h3 v-show="flag">hello world</h3>

然而默认指令并不能完全满足我们的需求，举个栗子：输入框的聚焦

<!-- 不使用框架实现 -->
function setFocus() {
  document.getElementById("input").focus();
}

而在 Vue 中，不建议我们对 DOM 元素进行直接操作，这个时候我们可以自定义指令来实现功能

全局的自定义指令

<!-- 输入框聚焦 -->
Vue.directive("focus", {
  bind: function(el) {
    // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    // 如果是和元素的样式有关的最好在bind中执行
  },
  inserted: function(el) {
    // insreted表示元素插入到dom中的时候，会执行inserted函数
    el.focus();
    // 和js行为有关的最好在inserted中去执行，防止失效
  },
  updated: function() {
    // 当Vnode更新的时候，会执行updated，可能会执行多次
  }
});

局部的自定义指令

var vm = new Vue({
  el: "#app",
  data: {},
  methods: {},
  directives: {
    // 自定义私有指令 [指令名称] + [处理函数对象]
    // 设置字体粗细
    fontweight: {
      bind: function (el, binding) {
        el.style.fontWeight = binding.value;
      }
    },
    // 设置字体大小，简易方法
    // 防止没有注意到和上面的区别，强调一下，重点不是 fontweight 没有单引号而 fontsize 有单引号=-=
    'fontsize': function (el, binding) {
      // 这个function等同于把代码写到 bind 和 update 当中去
      el.style.fontSize = binding.value
    }
  }
});

使用

对于新定义好的指令，我们可以这样像默认指令一样使用

<!-- 这里的 "'blue'" 很容易让人忘掉加单引号，如果不加就变成了属性值
（编译过程中系统就会去data找一下有没有这么个属性值，自然会报错），加了的话就是字符串 -->
<input type="text" class="form-control" v-model="id" v-focus v-color="'blue'" />

参数

这一部分最好看官方文档，虽然还是有自己的笔记

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：

name：指令名，不包括 v- 前缀。（这一点非常重要）
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。（ value 和 expression 要区分开）

如果有不足还望指正，谢谢