Vue学习:自定义指令1

定义v-big指令和v-text功能类似 但是会把绑定的数值放大10倍-使用函数的方法进行指令的编写directives

实际上指令的使用，就是对封装好的对DOM的操作

所以我们自定义的指令，需要亲自对DOM进行操作

: Failed to resolve directive: big——指令解析失败

使用属性：directives自定义指令的编写，主要依靠传入参数数据进行操作 element

        directives:{
            //定义的指令
            big(a,b){ //拿到数据 放大10倍
                //验证a是否是真实DOM
                console.dir(a)//检查是否是真实DOM 具有真实DOM的属性和方法
                console.log(a instanceof HTMLElement)//true

               
            }
        }

console.log(b) value 表示对象中的n的值重点是第二个参数的value值 binding

<div id='root'>
        <h2>当前n值:<span v-text="n"></span></h2>
        <h2>放大10倍:<span v-big="n"></span></h2>
        <button @click="n++">点击n+1</button>
    </div>

</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: 4,
        },
        directives: {
            //定义的指令 就是操作DOM元素
            /*
            big函数何时会被调用
            1、指令与元素成功绑定（建立关系 binding）（（出问题的情况：要么元素不存在要吗指令不存在） 
            2、指令所在的模板（id=root）被重新解析时候 其他的也会改变
            */
            big(element, binding) { //拿到数据 放大10倍 
                console.log('执行了')
                //验证a是否是真实DOM
                //console.dir(a)//检查是否是真实DOM 具有真实DOM的属性和方法
                //console.log(a instanceof HTMLElement)//true
                //b是对象 value 表示对象中的n的值
                //console.log(b)

                element.innerText = binding.value * 10


            }
        }

    });

big函数何时会被调用

1、指令与元素成功绑定（建立关系 binding）（（出问题的情况：要么元素不存在要吗指令不存在）

2、指令所在的模板（id=root）被重新解析时候 其他的也会改变