Vue-基础核心（一）

小沐沐吖

发布于 2022-09-09 16:27:28

1.1K0

发布于 2022-09-09 16:27:28

文章被收录于专栏：小沐沐吖小沐沐吖

00、简介

1、Vue是什么？

一套用于构建用户界面的渐进式JavaScript框架

作者：尤雨溪官网：Vue

2、发展历程

2013年-受到Angular框架的启发，尤雨溪开发出了一款轻量框架—Seed。同年12月，Seed更名为Vue，版本号0.6.0
2014年-Vue正式对外发布，版本号0.8.0
2015年-Taylor otwell在Twitter上发表动态，说自己正在学习Vue.js10月27日，正式发布Vue1.0.0 Evangelion(新世纪福音战士)
2016年-10月1日，正式发布Vue 2.0.0 Ghost in the Shell(攻壳机动队)
2020年-9月18日，正式发布Vue 3.0.0 One Piece(海贼王)

3、Vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

01、初识Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
root容器里的代码被称为【Vue模板】;
Vue实例和容器是一一对应的；
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>  
        <h1>我的年龄是：{{age}}</h1>
    </div>
    <script>
        // 关闭生产提示
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: 'vue',
                age: '18'
            }
        })
    </script>
</body>
</html>

02、模板语法

Vue模板语法有2大类

-   功能：用于解析标签体内容。
-   写法：{{xXx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

-   功能：用于解析标签（包括:标签属性、标签体内容、绑定事件.....）。
-   举例：`v-bind:href="xxx”`或简写为 `:href="xxx "`，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是:v-????，此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <!-- v-bind 单向绑定，简写 : -->
        <h3>{{name}}</h3>
        <a v-bind:href="school.url">{{school.name}}</a>
        <a :href="url">沐沐</a>
    </div>
    <script>
        // 关闭生产提示
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: 'vue',
                age: '18',
                url: 'http://localhost',
                school:{
                    name: '小沐沐吖',
                    age: '18',
                    url: 'http://localhost',
                }
            }
        })
    </script>
</body>
</html>

03、数据绑定

Vue中有2种数据绑定方式

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向daata

备注

双向绑定：一般都应用在表单元素上（如：input、select等）
v-model:value可以简写为v-model，因为v-model默认收集的就是value值

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <p>单向数据绑定：<input type="text" v-bind:value="name">{{name}}</p>
        <!-- v-model 数据是双向绑定的，改变所有msg -->
        <p>双向数据绑定：<input type="text" v-model:value="msg">{{msg}}</p>
        <!-- v-model只能运用在表单元素（输入类元素）上 -->
        <!-- 简写 -->
        <p>单向数据绑定：<input type="text" :value="name">{{name}}</p>
        <p>双向数据绑定：<input type="text" v-model="msg">{{msg}}</p>
    </div>
    <script>
        // 关闭生产提示
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: '尚硅谷',
                msg: '小沐沐吖',
            }
        })
    </script>
</body>
</html>

04、el与data的两种写法

el的2种写法

new Vue时候配置el属性
先创建Vue实例，随后在通过vm.$mount('#root')指定el的值

data的2种写法

对象式
函数式

如何选择：目前那种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错

一个重要的原则

有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        // el 的两种写法
        // const vm = new Vue({
        //     // 绑定容器
        //     // el: '#root', // 第一种写法
        //     // 存储数据
        //     data: {
        //         name: '尚硅谷',
        //     }
        // });
        // console.log(vm);
        // vm.$mount("#root"); // 绑定容器第二种写法
        // mount == 挂载

        // data的两种写法
        // 对象式写法
        // new Vue({
        //     el: '#root',
        //     data:{
        //         name: '尚硅谷'
        //     }
        // })
        
        // 函数式写法 -- 不能写成箭头函数
        new Vue({
            el: '#root',
            data(){
                console.log(this);// this 指Vue实例
                return{
                    name: '尚硅谷'
                }
            }
        })
    </script>
</body>
</html>

05、MVVM模型

MVVM模型

M：模型(Model)：data中的数据
V：视图(View)：模板代码
VM：视图模型(ViewModel)：Vue实例

观察发现

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性，及Vue原型上所有属性，在Vue模板中都可以直接使用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>MVVM模型</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <!-- view 视图 -->
    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <!-- <h1>测试一下1：{{1+1}}</h1>
        <h1>测试一下2：{{$options}}</h1>
        <h1>测试一下3：{{$emit}}</h1>
        <h1>测试一下4：{{_c}}</h1> -->
    </div>
    <script>
        Vue.config.productionTip = false; // ViewModel 视图模型
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据 === model 模型
            data: {
                name: '尚硅谷',
                address: '北京',
            }
        })
        console.log(vm);
    </script>
</body>
</html>

06、数据代理

1.回顾`Object.defineProperty`方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineproperty方法</title>
</head>
<body>
    <script>
        let number = 18;
        let person = {
            name: '张三',
            sex: '男',
            age: number,
        }
        // Object.defineProperty(person,'age',{
        //     value: 18,
        //     enumerable: true, // 可枚举，不可改变
        //     writable: true, // 值可以改变
        //     configurable: true, // 属性可删除
        // })

        Object.defineProperty(person,'age',{
            // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get() {
                console.log('有人读取age属性');
                return number;
            },
            // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age'+value);
                number = value;
            }
        })
        number = 20;
        console.log(person);
        // console.log(Object.keys(person));
    </script>
</body>
</html>

2.何为数据代理

通过一个对象代理对另一个对象中的属性的操作（读/写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.何为数据代理</title>
</head>
<body>
    <script>
        let obj = {x:100}
        let obj2 = {y:200}
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            set(value){
                obj.x = value
            }
        })
    </script>
</body>
</html>

3.数据代理

vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

vue中数据道理的好处

更加方便的擦做data中的数据

基本与原理

通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm身上的属性，都指定一个getter/setter
在getter/setter内部去擦做（读/写）data中对象的属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: '沐沐',
                address: '科技园'
            }
        })
    </script>
</body>
</html>

07、事件处理

1.事件处理

事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数！否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象
@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
        <button @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: '尚硅谷',
            },
            methods: {
                showInfo1(event){
                    alert('同学你好！');
                    // console.log(event.target.innerText);
                    // console.log(this); // this 是 vm
                },
                showInfo2(number,event){
                    alert('同学你好！！');
                    console.log(number);
                    console.log(event.target.innerText);
                }
            },
        })
    </script>
</body>
</html>

2.事件修饰符

Vue的时间修饰符

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: aqua;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>

        <!-- prevent：阻止默认事件（常用） -->
        <a href="https://mu00.cn" @click.prevent.stop="showInfo">点我提示信息</a>

        <!-- stop：阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once：事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>

        <!-- capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- self：只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- scroll 滚动条动触发,优先触发滚动  wheel 鼠标滚轮滚动触发 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: "尚硅谷"
            },
            methods: {
                showInfo(e){
                    // e.preventDefault();// 阻止默认跳转
                    // e.stopPropagation(); // 阻止事件冒泡
                    alert('同学你好');
                    console.log(e.target);
                },
                showMsg(msg){
                    console.log(msg);
                },
                demo(){
                    for (let i = 0; i < 10000; i++) {
                        console.log('#'); 
                    }
                    console.log("累坏了");
                },
            },
        })
    </script>
</body>
</html>

3.键盘事件

Vue中常用的按键别名

按键名	中文名	备注
回车	enter
删除	delete	(捕获“删除”和“退格”键)
退出	esc
空格	space
换行	tab	不适合keyup 只适合keydown
上	up
下	down
左	left
右	right

Vue为提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名) 关系修饰符（用法特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
配合keydown使用：正常出发事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: '尚硅谷'
            },
            methods: {
                showInfo(e){
                    // if (e.keyCode != 13) return
                    console.log(e.target.value);
                    console.log(e.key + "-" + e.keyCode);
                },
            },
        })
    </script>
</body>
</html>

08、计算属性

1.插值语法实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-插值语法实现</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名:<input type="text" v-model="lastName"></p>
        <p>全面名：<span>{{firstName.slice(0,3)}} - {{lastName}}</span></p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                firstName: '张',
                lastName: '三',
            }
        })
    </script>
</body>
</html>

2.methods实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-methods实现</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名:<input type="text" v-model="lastName"></p>
        <p>全面名：<span>{{fullName()}}</span></p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                firstName: '张',
                lastName: '三',
            },
            methods: {
                fullName(){
                    return this.firstName + '-' + this.lastName;
                }
            },
        })
    </script>
</body>
</html>

3.计算属性实现

定义：要用的属性不存在，要通过已有属性计算得来原理：底层借助了Object.defineproperty方法提供的getter和setter get函数什么时候执行

初次读取时会执行一次
当依赖的数据发生改变时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注

计算数学最终会出现在vm身上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时所依赖的数据发生变化

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>姓名案例-计算属性实现</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名:<input type="text" v-model="lastName"></p>
        <p>全面名：<span>{{fullName}}</span></p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                firstName: '张',
                lastName: '三',
            },
            computed: {
                fullName: {
                    // get()有什么作用，当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    // get什么时候调用，1.初次读取fullName时，2.所依赖的数据发生变化时
                    
                    get(){
                        return this.firstName + '-' + this.lastName;
                    },
                    // 当fullName被修改时调用
                    set(value){
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            },
        })
    </script>
</body>
</html>

4.计算属性实现-简写

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-计算属性实现-简写</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名:<input type="text" v-model="lastName"></p>
        <p>全面名：<span>{{fullName}}</span></p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                firstName: '张',
                lastName: '三',
            },
            computed: {
                fullName(){
                    return this.firstName + '-' + this.lastName;
                }
            },
        })
    </script>
</body>
</html>

09、监视（侦听）属性

1.天气案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <!-- <button @click="changeWeather">切换天气</button> -->
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                isHot: true
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                // changeWeather(){
                //     this.isHot = !this.isHot;
                // }
            },
        })
    </script>
</body>
</html>

2.监视属性

视属性watch

当监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才进行监视
监视的两种写法
- new Vue 时传入watch配置
- 通过vm.$watch监视

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天气案例-监视属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <!-- <button @click="changeWeather">切换天气</button> -->
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                isHot: true
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                // changeWeather(){
                //     this.isHot = !this.isHot;
                // }
            },
            watch:{
                isHot:{
                    immediate: true, // 初始化时让handle调用一下
                    // isHot发生1改变时调用
                    handler(newValue,oldValue){
                        console.log('旧'+oldValue);
                        console.log('新'+newValue);
                    }
                }
            }
        })
        vm.$watch('isHot',{
            immediate: true, // 初始化时让handle调用一下
            // isHot发生1改变时调用
            handler(newValue,oldValue){
                console.log('旧'+oldValue);
                console.log('新'+newValue);
            }
        })
    </script>
</body>
</html>

3.深度监视

Vue中的watch默认不检测对象内部值的改变（一层）配置deep: true 可以检测对象内部值改变（多层）

备注

Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时候根据数据的具体结构，决定是否采用深度监视

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天气案例-深度监视</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <hr>
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <hr>
        <h3>b的值是：{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                isHot: true,
                numbers:{
                    a:1,
                    b:1
                }
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
            },
            watch:{
                isHot:{
                    immediate: true, // 初始化时让handle调用一下
                    // isHot发生1改变时调用
                    handler(newValue,oldValue){
                        console.log('旧'+oldValue);
                        console.log('新'+newValue);
                    }
                },
                // 监视多级结构中某个属性
                'numbers.a':{
                    handler(newValue,oldValue){
                        console.log('旧'+oldValue);
                        console.log('新'+newValue);
                    }
                },
                // 监视多级结构中所有属性
                'numbers':{
                    deep: true,
                    handler(){
                        console.log('改变了');
                    }
                }
            }
        })
    </script>
</body>
</html>

4.天气案例-监视属性-简写

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例-监视属性-简写</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                isHot: true,
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            watch:{
                isHot(){
                    console.log('handler调用了');
                }
            }
        })
        vm.$watch('isHot',function(){
            console.log('handler调用了');
        })
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022 年 06 月，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

编程算法

登录后参与评论

0 条评论

热度

Vue-基础核心（一）

Vue-基础核心（一）

00、简介

1、Vue是什么？

2、发展历程

3、Vue的特点

01、初识Vue

02、模板语法

03、数据绑定

04、el与data的两种写法

05、MVVM模型

06、数据代理

1.回顾`Object.defineProperty`方法

2.何为数据代理

3.数据代理

07、事件处理

1.事件处理

2.事件修饰符

3.键盘事件

08、计算属性

1.插值语法实现

2.methods实现

3.计算属性实现

4.计算属性实现-简写

09、监视（侦听）属性

1.天气案例

2.监视属性

3.深度监视

4.天气案例-监视属性-简写

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Vue-基础核心（一）

Vue-基础核心（一）

00、简介

1、Vue是什么？

2、发展历程

3、Vue的特点

01、初识Vue

02、模板语法

03、数据绑定

04、el与data的两种写法

05、MVVM模型

06、数据代理

1.回顾Object.defineProperty方法

2.何为数据代理

3.数据代理

07、事件处理

1.事件处理

2.事件修饰符

3.键盘事件

08、计算属性

1.插值语法实现

2.methods实现

3.计算属性实现

4.计算属性实现-简写

09、监视（侦听）属性

1.天气案例

2.监视属性

3.深度监视

4.天气案例-监视属性-简写

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1.回顾`Object.defineProperty`方法