自定义指令

自定义指令

1、定义语法：
(1).局部指令：
　　new Vue({ 　　　　　　　　　　　　　　　　new Vue({
　　　　directives:{指令名:配置对象} 　　或 　　　　　directives{指令名:回调函数}
　　}) 　　　　　　　　　　　　　　　　　　　　})
<html>
    <head>
        <meta charset="UTF-8" />
        <title>自定义指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
        </div>
    </body>
    
    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            directives:{
                big(element,binding){
                    console.log('big',this) //注意此处的this是window
                    // console.log('big')
                    element.innerText = binding.value * 10
                },
            }
        })        
    </script>
</html>

 

(2).全局指令：
　　Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
        //定义全局指令
         Vue.directive('fbind',{
            //指令与元素成功绑定时（一上来）
            bind(element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        })

　　　　　　<input type="text" v-fbind:value="n">
 

 


2、配置对象中常用的3个回调：
　　(1).bind：指令与元素成功绑定时调用。
　　(2).inserted：指令所在元素被插入页面时调用。
　　(3).update：指令所在模板结构被重新解析时调用。

3、备注：
　　(1).指令定义时不加v-，但使用时要加v-；
　　(2).指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
posted @ 2022-04-22 10:48  杨建鑫  阅读(40)  评论(0)  编辑  收藏  举报