Vue(Vue2+Vue3)——21.自定义指令

2023-06-20 101

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云解析 DNS，旗舰版 1个月

全局流量管理 GTM，标准版 1个月

云解析DNS，个人版 1个月

简介： Vue(Vue2+Vue3)——21.自定义指令

21 自定义指令

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

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

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

21.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>

21.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>