lovecoding
/
VIP26


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!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">
        <div>
            <p>
                姓：<input type="text" v-model="newName">
            </p>
            <p>
                名：<input type="text" v-model="liName">
            </p>

            <p @click="getName()">姓名是: {{myName}}</p>
        </div>
        <p>名字是:{{firstName + lastName}}</p>
        <p>我们的名字是:{{ getFullName() }}</p>
        <p>{{full}}</p>
        <!-- 
            计算属性
         -->
         <h1 style="color: red;">我们的名字是:{{fullName}}</h1>
         <p>
            1.最好大量的去使用计算属性 计算属性有缓存 同步操作 处理计算量不大的数据
         </p>
         <p>
            2.像数据进行更新(衍生数据),最好使用计算属性
         </p>
         <p>
            3.如果计算量大 消耗性能 异步操作 使用侦听器(watch)
         </p>
         <p>
            4.watch 不进行缓存 计算量大的操作 异步操作
         </p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                firstName: '卢勃玮',
                lastName: '张振博',
                full: '马琛',
                newName: '马',
                liName: '琛',
                
            },
            computed:{
                fullName() {
                    console.log("获取get的值")
                    // 抛出数据 return 返回值；
                   return this.firstName + this.lastName + this.full;
                },
                myName:{
                    // 走的是getter 实际get方法
                    get(){
                        console.log(this.newName,'获取1');
                        console.log(this.liName,'获取2');
                        return this.newName + '-' + this.liName;
                    },
                    set(value) {
                        console.log(value,'获取set值');
                        const arr = value.split('-');
                        this.newName = arr[1];
                        this.liName = arr[0];
                        console.log("set设置")
                    }
                }
            },
            watch:{
                // 初次进入页面 并不监听 发生更改才会开启监听
                newName(newValue,oldValue) {
                    this.full = newValue + this.liName; 
                },
                liName(newValue,oldValue) {
                    this.full = this.newName + newValue;
                },
                // 如果我们想 初始化页面进行监听 
                // 补充知识点
                // newValue: {
                //     // 开启监听 ， 深度监听
                //     immediate:true,
                //     deep: true,
                //     handler() {
                //     }
                // }
            },
            // 自定义的方法
            methods: {
                getFullName() {
                    // this => Vue实例
                   return this.firstName + this.lastName + this.full;
                },
                getName() {
                    console.log(this.newName);
                    console.log(this.liName);
                }
            },
        })
    </script>
</body>
</html>