Vue指令及自定义指令

1.v-bind ---------- :

绑定data里的属性，v-bind:属性名="data变量" 简写如 :list-data="data变量"

2.v-on ---------- @

v-on:事件名称="表达式/方法"， 绑定事件: v-on, 简写@add="add (methods里的方法名)"

3. v-show

v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

4. v-if

通过控制DOM的增删进行显示隐藏元素

5. v-for

v-for 能遍历对象与数组 （建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化）

<li v-for="(item, index) in arr|obj " :key="index(id)"></li>
// key 作为diff算法的唯一标识符，能加快diff算法的效率

注意：v-if 和 v-for 避免在同一个元素中一起使用，因为v-for的优先级比v-if 的优先级高，所以导致每循环一次就会去v-if一次，小号的性能比较大。

解决方法：使用computed过滤掉列表中不需要显示的项目

6.v-model

v-model 数据双向绑定

基本原理，使用了 :value + @input

 

7. 不常用的指令

v-html 、v-text、v-pre、v-cloak

 

 8.自定义指令 v-demo、v-myshow

 <div id="app">
        <p v-demo.a="text"></p>
        <p v-myshow="bool">内容</p>
        <button @click="bool=!bool">切换bool</button>
 </div>

 <script>
        new Vue({
            el: "#app",
            data: {
                text: 1,
                bool: false
            },
            directives: {
                myshow: {
                    bind(el, binding) {
                        if (binding.value) {
                            // 显示
                            el.style.display = 'block';
                        } else {
                            // 隐藏
                            el.style.display = 'none';
                        }
                    },
                    update(el, binding) {
                        if (binding.value) {
                            // 显示
                            el.style.display = 'block';
                        } else {
                            // 隐藏
                            el.style.display = 'none';
                        }
                    },
                },
                demo: {
                    bind: function (el, binding) { 
                        console.log(el, binding)
                        if (binding.modifiers.a) {
                            el.innerHTML = '显示a内容'
                        } else if (binding.modifiers.b) {
                            el.innerHTML = '显示b内容'
                        } else if (binding.modifiers.c) {
                            el.innerHTML = '显示c内容'
                        }
                    },
                    inserted (el, binding) {
                        console.log('inserted')
                    },
                    update(el, binding) {
                        console.log('update')
                    }
                }
            }
        })
    </script>

函数：

• inserted ：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。

• binding：一个对象，包含以下属性：

  • name：指令名，不包括 v- 前缀。

  • value：指令的绑定值，例如：v-demo="1 + 1" 中，绑定值为 2。

  • oldValue：指令绑定的前一个值

  • expression：字符串形式的指令表达式。例如 v--demo="1 + 1" 中，表达式为 "1 + 1"。

  • modifiers：一个包含修饰符的对象。例如：v-demo.foo.bar 中，修饰符对象为 { foo: true, bar: true }。