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

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>