源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>自定义指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h2>{{name}}</h2>
            <h2>当前的n值是：<span v-text="n"></span> </h2>

            <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>

            <button @click="n++">点我n+1</button>

        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                n:1
            },

            //自定义指令的配置项为 directives :
            directives:{
                //big函数何时会被调用？
                //  1.指令与元素成功绑定时（一上来）。
                //  2.指令 所在的模板 被重新解析 时。
                //定义指令 big 
                //原则： 不靠返回值
                //参数:
                //  element: 真实DOM元素(调用 v-big指令的元素本身)
                //  bingding: 绑定的是一个对象，我们关心的是对象中的 value属性值(本例也就是 v-big这个指令用到的属性值n)
                big(element,binding){
                    //证明 element 是真实DOM元素: true
                    console.log(element instanceof HTMLElement) //应该是 true

                    console.log('big',this) //注意此处的this是window

                    // console.log('big')
                    //修改元素里面的内容:
                    element.innerText = binding.value * 10
                },
            }
        })

    </script>
</html>
045_自定义指令_函数式

源码
