Vue指令

指令

形式：元素的属性
自定义指令允许你对DOM元素进行底层操作(其实Vue作为一个框架是面向数据的，它更支持你面向数据编程)
内置指令和自定义指令，通过自己定义指令可以了解指令的实质

常见的内置指令

  1. v-show| v-if|v-else-if (区别：前者：CSS:display-none控制加入了DOM Tree， 后者是没有加入DOM Tree)

v-show-display:none.png

2. v-for: 遍历列表，对象，整数（从1开始） (是否设置key值，动态双向绑定)
3. v-cloak结合 display:none; 防止抖动
4. v-bind: 动态绑定 缩写 ：
5. v-model: 一些表单元素的双向绑定
6. v-html （XSS警告）
7. v-text
8. v-once
9.** v-on 事件处理（敲黑板！划重点）** 缩写 @
10. v-pre

自定义指令使用方式：先注册后使用

  1. 符合注册指令：全局，局部(只可以在绑定的视图中使用)
// 全局注册
Vue.directive(id,[definition])

// 局部注册 v-focus
new Vue({
    el:"#app",
    directives: {
        focus: {

        }
    }
})
  1. 使用指令：与Vue提供的内置指令使用方式一样。
<div v-mydirective></div>
// v-mydirective为自己定义的指令

自定义指令的钩子函数

  1. bind 只调用一次，指令第一次绑定到元素时调用。适合做一些一次性的初始化操作
  2. inserted 被绑定元素插入父节点的时候调用。
  3. update 所在组件的vnode更新时调用，
  4. componentUpdated 指令所在组件的VNode及其子VNode全部更新后调用
  5. unbind 只调用一次，指令与该元素解绑时调用。
<div id="app">
        <input type="text" v-focus>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 注册全局的自定义属性
        Vue.directive('focus', {
            inserted: function(el) {
                // 聚焦元素
                el.focus();
            }
        });
        const app = new Vue({
            el: "#app",

        });
    </script>

钩子函数中的参数

  1. el: 指令所绑定的元素，可以用来直接操作DOM
  2. binding: 一个对象，含有一下属性:
    • name 指令名字（除去v-前缀的,v-focus中 name为focus）
    • value 指令绑定的值，v-focus="1+2" value = 2
    • oldValue 前一个值 仅仅在 update和componentUpdated钩子中可以用。
    • expression 字符串形式的指令表达式， v-focus="1+2" expression="1+1"
    • arg 指令传递的参数 v-my:foo 其中arg为foo
    • modifiers 修饰符
    • vnode Vue编译后生成的虚拟节点
    • odlVnode上一个虚拟节点 仅仅在update和componentUpdated钩子中使用
<body>
    <div id="app" v-demo:foo.a.b="message">
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 定义全局的指令
        Vue.directive('demo', {
            bind: function(el, binding, vnode) {
                var s = JSON.stringify;
                el.innerHTML =
                    '1. name: ' + s(binding.name) + '<br />' +
                    '2. value: ' + s(binding.value) + '<br />' +
                    '3. expression: ' + s(binding.expression) + '<br />' +
                    '4. argument: ' + s(binding.arg) + '<br />' +
                    '5. modifiers: ' + s(binding.modifiers) + '<br />' +
                    '6. vnode keys: ' + Object.keys(vnode).join(', ') + '<br />';
            }

            // Object.keys() 获取对象的全部属性
        });
        const app = new Vue({
            el: "#app",
            data: {
                message: "Vue.js很牛逼！"
            },
            methods: {

            }
        })
    </script>
</body>

函数简写

如果bind和update的行为相同，且该自定义指令只需要使用这两个函数，可以简写。

    <div id="app">
        <p v-color-swatch="color">我就是很帅！</p>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 这里的function代替了bind和update钩子函数
        Vue.directive('color-swatch', function(el, binding) {
            console.log(el, binding);
            el.style.backgroundColor = binding.value;
        });
        const app = new Vue({
            el: "#app",
            data: {
                color: "red"
            }
        })
    </script>

给指令传入对象字面量

传给指令的值可以使任何合法的JavaScript表达式
传入对象字面量


<div id="app">
        <div v-demo="{color:'white',text:'hello!'}"></div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.directive('demo', function(el, binding) {
            const {
                color,
                text
            } = binding.value;
            console.log(color);
            console.log(text);
        })
        const app = new Vue({
            el: "#app"
        })
    </script>

自定义指令的实战：模拟天猫导航

https://github.com/suckitfa/dropdown-menu.git

参考

- 《Vue.js从入门到实战》
- Vue官方文档
posted @ 2021-05-11 23:09  HelloCoderRookie  阅读(417)  评论(0)  编辑  收藏  举报