16.自定义指令

 <style>
    .demo {
        background-color: orange;
    }
</style>
<button id="btn">点我创建一个输入框</button>
<script>
    const btn = document.getElementById('btn')
    btn.onclick = () => {
        const input = document.createElement('input')

        input.className = 'demo'
        input.value = 100
        input.onclick = () => { alert(1) }


        document.body.appendChild(input)

        input.focus()
        input.parentElement.style.backgroundColor = 'skyblue'
        console.log(input.parentElement)
    }
</script>

 <div id="root">
    <h1>当前n的值为 <span v-text="n"></span> </h1>
    <!-- <h1>放大10倍后n的值为 <span v-big-number="n"></span> </h1> -->
    <h1>放大10倍后n的值为 <span v-big="n"></span> </h1>
    <button @click="n++">点我n+1</button>
    <input type="text" v-fbind:value="n">
</div>

<div id="root2">
    <button @click="x++">点我x+1</button>
    <input type="text" v-fbind:value="x">
</div>

<script>
    //定义全局指令
    // Vue.directive('big', function (element, binding) {
    //     console.log('big', this)//注意此处的this是window
    //     element.innerText = binding.value * 10

    // })
    Vue.directive('fbind', {
        //指令与元素成功绑定时（一上来）
        bind(element, binding) {
            console.log('bind')
            element.value = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
            console.log('inserted')
            element.focus()
        },
        //指令所在的模板被重新解析时
        update(element, binding) {
            console.log('update')
            element.value = binding.value
            element.focus()
        },
    })

    new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        directives: {
            //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
            // 'big-number'(element, binding) {
            //     console.log('big')
            //     element.innerText = binding.value * 10

            // },
            big(element, binding) {
                console.log('big', this)//注意此处的this是window
                element.innerText = binding.value * 10

            },
            // fbind: {
            //     //指令与元素成功绑定时（一上来）
            //     bind(element, binding) {
            //         console.log('bind')
            //         element.value = binding.value
            //     },
            //     //指令所在元素被插入页面时
            //     inserted(element, binding) {
            //         console.log('inserted')
            //         element.focus()
            //     },
            //     //指令所在的模板被重新解析时
            //     update(element, binding) {
            //         console.log('update')
            //         element.value = binding.value
            //         element.focus()
            //     },
            // }

        }
    })


    new Vue({
        el: '#root2',
        data: {
            x: 9
        }
    })
</script>