Vue2入门之超详细教程十八-自定义指令

Vue2入门之超详细教程十四-自定义指令

1、简介

  • 定义语法
    • 分为局部自定义指令和全局自定义指令
  • 配置对象中常用的3个回调
    • bind：指令与蒜素被插入成功时调用
    • inserted：指令所在元素被插入页面时被调用
    • update：指令所在模板结构被重新解析时调用
  • 备注：
    • 指令定义时不加v-，但使用时要加v-
    • 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。

2、自定义指令

1. 局部自定义指令

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

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

需求1实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/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">
    new Vue({
        el:'#root',
        data(){
            return {
                n:1,
            }
        }
    })
</script>
</html>

image-20240107155344516

该错误是因为我们用了一个不存在的指令v-big，v-big是原生Vue中不存在的质量，我们需要给它定义一个

directives:{
    big(element,binding){
        console.log(element,binding)
    }
}

image-20240107161620308

自定义指令接收两个参数，第一个是真实dom第二个是虚拟dom

directives:{
    big(element,binding){
        element.innerText = binding.value * 10
    }
}

image-20240107161821194

需求2实现

<input type="text" v-fbind:value="n">

directives:{
    fbind(element,binding){
        element.value = binding.value
        element.focus()
    }
}

image-20240107163141324

这样写有一个问题，即当页面刚渲染时，input输入框并不会获取焦点，只有当点击按钮后才会获取焦点

这是因为我们调用element.focus()时，input输入框还没有形成

fbind:{
    //指令与元素成功绑定时（一上来）
    bind(element,binding){
        element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element,binding){ 
        element.focus()
    },
    // 指令所在模板被重新解析时
    update(element,binding){
        element.value = binding.value
        element.focus()
    }
}

2. 全局自定义指令


Vue.directive('fbind',{
    //指令与元素成功绑定时（一上来）
    bind(element,binding){
        element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element,binding){ 
        element.focus()
    },
    // 指令所在模板被重新解析时
    update(element,binding){
        element.value = binding.value
        element.focus()
    }
})
Vue.directive('big',{
    big(element,binding){
        element.innerText = binding.value * 10
        console.log(element,binding)
    }
})

3、完整代码

1. 局部自定义指令完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/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>
        <br>
        <input type="text" v-fbind:value="n">
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data(){
            return {
                n:1,
            }
        },
        directives:{
            big(element,binding){
                element.innerText = binding.value * 10
                console.log(element,binding)
            },
            fbind:{
                //指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value = binding.value
                },
                // 指令所在元素被插入页面时
                inserted(element,binding){ 
                    element.focus()
                },
                // 指令所在模板被重新解析时
                update(element,binding){
                    element.value = binding.value
                    element.focus()
                }
                
            }
        }
    })
</script>
</html>

2. 全局自定义指令完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/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>
        <br>
        <input type="text" v-fbind:value="n">
    </div>
</body>
<script type="text/javascript">
    Vue.directive('fbind',{
        //指令与元素成功绑定时（一上来）
        bind(element,binding){
            element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted(element,binding){ 
            element.focus()
        },
        // 指令所在模板被重新解析时
        update(element,binding){
            element.value = binding.value
            element.focus()
        }
    })
    Vue.directive('big',{
        big(element,binding){
            element.innerText = binding.value * 10
            console.log(element,binding)
        }
    })
    new Vue({
        el:'#root',
        data(){
            return {
                n:1,
            }
        }
    })
</script>
</html>
posted @   李荣洋  阅读(847)  评论(0)  编辑  收藏  举报
相关博文：
· Vue2入门之超详细教程十七-常用内置命令集合
· Vue2入门之超详细教程二-hello Vue
· Vue 自定义指令
· Vue 自定义指令
· Vue.js 自定义指令 函数式&对象式
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛