Vue2 自定义指令 浅说

一、指令

1.什么是指令

        指令的定义：Vue提供的 带有v-前缀 的 特殊特性。

2.指令的职责

        当表达式的值发生变化时，将其产生的连带影响 响应式的作用于 DOM。

3.常用的指令（vue的内置指令）

        v-if、v-for等

二、自定义指令

1.什么是自定义指令

        与内置指令比较：

        如 v-show 实质上是对DOM中的display元素操作（是否显示）

        而自定义指令

        如 v-xxx （xxx 这一名称是我们自定义的） 对DOM上的某个元素进行操作（操作的元素，如何操作 都是我们自己定义的）

        自定义指令实质上就是自定义对DOM的操作 进行封装

2.如何自定义指令

        自定义指令写法：

        1.函数式

        2.对象式

1.自定义-函数式：写成一个函数function。

弊端：不能处理一些细节性的问题

优势：易于编写

例：定义一个v-big指令，类似与v-text，将绑定的数值放大十倍

<template>
  <div class="home">
    <div>
<!--   函数式：   定义一个v-big指令，类似与v-text，将绑定的数值放大十倍-->
      <h2>当前n的值为：<span v-text="n"></span></h2>
      <h2>放大10倍n的值为：<span v-big="n"></span></h2>
      <button @click="n++">点我n+1</button>

    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      n: 1,
    }
  },
  directives: {
    big(element, binding) {
      // console.log(element, binding)
      element.innerText = binding.value * 10;
    },
  },
}

big指令何时被调用？

1. 指令和元素被成功绑定时（一上来）
2. 指令所在的模板重新解析时

 big(element,binding)

element (本次绑定的元素) 

binding:(本次绑定的信息)

expression: 表达式 n

name: big

value: n的值

2.自定义-对象式：写成一个对象{}。

弊端：没有函数式易于编写，代码量较多，步骤更多；

优势：可以处理一些细节性的问题

例：定义一个v-fbind函数，和v-bind方法类似，让所绑定的input元素 默认获取焦点

<template>
  <div class="home">
    <div>
      <h2>当前n的值为：<span v-text="n"></span></h2>
      <h2>放大10倍n的值为：<span v-big="n"></span></h2>
      <button @click="n++">点我n+1</button>

<!--      对象式 定义一个v-fbind函数，和v-bind方法类似，让所绑定的input元素 默认获取焦点-->
       <hr/>
       <input v-fbind:value="n" type="text"/>

    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      n: 1,
    }
  },
  directives: {
     bind(element, binding) {
        element.value = binding.value;
      },

     fbind:{
       //指令和元素被成功绑定时
       bind(element, binding){
         element.value = binding.value;
         console.log('bind')
    
       },
       //指令所在元素被插入页面时
       inserted(element, binding){
         element.focus();
         console.log('inserted')
       },
       //指令所在的模板重新解析时
       update(element, binding){
        element.value = binding.value;
         console.log('update')
      },
     },
  },
}
</script>

自定义指令何时被调用？

1.指令和元素被成功绑定时 这时还只是在内存中绑定了，页面未渲染

2.指令所在的模板重新解析时 如n的值变化一次就会重新解析一次

常用的三个回调：

 

3.需要注意的点

1.如果定义的指令不止一个单词如 v- + 'big number'

应写为 v-big-number

在directives里面应写成

 

2.directives里面的叫局部指令 是定义在组件内部的，只能在当前组件中使用

全局指令