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的特点

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

01、初识Vue

  1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
  2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
  3. root容器里的代码被称为【Vue模板】;
  4. Vue实例和容器是一一对应的;
  5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用;
  6. {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
  7. 一旦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大类
  1. 插值语法

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

    -   功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
    -   举例:`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种数据绑定方式
  1. 单向绑定(v-bind):数据只能从data流向页面
  2. 双向绑定(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.事件处理

事件的基本使用
  1. 使用v-on:xxx @xxx 绑定事件 其中xxx是事件名
  2. 事件的回调需要配置在methods对象中,最终会在vm上
  3. methods中配置的函数,不要用箭头函数!否则this就不是vm
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象
  5. @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(短横线命名)

关系修饰符(用法特殊):ctrlaltshiftmeta

  1. 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才触发
  2. 配合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 月 30 日
如果觉得我的文章对你有用,请随意赞赏