自定义组件

  <div id="app">
        <h2 >{{name}}</h2>
        <h2>当前的值是{{n}}</h2>
        <h2>放大十倍后的值是：<span v-big="n"></span> </h2>
        <button @click="n++">点击加1</button>
        <input type="text" v-fbind.value="n">
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue
        const app = new Vue({
            el:'#app',
            data(){
                return{
                    name:'凌祥龙',
                    n:1
                }
            },

            // 指令里面的this都是window
            directives:{
                // big函数什么时候会被调用？1 指令与元素绑定时一上来就会调用 2指令所在的模板被重新解析时。
                // 第一个是指令所在的元素，第二个是绑定的值
                big(elment,binding){
                    elment.innerText = binding.value*10
                },
                fbind:{
                    // 指令与元素绑定时（一上来）
                    bind(elment,binding){
                        elment.value = binding.value
                    },
                    // 指令所在元素插入页面时
                    inserted(elment,binding){
                        //focus是获取焦点
                        elment.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(elment,binding){
                        elment.value = binding.value
                    }
                }
            }
        })
    </script>