自定义指令

<!--

一、定义语法：

(1).局部指令：

new Vue({ new Vue({

directives:{指令名：配置对象} 或 directives{指令名：回调函数}

}) )}

(2).全局指令：

Vue.directive(指令名，配置对象) 或 Vue.directive(指令名：回调函数)

二、配置对象中常用的3个回调：

(1).bind:指令与元素成功绑定时调用。

(2).inserted:指令所在元素被插入页面时调用。

(3).update:指令所在模板结构被重新解析式调用

三、备注：

1.指令定义式不加v-，但使用时要加v-；

2.指令时如果时多个单词，要使用kebab-case命名方式，不要用camelCase命名

-->

<body>
    <!--  所有指令相关的函数肯定不是vm -->
    <!-- 
        vuemoan语法有两大类:
            1.插值语法:
                功能:用于解析标签体内容
                写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
            2.指令语法:
                功能:用于解析标签(包括:标签属性.标签体内容.绑定属性)
                举例:v-bind:href = "xxx" 或 简写为 href= "xxx",xxx同样要写js表达式
                且可以直接读取到data中的所有属性
            备注:Vue中有很多的指令,且形式都是:v-???? ,此处我们只是拿v-bind举个例子
            
            
     -->

    <!-- 需求1: 定义一个v-big指令,和v-text功能类似,但会把绑定的数值方法10倍 -->
    <!-- 需求2: 定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点 -->
    <div id="root">
        <div>插值语法</div>
        <h3>n值:{{n}}</h3>
        <!-- <h3 v-big='n'>n值:{{n}}</h3> -->
        <h3 v-big-number='n'>n值:{{n}}</h3>
        <button @click="n++">点击+1</button>
        <hr>
        <h1>指令语法</h1>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
    <div id="out">
        <input type="text" v-fbind:value='x'>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    // 全局自定义指令
    Vue.directive("fbind", {
        // 指令与元素成功绑定时(一上来)
        bind(element, binding) {

            element.value = binding.value;
            console.log(element.value, binding.value)
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) {
            element.focus()

        },
        // 指令所在的模板被重新解析调用
        update(element, binding) {
            element.value = binding.value
        }
    })
    new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        // 所有指令相关的函数肯定不是vm
        // directives里面都是局部指令
        directives: {
            // big函数何时会被调用?
            // 1.指令(v-fbind)与元素(input)成功绑定时(仅代表在内存建立连接不代表放入页面了)
            // 2.指令所在的模板被重新解析时

            // big(element, binding) {      // 简写形式
            'big-number'(element, binding) {
                // console.log('big', this)   // 此时this指向window
                // console.log(element,binding)
                element.innerHTML = binding.value * 10;
            },
            /*
                 fbind: {
                    // 不可以写错,写错vue就找不见了
                    // 指令与元素成功绑定时(一上来)
                    bind(element, binding) {
  
                        element.value = binding.value;
                        console.log(element.value, binding.value)
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus()
  
                    },
                    // 指令所在的模板被重新解析调用
                    update(element, binding) {
                        element.value = binding.value
                    }
                }
                 */
        },
    })
    new Vue({
        el: "#out",
        data: {
            x: 1,
        }
    })
</script>

</html>

posted @ 2022-10-09 23:27 小忱阅读(83) 评论(0) 收藏举报

刷新页面返回顶部

overspread

自定义指令

公告