lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .size {
            width: 400px;
            height: 400px;
            margin: 200px auto;
            border: 1px solid darksalmon;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="['size']">
            姓:
            <input type="text" v-model="firstName">
            <br>
            名:
            <input type="text" v-model="lastName">
            <br>
            <!-- 1.插值语法 -->
            我叫: {{firstName + lastName}}
            <br>
            <!-- 2.methods方法 -->
            我叫:{{getName()}}
            <br>
            <!-- 3.计算属性：computed -->
             我叫：{{fullName}}
             <br>
             新名字:{{myName}}
             <br>
            <!-- 4.侦听器 -->
            我叫：{{fulls}}
        </div>
    </div>
    <!-- 
        原理：通过数据劫持(Object.defineproperty) 通过getter(get)和setter(set)实现获取数据 修改数据操作
        methods 与 computed 大致相同
        但是：大量的计算数据 需要在计算属性中进行操作 
        计算数据写在computed里 性能较快 同步操作
        watch 异步操作
    -->
    <script src="./vue.js"></script>
    <script>
        // 
        var app = new Vue({
            el:"#app",
            data:{
                firstName:"胡",
                lastName:"图图",
                news:"喜",
                old:"羊羊",
                fulls:""
            },
            methods: {
                getName() {
                   return this.firstName + this.lastName
                }
            },
            // 计算属性
            computed:{
                fullName() {
                    return this.firstName + this.lastName;
                },
                // myName() {
                //     // get() {},
                //     // set() {}
                // }
                myName: {
                    get() {
                       return this.news + this.old;
                    },
                    set() {
                        this.news = '灰';
                        this.old = '太郎'
                    }
                }
            },
            watch:{
                // firstName(newValue,oldValue) {
                //     this.fulls = newValue + this.lastName
                // },
                // lastName(newValue, oldValue) {
                //     this.fulls =this.firstName + newValue;
                // },
                // 补充知识点：
                // myName:{
                //     immediate: true,
                //     deep: true,
                //     handler(a) {
                //         // 方法
                //         console.log(a,'aaaa')
                //         return this.fulls = a;
                //     }
                // },
               firstName:{
                // 开启立即监听
                immediate: true,
                // 开启深度监听
                deep: true,
                handler(e) {
                    // 方法
                    console.log(e,'aaaa')
                    return this.fulls = e + this.lastName;
                }
               },
               lastName:{
                immediate: true,
                deep: true,
                handler(e) {
                    // 方法
                    console.log(e,'aaaa')
                    return this.fulls = this.firstName + e;
                }
               }
            }
        })
        // app.myName = ''
    </script>
</body>
</html>