lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!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">
        姓：<input v-model="firstName" type="text">
        名：<input v-model="lastName" type="text">
        <br><br>
        <!-- 1. 插值模板-->
        我的姓名是：{{firstName + lastName}}
        <br>
        <!-- 2.方法 -->
        我的姓名是：{{getName()}}
        <br>
        <!-- 3.计算属性 -->
        我的姓名是：{{myName}}{{full}}
        <button @click="changeMain">修改</button>
        <!-- 4.侦听器 / 监听器 -->
        <br>
        我的姓名是：{{fullName}}
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            data:{
                firstName:"孙",
                lastName:"悟空",
                part1: "娃",
                part2: "哈哈",
                fullName:"哈哈哈"
            },
            methods: {
                getName() {
                    return this.firstName + this.lastName
                },
                changeMain() {
                    this.myName = ''
                }
            },
            /**
             * 计算属性 computed
             * 原理：通过Object.defineProperty()中getter和setter 获取数据 修改数据
             * methods 和 computed 初始化使用时没有什么区别
             * 当数据发生改变 会执行代码进行处理 减少性能消耗 
             * 同步操作
             * 有缓存
            */
           computed:{
                myName:{
                    get() {
                        return this.part1 + this.part2
                    },
                    set() {
                        this.part1 = '百'
                        this.part2 = '岁山'
                    }
                },
                full() {
                    return this.aaa = '111';
                }
           },
           /**
            * watch 侦听器 监听器
            * immediate 立即监听
            * deep 深度监听
            * handle(newValue,oldValue) {执行语句}
            * 异步操作
            * 没有缓存
           */
           watch:{
            firstName(newValue,oldValue) {
                // console.log(newValue,oldValue)
                this.fullName = newValue + this.lastName
            },
            lastName(newValue,oldValue) {
                // console.log(newValue,oldValue)
                this.fullName = this.firstName + newValue
            },
            fullName:{
                immediate: true,
                deep: true,
                handler(newValue,oldValue) {
                    console.log(newValue,'new')
                    console.log(oldValue,'oldValue')
                    // if(newValue) {
                    //     alert(newValue)
                    // } else {
                    //     alert("请输入姓名")
                    // }
                }
            }
           }
        }).$mount("#app");
    </script>
</body>
</html>