lovecoding
/
web0331


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!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">
        <p>
            姓: <input type="text" v-model="firstName">
        </p>
        <p>
            名: <input type="text" v-model="lastName">
        </p>
        <!-- 1.插值模版 -->
        <p>我的名字是：{{firstName + lastName}}</p>
        <!-- 2.方法 -->
        <p>我的名字是：{{getName()}}</p>
        <!-- 3.计算属性
                methods和computed在初始使用时候 没有区别
                但是 当页面设计数据量大的计算时候 计算属性可以减少性能消耗
                同步操作 
                Object.defineProperty()； getter 获取数据 ; setter 修改数据
        -->
        <p>我的名字是：{{fullName}}</p>
        <p>我的名字是：{{myName}}</p>
        <!-- 4.侦听器 -->
         <p>我的名字是：{{full}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            data:{
                firstName:"胡",
                lastName:"图图",
                full: ""
            },
            methods:{
                getName() {
                    console.log("12121")
                    return this.firstName + this.lastName;
                }
            },
            created() {},
            // 计算属性
            computed:{
                fullName() {
                    console.log("计算属性")
                    return this.firstName + this.lastName
                },
                myName:{
                    get() {
                        console.log("获取")
                        return this.firstName + this.lastName

                    },
                    set(val) {
                        console.log(val,'修改')
                    }
                }
            },
            watch:{
                // firstName(news,old) {
                //     console.log(news,'news')
                //     console.log(old,'old')
                //     this.full = news + this.lastName;
                // },
                firstName: {
                    handler(news,old) {
                        this.full = news + this.lastName;
                    },
                    immediate: true, //立即监听
                    deep: true // 深度监听
                },
                lastName(news,old) {
                    console.log(news,'1')
                    console.log(old,'2')
                    this.full = this.firstName + news;
                },

            }
        })
        vm.$mount("#app");
        vm.myName = '懒羊羊'
    </script>
</body>
</html>