完成侦测的学习，开始研究箭头函数

2 years ago · 25e2b297a5
parent b76595a739
commit 25e2b297a5
3 changed files with 60 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+/.fleet/settings.json
--- a/09_监视属性/5.姓名案例_watch实现.html
+++ b/09_监视属性/5.姓名案例_watch实现.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>4.姓名案例_计算属性简写</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    姓：<input type="text" v-model="firstName"> <br>
+    名：<input type="text" v-model="lastName"> <br>
+    姓名： <span>{{fullName}}</span>
+</div>
+
+<script type="text/javascript">
+    const vm = new Vue({
+        el: '#root',
+        data: {
+            firstName: "张",
+            lastName: "三",
+            fullName: "张-三"
+        },
+        watch: {
+            firstName(newValue){
+                setTimeout(()=>{
+                    this.fullName = newValue + '-' + this.lastName
+                }, 1000)
+
+            },
+            lastName(newValue){
+                this.fullName = this.firstName + '-' + newValue
+            }
+        }
+
+    })
+    console.log(vm)
+</script>
+</body>
+</html>
--- a/箭头函数/普通函数.html
+++ b/箭头函数/普通函数.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>箭头函数-普通函数</title>
+</head>
+<body>
+
+<p id="demo"></p>
+
+<script>
+  let hello;
+  hello = function () {
+    return "Hello World!";
+  }
+  document.getElementById("demo").innerHTML = hello();
+</script>
+
+</body>
+</html>