自定义命令（directive）-CFANZ编程社区

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 
            1.定义一个v-big指令，和v-text功能类似，但会吧绑定数值放大10倍
            2.定义一个v-fbing指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
            定义语法：
            1.局部指令
            new Vue({                                          new Vue({
                   directives:{指令名:配置对象}                        directives{指令名：回调函数}
                    })                                             })
            2.全局指令
            Vue.directive(指令名:配置对象)                        Vue.directive(指令名,回调函数)
            二。配置对象中常用三个回调
            bind：指令与元素成功绑定时
            inserted：指令所在元素被插入页面时
            update：指令所在模板被重新解析
            三。备注
            注意：v-content命名问题：如果有多个单次名称的时候，
            v-content-Number(需要用这种方法进行写入)   vue中：'content-number' 用引号括起来   注意：不能大写
            --> 
            <!-- 1 -->
            <h2>当前值: <span v-text="n"></span> </h2>
            <h3>请输入内容:<span v-content-number="n"></span></h3>
            <!-- <h3>请输入内容:<span v-content="n"></span></h3> -->
            <button @click="n++">点击后值相加</button>
            <hr>
            <!-- 2 -->
            <input type="text" v-fbind:value="n">
        </div>
        <script>
            Vue.config.productionTip=false
            //全局使用（find）
            Vue.directive('fbind',{
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()//首次获取焦点
                },
                //指令所在模板被重新解析
                update(element,binding){
                    element.value = binding.value
                    element.focus()//一直获取焦点 
                }
            })
            //全局使用（v-content）
            Vue.directive('content-number',function(element,binding){
                console.log(element,binding,this)//this指向window
                element.innerText = binding.value * 10
            })
            new Vue({
                el:'#root',
                data:{
                    n:1
                },
                //只能在局部中使用，如果需要在全局使用
                directives:{
                    //content函数何时被调用：1.指令与元素成功绑定时，2、指令所在模板被重新解析
                    
                    //写法1
                    // content(element,binding){
                    //     console.log(element,binding)
                    //     element.innerText = binding.value * 10
                    // },
                    
                    //或者这样写
                    // 'content-number'(element,binding){
                    //      console.log(element,binding,this)//this指向window
                    //     element.innerText = binding.value * 10
                    // },
                    
                    //局部
                    // fbind:{
                    //     //指令与元素成功绑定时
                    //     bind(element,binding){
                    //         element.value = binding.value
                    //     },
                    //     //指令所在元素被插入页面时
                    //     inserted(element,binding){
                    //         element.focus()//首次获取焦点
                    //     },
                    //     //指令所在模板被重新解析
                    //     update(element,binding){
                    //         element.value = binding.value
                    //         element.focus()//一直获取焦点 
                    //     }
                    // }
                }
            })
        </script>
    </body>
</html>