Vue 自定义指令

简介: Vue 自定义指令

什么是自定义指令

自定义指令是用于操作 DOM 的。虽然 Vue 推崇数据驱动视图的理念,但是并非所有的情况都适合数据驱动,必要的情况下我们还是需要操作 DOM 元素才能实现某些功能的。

指令定义时不加 v- ,但使用时要加 v- 。另外指令中的 this 指向 window 。

指令名如果是多个单词,要使用 aaa-bbb 命名方式,不要用 aaaBbb 命名。

函数式定义指令:

:我们自定义一个 v-big 指令,用于让当前的值放大10倍

<div id="APP">
  <p>当前的num值是:<span v-text="num"></span></p>
  <p>放大10倍的num值是:<span v-big="num"></span></p>
  <button @click="num++">点击num+1</button>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  },
  directives:{
    big(element,binding){
      console.log(element); // 当前操作的真实DOM
      console.log(binding); // 绑定指令的对象
      element.innerText = binding.value * 10;
    }
  }
});

:自定义指令不需要加 v- 前缀,Vue 会自动添加。自定义指令有两个参数,第一个是当前绑定的真实 DOM 元素,第二个是绑定数据的指令对象。

:当点击按钮时,绑定指令的标签也会重新渲染,这是因为指令在两种情况下会被调用。1. 指令与标签绑定成功时(初始化时执行),2. 指令所在的模板被重新解析时执行。

对象式定义指令:

例如:我们定义一个 v-fbind 指令,用于绑定 input 框的值,并且自动获取焦点。

<div id="APP">
  <input type="text" v-fbind="num"> <br/><br/>
  <button @click="num++">点击num+1</button>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  },
  directives:{
    fbind(element,binding){
      element.value = binding.value;
      element.focus();
    }
  }
});

:以上功能用函数式定义指令实现不了。这是因为标签在跟指令绑定时,页面并未加载这个标签,所以初始 input 框获取不到焦点。

像这种情况,可以使用对象式定义指令,功能更加完善。

<div id="APP">
  <input type="text" v-fbind="num"> <br/><br/>
  <button @click="num++">点击num+1</button>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  },
  directives:{
    fbind:{
      // 指令与标签绑定成功时(初始化时执行)
      bind(element,binding){
        console.log('最先执行bind');
        element.value = binding.value;
      },
      // 指令所在的标签被插入页面时执行
      inserted(element,binding){
        console.log('接着执行inserted');
        element.focus();
      },
      // 指令所在的模板被重新解析时执行
      update(element,binding){
        console.log('更新时执行update');
        element.value = binding.value;
      }
    }
  }
});

:对象式定义指令时有三个函数,在指令与标签绑定成功时会执行 bind 函数,在标签被插入页面时会执行 inserted 函数。

:在模板被重新解析时会执行 update 函数。其实函数式定义的指令就是 bind 函数和 update 函数的简写。

自定义指令命名问题:

<div id="APP">
  <p>当前的num值是:<span v-text="num"></span></p>
  <p>放大10倍的num值是:<span v-big-number="num"></span></p>
  <button @click="num++">点击num+1</button>
</div>

:Vue 中自定义指令的名称官方不推荐使用驼峰命名法,推荐使用 v-big-number 多短横线拼接,在定义时推荐用引号包裹 'big-number' 。

const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  },
  directives:{
    'big-number'(element,binding){
      element.innerText = binding.value * 10;
    }
  }
});

自定义指令的 this 指向问题:

<div id="APP">
  <p>当前的num值是:<span v-text="num"></span></p>
  <p>放大10倍的num值是:<span v-big="num"></span></p>
  <button @click="num++">点击num+1</button>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  },
  directives:{
    big(element,binding){
      console.log('big', this);
      element.innerText = binding.value * 10;
    }
  }
});

:不管是函数式还是对象式定义的指令,它们的 this 都指向 window,因为这样更方便我们操作 DOM 元素。

自定义全局指令:

函数式:

<div id="APP">
  <p>当前的num值是:<span v-text="num"></span></p>
  <p>放大10倍的num值是:<span v-big="num"></span></p>
  <button @click="num++">点击num+1</button>
</div>
Vue.directive('big',function(element,binding){
  element.innerText = binding.value * 10;
})
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  }
});

对象式:

<div id="APP">
  <input type="text" v-fbind="num"> <br/><br/>
  <button @click="num++">点击num+1</button>
</div>
Vue.directive('fbind',{
  bind(element,binding){
    element.value = binding.value;
  },
  inserted(element,binding){
    element.focus();
  },
  update(element,binding){
    element.value = binding.value;
  }
})
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  }
});

原创作者:吴小糖

创作时间:2023.3.9

相关文章
|
2天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
15 0
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
12 2
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
8 3
|
2天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
12 2
|
2天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
9 2
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
10 2
|
2天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0
|
2天前
|
JavaScript 前端开发
vue filters过滤器传多个参数
这段内容展示了如何在HTML和JavaScript中使用过滤器(filter)。在HTML中,通过`{{变量 | 过滤器名(参数)}}`的方式传递参数给过滤器。在JavaScript中,定义过滤器函数并接收参数,如`filterAa(aa, bb, cc)`,其中`aa`, `bb`, `cc`分别代表过滤器接收到的第1至第3个参数。示例逐步演示了传1个、2个到3个参数给过滤器的过程。
9 1
|
3天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定
|
3天前
|
JavaScript
vue的插槽(slot)
vue的插槽(slot)