Vue 自定义指令

作者：我搬去水星了

2023-06-09
北京
本文字数：2258 字
阅读完需：约 7 分钟

自定义指令

vue 里面不仅仅有内置的指令，也可以根据自己的需求构建自定义指令

它其实就是操作 DOM 元素的属性以及内容

通过 directives 属性配置自定义指令，有函数式和对象式两种写法，下面分别去写下

1 函数式

通过案例去实现自定义函数式指令

需求：定义一个 v-big 指令，和 v-text 功能类似，但是会把绑定的数值放大十倍

控制台报错，说解析指令失败

接下来就要定义指令了，需要一个全新的配置项:directives,它的值也是一个对象，和 computed,watch 是类似的写法

函数式写法如下，有两个参数参数 1 是绑定元素，参数 2 是绑定对象

元素和绑定对象内容如下

接下来就可以使用 dom 操作改变元素了

查看页面，功能实现

那么这个函数什么时候会被调用呢？

有两个时机会被调用：1：指令与元素成功绑定时(初始化)，会被调用 2：指令所在的模板被重新解析的时候

代码如下

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script></head><body>    <div id="root">        <h2>当前n的值是：<span v-text="n"></span></h2>        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>        <button @click="n++">点我n+1</button>    </div></body> 
<script type="text/javascript">     const vm=  new Vue({        el:'#root',        data:{            n:1,        },         // 自定义指令        directives:{           // 函数式  有两个参数 参数1是绑定元素，参数2是绑定对象             // 有两个时机会被调用：1：指令与元素成功绑定时(初始化)，会被调用 2：指令所在的模板被重新解析的时候            big(element,binging){                element.innerText=binging.value*10            }        }
            })
   </script>
</html>

复制代码

2 对象式

对象式写起来比函数式复杂，但是功能比函数式更强大

它有三个不同的函数，在不同的时刻去被调用

bind：指令与元素成功绑定时(一上来)调用

inserted：指令所在元素被插入页面的时候调用

update：指令所在的模板被重新解析时调用

通过案例去实现自定义对象式指令

需求：定义一个 v-fbind 指令，和 v-bind 功能类似，但是可以让其绑定的 input 默认获取焦点

一上来肯定找不到指令，因为既不是内置的，也没有自定义

使用对象式编写代码

一上就来获取焦点

并且会随着 n 的值变化而变化

代码如下

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script></head><body>    <div id="root">        <h2>当前n的值是：<span v-text="n"></span></h2>        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>        <button @click="n++">点我n+1</button>        <hr/>        <input type="text" v-fbind:value="n" >    </div></body> 
<script type="text/javascript">     const vm=  new Vue({        el:'#root',        data:{            n:1,        },         // 自定义指令        directives:{           // 函数式  有两个参数 参数1是绑定元素，参数2是绑定对象              // 有两个时机会被调用：1：指令与元素成功绑定时(初始化)，会被调用 2：指令所在的模板被重新解析的时候            big(element,binging){                element.innerText=binging.value*10            },            // 对象式            fbind:{                // 指令与元素成功绑定时(一上来)                bind(element,binging){                    element.value=binging.value                },                // 指令所在元素被插入页面的时候调用                inserted(element,binging){                    // 获取焦点                    element.focus()                },                // 指令所在的模板被重新解析时                update(element,binging){                    element.value=binging.value                },            }        }
            })
   </script>
</html>