学习自定义指令

2 years ago · aa02086833
parent cd1c55d56e
commit aa02086833
2 changed files with 80 additions and 0 deletions
--- a/16_自定义指令/demo.html
+++ b/16_自定义指令/demo.html
@ -0,0 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>focus</title>
    <style>
        .demo {
            background-color: orange;
        }
    </style>
 </head>
 <body>
 <button id="btn">显示输入框</button>
 <script type="text/javascript">
    const btn = document.getElementById("btn")
    btn.onclick = () => {
        const input = document.createElement('input')
        input.className = 'demo'
        input.value = 99
        input.onclick = ()=>alert(1)
        document.body.appendChild(input)
        input.parentElement.style.backgroundColor = "skyblue"
        input.focus()
    }
 </script>
 </body>
 </html>
--- a/16_自定义指令/自定义指令.html
+++ b/16_自定义指令/自定义指令.html
@ -0,0 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍的n值是：<span v-big="n"></span></h2>
    <button @click="n++">n+1</button>
    <hr/>
    <input type="text" v-fbind:value="n" >
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建Vue实例
    const x = new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        directives: {
            // big函数何时会被调用？1.指令与元素成功绑定时；2.指令所在模板被重新解析时
            big(element, binding) {
                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>