学习自定义指令

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>