Vue从甜小白到皮大佬系列(四) 自定义指令

阅读时间预估:3分钟

啥是指令?

Vue从甜小白到皮大佬系列(二) v-指令

指令的钩子函数参数

啥是自定义指令?

在前端开发领域，之前的通用框架是jQuery，jQuery以及基于jQuery构建的通用组件造成了一个庞大的生产系统。如今的通用框架是Angular、React和Vue，每一个框架都须要基于自身构建新的组件库,自定义指令好就好在：原先的那些通用组件，不管是纯js的也好，基于jQuery的也好，均可以拿来主义直接吸取，而不须要改造或重构,自定义指令能够很方便的将大量重复的事情经过一个简短的指令来实现.

• 做用：进行DOM操做
• 使用场景：对纯 DOM 元素进行底层操做，好比：文本框得到焦点
• 两种指令：1 全局指令 2 局部指令

自定义全局指令

• 做用:定义一个指令能够全局通用
• 关键code: Vue.directive()
• 建议:最好是单首创建一个文件而后引入到main.js文件中单独管理

// 第一个参数：指令名称
// 第二个参数：配置对象，指定指令的钩子函数
Vue.directive('directiveName', {
    // bind中只能对元素自身进行DOM操做，而没法对父级元素操做
    // 只调用一次 指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。
  bind( el，binding, vnode ) {
      // 参数详解
      // el：指令所绑定的元素，能够用来直接操做 DOM 。
      // binding：一个对象，包含如下属性：
      // name：指令名，不包括 v- 前缀。
      // value：指令的绑定值，等号后面的值 。
      // oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。不管值是否改变均可用。
      // expression：字符串形式的指令表达式 等号后面的字符串 形式
      // arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
      // modifiers：指令修饰符。例如：v-directive.foo.bar中，修饰符对象为 { foo: true, bar: true }。
      // vnode：Vue 编译生成的虚拟节点。。
      // oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  },
  
  // inserted这个钩子函数调用的时候，当前元素已经插入页面中了，也就是说能够获取到父级节点了
  inserted (  el，binding, vnode ) {},
  //  DOM从新渲染前
  update(el，binding, vnode,oldVnode) {},
  // DOM从新渲染后
  componentUpdated ( el，binding, vnode,oldVnode ) {},
  // 只调用一次，指令与元素解绑时调用
  unbind ( el ) {
    // 指令所在的元素在页面中消失，触发
  }
})
// 简写 若是你想在 bind 和 update 时触发相同行为，而不关心其它的钩子:
Vue.directive('自定义指令名', function( el, binding ) {})
// 例：
Vue.directive('color', function(el, binding) {
  el.style.color = binging.value
})
// 使用 注意直接些会被i成data中的数据“red” 须要字符串则嵌套引号"'red'"
<p v-color="'red'"></p>
复制代码

※建议用以下方法来组织全局组件

• 1.首先建立一个directive.js文件而后编写全局的自定义组件.例如我想定义一个直接修改Dom颜色和文字大小的自定义组件

export default (Vue) => {
    Vue.directive('dColor', {
        inserted: function (el, binding) {
            el.style.color = binding.value;
        }
    });
    Vue.directive('dFont', {
        inserted: function (el, binding) {
            el.style.fontSize = binding.value + "px";
        }
    });
}
复制代码

• 2.在main.js文件中引入directive.js文件,并使用Vue.use(directive)调用她

import Vue from 'vue';
import App from './App.vue';
import directive from './directive';

Vue.config.productionTip = false;

Vue.use(directive); //全局使用directive文件

new Vue({
    render: h => h(App),
}).$mount('#app')

复制代码

• 3.在你想使用的地方直接调用你定义好的组件名,必定要加v-哦!

<template>
    <div class="hello">
        <p v-dColor="'red'"> 我是全局定义的组件修改颜色值</p>
        <p v-dFont="'50'"> 我是全局定义的组件能够修改大小</p>
    </div>
</template>
复制代码

自定义局部指令

• 做用:定义一个指令,只能局部组件使用
• 使用场景:组件中常常重用的某些操做Dom的方法,仅在在这一个组件中使用
• 关键code钩子: directives: 写一个局部指令,定义一个input自动焦点的指令

<script>
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    directives: {
        // 自定义组件的名字
        autoFocus: {
            // 钩子函数，被绑定元素插入父节点时调用 (父节点存在便可调用，没必要存在于 document 中)。
            inserted (el) {
                el.focus();
                console.log('inserted');
            },
            // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数能够定义一个在绑定时执行一次的初始化动做。
            bind () {
                console.log('bind');
            },
            // 所在组件的 VNode 更新时调用，可是可能发生在其孩子的 VNode 更新以前。
            // 指令的值可能发生了改变也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新 
            updata () {
                console.log('updata');
            },
            // 所在组件的 VNode 及其孩子的 VNode 所有更新时调用。
            componentUpdated () {
                console.log('componentUpdated');
            },
            // 只调用一次，指令与元素解绑时调用。
            unbind () {
                console.log('unbind');
            }
        }
    }
}
</script>
复制代码

4.在须要使用的地方调用v-autoFocus直接使用

<template>
    <div class="hello">
        <p v-dColor="'red'"> 我是全局定义的组件修改颜色值</p>
        <p v-dFont="'50'"> 我是全局定义的组件能够修改大小</p>
        <input type="text"
               placeholder="请输入文字"
               v-autoFocus>
    </div>
</template>
复制代码

看完这篇不知道面前的这位大侠是否真正学会了自定义指令,本身动手写一个全局的指令以及局部指令,全局指令必定要单独放一个文件夹中管理哦😆加油,前端甜小白....

若是个人分享对面前的这位大侠有所启发,不要吝啬以程序员最高礼遇点赞✨ 评论加分享的方式鼓励我.

关注公众号回复:学习 领取前端最新最全学习资料,也能够进群和大佬一块儿学习交流.

猛戳 个人前端进阶Blog