lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-text v-html v-model -->
      <div>
        姓:<input type="text" v-model="firstName" />
        <br />
        名:<input type="text" v-model="lastName" />
        <br />
        <!-- 1.插值模板 -->
        我的名字是:{{firstName + lastName}}
        <br />
        <!-- 2.methods -->
        我的名字是:{{getName()}}
        <br>
        <!-- 3.计算属性 -->
        计算属性:{{myName}}
        <br>
        计算属性:{{fullName}}
        <br>
        <!-- 4.侦听器 -->
        侦听器：{{full}}
      </div>
    </div>
    <script src="./vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        // 数据
        data: {
          firstName: "张",
          lastName: "三",
          newName: "李",
          oldName: "四",
          full:"",
          aaa:""
        },
        // 生命周期
        created() {},
        // 方法
        methods: {
          getName() {
            return this.firstName + this.lastName;
          },
        },
        // 计算属性 computed
        /**
         * 原理：通过数据劫(object.defineProperty)，获取数据，通过getter和setter去修改获得数据
         * methods 和 computed在初始使用时 并没有区别
         * 但时当页面涉及数据计算量大时 计算属性可以减少性能消耗
         * 同步操作
         */
        computed: {
            myName:{
                get() {
                    return this.newName + this.oldName
                },
                // 点击事件后补充
                set() {
                    this.newName = "天气";
                    this.oldName = "真好";
                }
            },
            fullName() {
                return this.aaa = "周三"
            }
        },
        /**
         * watch 侦查器 监听器
         * 异步操作
        */
        watch:{
            // 初次进入页面不执行 只有数据发生变化后才会进行操作
            firstName(newValue,oldValue) {
                this.full = newValue + this.lastName;
            },
            lastName(newValue,oldValue) {
                console.log(newValue,'1')
                console.log(oldValue,'2')
                this.full = this.firstName + newValue;
            },
            // 补充知识点
            // newName:{
            //     immediate:true, 立即开始
            //     deep: true, 深度监听
            //     handler(){
                        // 方法....
            //     }
            // }
        }
      });
      app.myName = '';
   </script>
  </body>
</html>