vue之自定义指令

1、自定义指令的作用

　　除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

参考文档：https://cn.vuejs.org/v2/guide/custom-directive.html

2、注册自定义指令

（1）注册全局自定义指令

  Vue.directive("指令名称", {

      inserted: function (el, binding) {

        // el 代表使用了此指令的那个 DOM 元素

        // binding 可获取使用了此指令的绑定值 等

        //逻辑代码

      }

    }

  );

（2）注册局部指令

directives:{

      "指令名称":{

        inserted:function (el,binging) {

          //逻辑代码

        }

      }

    }

注意：

注册时，指令名称前不要带 v-，因为内部处理会自动加上v-。
指令名称中间不要有大写字母，开头可以出现大写字母

（3）使用自定义指令

引用指令时，指令名前面加上 v-
直接在元素上在使用即可：v-指令名='表达式'

3、案例演示

　　当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

（1）全局指令实现

<div id="app">

    自动获取焦点：<input type="text" v-auto-focus>

</div>

<script>

    //全局指令

  Vue.directive("auto-focus", {

      inserted: function (el, binding) {

        // el 代表使用了此指令的那个 DOM 元素

        // binding 可获取使用了此指令的绑定值 等

        el.focus()

      }

    }

  );

（2）局部指令实现

<div id="app">

    自动获取焦点：<input type="text" v-focus>

</div>

<script>

  new Vue({

    el: "#app",

    data: {},

    //只在当前Vue实例中生效

    directives:{

      "focus":{

        inserted:function (el,binging) {

          //逻辑代码

          el.focus()

        }

      }

    }

  })

</script>

4、钩子函数

在上面使用了钩子函数inserted，实际上还有其它常用的钩子函数：

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

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

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

常用钩子函数的参数：

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

binding：一个对象，包含以下属性：
　　name：指令名，不包括 v- 前缀。
　　value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

实例：

<div id="app">

    <p v-get-values="msg"></p> //data中声明

</div>

<script>

  Vue.directive("get-values", {

    //样式不需要元素插入到DOM中，类似于link中的css引入一样

      bind: function (el) {

        el.style.color = "green"

      },

    inserted: function (el, binding) {

      // el 代表使用了此指令的 DOM 元素

      // binding 获取使用了此指令的绑定值

      el.innerHTML = binding.value

    }

  });

巴特西

vue之自定义指令

最新文章

热门文章