vue自定义指令

Posted 2022-07-15 xiaozhang666

Vue全局自定义指令

接下来用自动获取焦点这个小例子，来介绍一下全局自定义指令。

注意：Vue.directive(‘参数名称’,) 定义全局指令，它有两个参数

• 参数1：指令名称,注意在定义的时候，指令名称前不需要加 v- 前缀，但是在调用的时候，必须加v- 前缀。
• 参数2：参数2是一个对象，这个对象身上有一些指令相关的函数(也就是下边介绍的钩子函数)，这些函数可以在特定的阶段，执行相关操作。

<div id="app">
    <input type="text" v-focus>
</div>

<script>
    //这里就用到上边所说的钩子函数了，在这里不做详解，在下面的钩子函数以及传参做详解
    Vue.directive(‘focus‘,
        bind:function()//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
        
        ,
        inserted:function(el)// inserted 表示元素 插入到DOM中的时候，会执行此函数，触发一次
            el.focus(); //注意：在每一个函数中，第一个参数，永远是 el ，表示被绑定了指令的 那个元素 ，这个el参数，是一个原生JS的DOM对象
        ,
        updated:function()// 每当VNode 更新的时候，会执行 updated函数，可能会触发多次
        
        
    )

    var vm = new Vue(
        el:‘#app‘,
        data:,
        methods:
    )
</script>

Vue局部自定义指令

局部自定义指令，其实和全局自定义指令差不多，原理都是一样，接来下用给字体设置样式例子，来介绍局部自定义指令

注意：局部自定义指令 有两个条件【指令名称 和 指令对象】

<div id="app>
    <h5 v-color>我是局部自定义指令</h5>
</div>

<script>
    var vm = new Vue(
        el:‘#app‘,
        date:,
        methods:,
        directives:
            ‘color‘://给字体设置颜色
                bind:function(el) //这个function() 中还有第二个参数 binding ，这里不做介绍，在下边钩子函数参数中介绍
                    el.style.color="red";
                
            
        
    )
</script>

注：全局用的是 directive,局部用的是directives

 

• bind :只调用一次，每当指令绑定到元素上的时候，会立即执行这个 bind 函数。

  1. 在上边自动获取焦点的案例中，在元素 刚绑定指令的时候，还没有插入到 DOM 中去，这个时候调用 focus 方法没有作用，因为一个元素，只有插入DOM之后，才能获取焦点，所以这个函数不能获取焦点
  2. 样式设置；只要通过指令绑定给了元素，不管这个元素有没有插入到页面中，这个元素肯定有一个内联样式，将来元素肯定会渲染显示到页面中去，这个时候，浏览器的渲染引擎必然会解析样式，然后应用这个样式。

  注：一般和样式操作有关的，一般都可以在 bind 函数中执行

• inserted ： 表示元素 插入到DOM中的时候，会执行 inserted 函数，触发一次。(例如：自动获取焦点)
  注：和 JS 行为有关系的操作，最好在 inserted 中去执行，防止 JS 行为不生效。

• updated ： 当VNode 更新的时候，会执行 updated 函数，可能会触发多次

---

• componentUpdated ： 指令所在组件的VNode 及其子 VNode 全部更新后调用。
• upbind： 只调用一次，指令与元素解绑时调用。