【Vue】自定义指令

一、介绍

• 内置指令：v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令，可以直接使用

• 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

  每个指令都有自己各自独立的功能

二、自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

例如：

需求：当页面加载时，让元素获取焦点（autofocus在safari浏览器有兼容性）

解决方案 使用操作dom的方式：dom元素.focus()，此时就没有兼容性了

App.vue

<div>
 <h1>自定义指令</h1>
 <input v-focus ref="inp" type="text">
</div>

mounted () {
 this.$ref.inp.focus()
}

但由于如果跳到第二个页面，但是又需要同样的需求，这一整段代码又得写一遍，就很麻烦

此时就可以把这一段跟 dom 相关的内容封装到指令中

三、自定义指令语法

inserted：被绑定元素插入父节点时调用的钩子函数

el：使用指令的那个DOM元素

• 全局注册

  //在main.js中
  Vue.directive('指令名', {
    // inserted 就是指令的生命周期钩子，它表示的是当前指令所绑定的元素被添加到页面里去的时候会自动调用
    // el 就可以拿到指令所绑定的元素
    "inserted" (el) {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  })
  

• 局部注册：只能在当前组件内使用

  // 在Vue组件的配置项中
  directives: {
    指令名: {
      inserted (el) {
        // 可以对 el 标签，扩展额外功能
        el.focus()
      }
    }
  }
  

• 使用指令

  注意：在使用指令的时候，一定要先注册，再使用，否则会报错
  使用指令语法： v-指令名。如：

  <input type="text" v-focus/>  
  

  注册指令时不用加v-前缀，但使用时一定要加v-前缀

四、代码示例

需求：当页面加载时，让元素获取焦点

main.js

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

Vue.config.productionTip = false

// 全局注册指令
Vue.directive('focus', {
  inserted (el) {
    el.focus()
  }
})

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

App.vue

<template>
  <div>
    <h1>自定义指令</h1>
    <input v-focus type="text" ref="inp">
  </div>
</template>

<script>
export default {
  // mounted () {
  //   this.$refs.inp.focus()
  // }
    
  // 2. 局部注册指令
  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

<style>

</style>

五、自定义指令-指令的值

需求 实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

语法

1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数

directives: {
  color: {
    // inserted 就是指令的生命周期钩子，它表示的是当前指令所绑定的元素被添加到页面里去的时候会自动调用
    inserted (el, binding) {
      el.style.color = binding.value
    },
    // update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

六、指令的值代码示例

Vue是响应式的，数据变化的时候，视图也是需要更新的。

但是自定义指令是不会把数据自动更新到视图中，相关的逻辑需要我们自己提供

App.vue

<template>
  <div>
    <h1 v-color="color1">指令的值1测试</h1>
    <h1 v-color="color2">指令的值2测试</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color1: 'red',
      color2: 'orange'
    }
  },
  directives: {
    color: {
      // 1. inserted 提供的是元素被添加到页面中时的逻辑
      inserted (el, binding) {
        // console.log(el, binding.value);
        // binding.value 就是指令的值
        el.style.color = binding.value
      },
      // 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
      update (el, binding) {
        console.log('指令的值修改了');
        el.style.color = binding.value
      }
    }
  }
}
</script>

<style>

</style>