自定义指令

作者：从前慢现在也慢 | 2024-03-20 08:52:20

踩

自定义指令

自定义指令的作用
除了内置指令外，Vue 也允许注册自定义指令。有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候
使用自定义指令更为方便。
自定义指令文档： https://cn.vuejs.org/v2/guide/custom-directive.html
注册与使用自定义指令方式

注册全局指令:

// 指令名不要带 v-
 Vue.directive('指令名', { 
 	// el 代表使用了此指令的那个 DOM 元素 
 	// binding 可获取使用了此指令的绑定值 等 
 	inserted: function (el, binding) {
 		 // 逻辑代码
 	 }
})
1
2
3
4
5
6
7
8

注册局部指令

 directives : {
 	 '指令名' : { // 指令名不要带 v- 
 	 	inserted (el, binding) {
 	 		 // 逻辑代码 
 	 	}
 	 }
 }
1
2
3
4
5
6
7

注意：注册时，指令名不要带 v-
3. 使用指令：
引用指令时，指令名前面加上 v-
直接在元素上在使用即可： v-指令名='表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-upper-text="message">xxxxx</p>
        自动获取焦点：<input type="text" v-focus>
    </div>
    <div id="app2">
        <p v-upper-text="msg">xxxxx</p>
        
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 注册全局自定义指令，可以在多个Vue管理的入口下使用该指令
        // 第一个参数为指令名，但是不要有v-开头
        Vue.directive('upper-text',{
            //一般对样式 的操作在bind中，bind函数只调用一次
            bind: function (el) {
                el.style.color = 'red'
            },
            //一般对js操作在inserted中，inserted也是只调用一次
            // el是当前指令作用的那个Dom元素，
            // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
            inserted: function (el, binding) {
                // 将所有字母文本内容转换为大写
                el.innerHTML = binding.value.toUpperCase()
            }
        })

        new Vue({
            el: '#app',
            data: {
                message: 'mengxuegu, 陪你学习伴你梦想'
            },
            //注册局部自定义指令：只能在当前Vue实例管理的入口 下引用这个指令
            directives: {
                'focus': { // 指令名，
                    bind: function () {

                    },
                    // 刷新页面自动获取焦点
                    inserted: function (el, binding) {
                        //被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点
                        el.focus()
                    }
                }
            }
        })

        new Vue({
            el: '#app2',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/272135