From aa0208683381b3439e6cf3f0ceedbba141054623 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Thu, 5 Jan 2023 18:11:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=8C=87=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 16_自定义指令/demo.html            | 30 +++++++++++++++
 16_自定义指令/自定义指令.html | 50 +++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 16_自定义指令/demo.html
 create mode 100644 16_自定义指令/自定义指令.html
diff --git a/16_自定义指令/demo.html b/16_自定义指令/demo.html
new file mode 100644
index 0000000..0eab213
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/16_自定义指令/自定义指令.html b/16_自定义指令/自定义指令.html
new file mode 100644
index 0000000..8ec263a
--- /dev/null
+++ 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>
\ No newline at end of file
