Vue【四】vue自定义指令

文章目录

• Vue【四】vue自定义指令
• • @[TOC](文章目录)
• 前言
• 一、自定义指令——局部注册
• 二、自定义指令——全局注册
• 三、自定义指令——指令的值
• 总结

前言

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

注意，代码复用和抽象的主要形式是组件。

然而，有的情况下，仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

一、自定义指令——局部注册

例如需求: 当页面加载时，让元素将获得焦点 , (autofocus 在 safari 浏览器有兼容性)。

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

<script>
export default {
  directives: {
    // 自定义一个局部指令——focus
    //focus: {
    //  inserted (el) {
    //    el.focus()
    //  }
    //}
    //也可以简写下面格式
    focus(el){
    	 el.focus()
  	}
}
</script>

二、自定义指令——全局注册

在main.js中进行全局注册，如下：

Vue.directive('focus', {
  inserted (el) {
    el.focus()
  }
})

上述代码也可以简写为：

Vue.directive('focus', (el)=>{
	el.focus()
})

三、自定义指令——指令的值

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

需求: v-color=“color” 给对应的颜色, 就能改对应的字体颜色。
这里介绍自定义指令完整写法用到两种方法：

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

实现：

directives: {
  // 自定义一个局部指令
  color: {
    // 指令所在的元素渲染的时候，{value}用到了对象解构
    inserted (el, {value}) {
      el.style.color = value
    },
    // update指令的值改变时触发, binding.value指令的值修改触发
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}
==inserted里面的value写法也可以写成binding这种形式==

总结

本文主要讲了vue基础语法中的自定义指令，在vue的学习中很少封装自定义指令。