• 【数据代理+事件处理+计算属性与监视+绑定样式+条件渲染】

    数据代理+事件处理+计算属性与监视+绑定样式+条件渲染

    1 数据代理

    1.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 = 30
        let person = {
            name:'张三',
            sex:'男'
        }
        // 给person添加age属性
        Object.defineProperty(person,'age',{
            // 可传递四个基本配置项
            /* value: 18,
            enumerable:true, // 控制属性是否可以枚举，默认值是false
            writable:true, // 控制属性是否可以被修改，默认值是false
            configurable:true, // 控制属性是否可以被删除，默认值是false */

            // 传递高级配置
            // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            // get:function(){
            get(){
                console.log('有人读取了age属性');
                return number
            },

            // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性，且值是',value);
                number = value
            }
        })

        // console.log(Object.keys(person));

        // console.log(person);
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    在这里插入图片描述

    1.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>何为数据代理title>
head>
<body>
    
    <script>
        let obj = { x: 100 }
        let obj2 = { y: 200 }

        // 想通过obj2读取或修改x
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            set(value){
                obj.x = value
            }
        })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述

    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>Vue中的数据代理title>
    
    <script src="../JS/vue.js">script>
head>
<body>
	

    
    <div id="root">
        <h2>学校名称：{{name}}h2>
        <h2>学校地址：{{address}}h2>
    div>
body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el: '#root',
        data: {
            name:'西财',
            address:'西安市长安区'
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2 事件处理

    2.1 绑定监听

    在这里插入图片描述

    • 默认事件形参：event
    • 隐含属性对象：$event
    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>事件的基本使用title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        <h2>欢迎来到{{name}}的博客h2>
        
        
        <button @click="showInfo1">点我提示信息1(不传参)button>

        <button @click="showInfo2($event,66)">点我提示信息2(传参)button>
    div>
body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            name:'小王'
        },
        methods:{
            showInfo1(event) {
                // console.log(event.target.innerText); // 点我提示信息1
                // console.log(this); // 此处的this是vm
                alert('同学你好！')
            },
            // showInfo2(event) {
            showInfo2(event,number) {
                // console.log(event.target.innerText); // 点我提示信息1
                // console.log(this); // 此处的this是vm
                // alert('同学你好！！')
                console.log(event,number);
            }
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    在这里插入图片描述

    2.2 事件修饰符

    • prevent：阻止默认事件（常用）
    • stop：阻止事件冒泡（常用）
    • once：事件只触发一次（常用）
    • capture：使用事件的捕获模式
    • self：只有event.target是当前操作的元素时才触发事件
    • passive：事件的默认行为立即执行，无需等待事件回调执行完毕
    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>事件修饰符title>
    
    <script src="../JS/vue.js">script>
    <style>
        *{
			margin-top: 13px;
		}
        .demo1{
			height: 50px;
			background-color: skyblue;
		}

        .box1{
			padding: 5px;
			background-color: pink;
		}
		.box2{
			padding: 5px;
			background-color: orange;
		}

        .list{
			width: 200px;
			height: 200px;
			background-color: peru;
			overflow: auto; /* 形成滚动条 */
		}
		li{
			height: 100px;
		}
    style>
head>
<body>
    

    
    <div id="root">
        <h2>欢迎来到{{name}}的博客h2>

        
        <a href="https://blog.csdn.net/weixin_64875217?type=blog" @click.prevent="showInfo">点我提示信息a> 

        
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息button> 

            
            
        div>

        
        <button @click.once="showInfo">点我提示信息button>

        
        <div class="box1" @click.capture="showMsg(1)"> 
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            div>
        div>

        
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息button> 
        div>

        
        
        
        <ul @wheel.passive="demo" class="list">
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
        ul>

    div>
body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            name:'小王',
        },
        methods: {
            showInfo(e) {
                // e.preventDefault() // 阻止默认行为：阻止跳转链接 (方式一)
                // e.stopPropagation() // 阻止事件冒泡：阻止弹出两次弹窗(方式一)
                alert('同学你好！')
                // console.log(e.target);
            },
            showMsg(msg) {
                console.log(msg);
            },
            demo() {
                // console.log('@');
                for (let i = 0; i < 100000; i++) {
                    console.log('#');
                }
                console.log('累坏了');
            }
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121

    在这里插入图片描述

    2.3 键盘事件

    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>键盘事件title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        <h2>欢迎来到{{name}}的博客h2>
        
        
        
        
        
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y = "showInfo"> // 只有按ctrl+y时才会输出
        
    div>
body>
<script>
    Vue.config.productionTip = false

    Vue.config.keyCodes.huiche = 13 // 相当于定义了一个别名按键

    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>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66

    3 计算属性与监视

    3.1 计算属性

    • 姓名案例_插值语法实现：
    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>姓名案例_插值语法实现title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    
    <div id="root">
        
        姓：<input type="text" v-model="firstName"><br/><br/>
        
        名：<input type="text" v-model="lastName"><br/><br/>
        {firstName + '-' + lastName}} -->
        全名：<span>{{firstName.slice(0,3)}}-{{lastName}}span>
    div>
body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    在这里插入图片描述

    • 姓名案例_methods实现：
    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>姓名案例_methods实现title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    
    <div id="root">
        
        姓：<input type="text" v-model="firstName"><br/><br/>
        
        名：<input type="text" v-model="lastName"><br/><br/>
        {firstName + '-' + lastName}} -->
        全名：<span>{{fullName()}}span>
    div>
body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        methods:{
            fullName(){
                return this.firstName + '-' + this.lastName
            }
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    在这里插入图片描述

    • 姓名案例_计算属性实现：
    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>姓名案例_计算属性实现title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        
        姓：<input type="text" v-model="firstName"><br/><br/>
        
        名：<input type="text" v-model="lastName"><br/><br/>
        {firstName + '-' + lastName}} -->
        全名：<span>{{fullName}}span>
    div>
body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                // 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                // get什么时候调用：1.初次读取fullName时 2.所依赖的数据发生变化时
                get(){
                    console.log('get被调用了');
                    // console.log(this); // 此处的this是vm
                    return this.firstName + '-' + this.lastName
                },
                // set什么时候调用：当fullName被修改时
                set(value){
                    console.log('set',value);
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 姓名案例_计算属性简写实现(确定只读不改，就用简写)：
    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>姓名案例_计算属性简写实现title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    
    <div id="root">
        
        姓：<input type="text" v-model="firstName"><br/><br/>
        
        名：<input type="text" v-model="lastName"><br/><br/>
        {firstName + '-' + lastName}} -->
        全名：<span>{{fullName}}span> {fullName()}} -->
    div>
body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            // 此时function及后面函数可看作get()
            /* fullName:function() {
                console.log('get被调用了');
                return this.firstName + '-' + this.lastName
            } */
            
            // 再精简：
            fullName() {
                console.log('get被调用了');
                return this.firstName + '-' + this.lastName
            }
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    3.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>天气案例title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    
    <div id="root">
        <h2>今天天气很{{info}}h2>
        
        
        <button @click = 'isHot = !isHot'>切换天气button>
    div>
body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        /* methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        } */
        // 简化后：
        methods:{
            
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    在这里插入图片描述
    在这里插入图片描述

    • 天气案例_监视属性：
    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>天气案例_监视属性title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        <h2>今天天气很{{info}}h2>
        <button @click = 'changeWeather'>切换天气button>
    div>
body>
<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
            isHot:{
                immediate:true, // immediate默认值为false,初始化时让handler调用一下
                // handler()函数 什么时候调用：当isHot发生改变时就调用
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }
            }
        } */

    })

    // 监视写法二：
    vm.$watch('isHot',{
        immediate:true, // immediate默认值为false,初始化时让handler调用一下
        // handler()函数 什么时候调用：当isHot发生改变时就调用
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue);
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    在这里插入图片描述

    • 天气案例_深度监视：
    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>天气案例_深度监视title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        <h2>今天天气很{{info}}h2>
        <button @click = 'changeWeather'>切换天气button>
        <hr/>
        <h3>a的值是{{numbers.a}}h3>
        <button @click="numbers.a++">点我让a+1button>
        <h3>b的值是{{numbers.b}}h3>
        <button @click="numbers.b++">点我让b+1button><br/><br/>
        <button @click="numbers = {a:666,b:888}">彻底替换掉numbersbutton>
    div>
body>
<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:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            // 此时监视的是isHot
            isHot:{
                // immediate:true, // immediate默认值为false,初始化时让handler调用一下
                // handler()函数 什么时候调用：当isHot发生改变时就调用
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }
            },
            // 监视多级结构中某个属性的变化(只监测a)
            /* 'numbers.a':{
                handler(){
                    console.log('a被改变了');
                }
            }, */
            // 监视整个numbers的改变(numbers整体改变)
            /* numbers:{
                handler(){
                    console.log('numbers彻底改变了');
                }
            }, */
            // 监视多级结构中所有属性的变化(既监测a也监测b)
            numbers:{
                deep:true, // deep配置项 默认值是false 深入的、有深度的
                handler(){
                    console.log('numbers改变了');
                }
            }
        }

    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87

    在这里插入图片描述
    在这里插入图片描述

    • 天气案例_深度监视简写：
    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>天气案例_深度监视简写title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    
    <div id="root">
        <h2>今天天气很{{info}}h2>
        <button @click = 'changeWeather'>切换天气button>
    div>
body>
<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:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            // 此时监视的是isHot
            // 正常写法：
            /* isHot:{
                // immediate:true, // immediate默认值为false,初始化时让handler调用一下
                // deep:true, // deep默认值为false,深度监视
                // 当配置项只有handler()时，可采用简写形式
                // handler()函数 什么时候调用：当isHot发生改变时就调用
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }
            } */
            // 简写：
            /* isHot(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue);
            } */
        }
    })


    // 正常写法：
    /* vm.$watch('isHot',{
        // immediate:true, // immediate默认值为false,初始化时让handler调用一下
        // deep:true, // deep默认值为false,深度监视
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue);
        }
    }) */
    // 简写：
    vm.$watch('isHot',function(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue);
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    3.3 watch对比computed

    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>姓名案例_watch实现title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        
        姓：<input type="text" v-model="firstName"><br/><br/>
        
        名：<input type="text" v-model="lastName"><br/><br/>
        {firstName + '-' + lastName}} -->
        全名：<span>{{fullName}}span>
    div>
body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        computed:{
            // 此时function及后面函数可看作get()
            /* fullName:function() {
                console.log('get被调用了');
                return this.firstName + '-' + this.lastName
            } */
            
            // 再精简：
            /* fullName() {
                console.log('get被调用了');
                return this.firstName + '-' + this.lastName
            } */
        },
        watch:{
            firstName(newValue){
                // console.log(this); // this指向vm
                this.fullName = newValue + '-' + this.lastName
                // 若要延时：
                /* setTimeout(()=>{
					console.log(this)
					this.fullName = val + '-' + this.lastName
				},1000); */
            },
            lastName(newValue){
                // console.log(this); // this指向vm
                this.fullName = this.firstName + '-' + newValue
            }
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71

    4 绑定样式

    4.1 绑定class样式

    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>绑定样式title>
    <script src="../JS/vue.js">script>
    <style>
        .basic{
			width: 400px;
			height: 100px;
			border: 1px solid black;
		}
			
		.happy{
			border: 4px solid red;;
			background-color: rgba(255, 255, 0, 0.644);
			background: linear-gradient(30deg,yellow,pink,orange,yellow);
		}
		.sad{
			border: 4px dashed rgb(2, 197, 2);
			background-color: gray;
		}
		.normal{
			background-color: skyblue;
		}

		.atguigu1{
			background-color: yellowgreen;
		}
		.atguigu2{
			font-size: 30px;
			text-shadow:2px 2px 10px red;
		}
		.atguigu3{
			border-radius: 20px;
		}
    style>
    
head>
<body>
    
    <div id="root">
        
        
        <div class="basic" :class="mood" id="demo" @click="changeMood">{{name}}div><br/><br/>

        
        <div class="basic" :class="classArr">{{name}}div><br/><br/>

        
        <div class="basic" :class="classObj">{{name}}div>
    div>
body>
<script>
    Vue.config.productionTip = false
    
    const vm = new Vue({
        el:'#root',
        data:{
            name:'小王',
            mood:'normal',
            classArr:['atguigu1','atguigu2','atguigu3'],
            classObj:{
                atguigu1:false,
                atguigu2:false
            }
        },
        methods:{
            changeMood(){
                // this.mood = 'happy' // 点击后 心情变为happy
                // 点击后 心情随机变
                const arr = ['happy','sad','normal']
                // 随机生成0、1、2三个数字中的任一个
                // Math.random() 生成的是0-1的数 无限接近于1 但得不到1
                // Math.random()*3 生成的是0-3的数 无限接近于3 但得不到3
                // Math.floor() 向下取整
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85

    在这里插入图片描述

    4.2 绑定style样式

    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>绑定样式title>
    <script src="../JS/vue.js">script>
    <style>
        .basic{
			width: 400px;
			height: 100px;
			border: 1px solid black;
		}
			
		.happy{
			border: 4px solid red;;
			background-color: rgba(255, 255, 0, 0.644);
			background: linear-gradient(30deg,yellow,pink,orange,yellow);
		}
		.sad{
			border: 4px dashed rgb(2, 197, 2);
			background-color: gray;
		}
		.normal{
			background-color: skyblue;
		}

		.atguigu1{
			background-color: yellowgreen;
		}
		.atguigu2{
			font-size: 30px;
			text-shadow:2px 2px 10px red;
		}
		.atguigu3{
			border-radius: 20px;
		}
    style>
    
head>
<body>
    
    <div id="root">
        
        {name}}
    --> <div class="basic" :style="styleObj">{{name}}div><br/><br/> {name}}
    --> <div class="basic" :style="styleArr">{{name}}div> div> body> <script> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'小王', // fsize:40 styleObj:{ fontSize: '40px', color:'skyblue', // backgroundColor:'orange' }, /* styleObj2:{ backgroundColor:'orange' }, */ styleArr:[ { fontSize: '40px', color:'skyblue', }, { backgroundColor:'orange' } ] } }) script> html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    在这里插入图片描述

    4.3 总结

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    5 条件渲染

    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>条件渲染title>
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        
        {name}} -->
        {name}} -->
        {name}} -->

        
        {name}} -->
        {name}} -->

        <h2>当前的n值是:{{n}}h2>
        <button @click="n++">点我n+1button>

        

        

        
        

        
        
        
        
        
        <template v-if="n === 1">
            <h2>你好h2>
            <h2>小王h2>
            <h2>魔仙堡h2>
        template>
    div>
body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            name:'魔仙堡',
            // a:false
            n:0
        }
    })
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88

    在这里插入图片描述

  • 相关阅读:
    【web APIs】4、（学习笔记）有案例！
    软信天成：助力某制造企业建设产品主数据管理平台案例分享
    星际争霸之小霸王之小蜜蜂（十一）--杀杀杀
    Axure绘制星级评分
    基于VGG16的猫狗数据集分类
    飞讯软件受邀参加天翼云中国行·惠州站活动，并签约生态合作共推工业数字化转型
    安装rdkit报错：解决CondaHTTPError: HTTP 000 CONNECTION FAILED for url问题
    5个 GIS空间分析 空间查询与量算 的重要知识点
    修改安卓ID为硬件唯一ID
    ESP32_HTTP请求获取天气，含json解析
  • 原文地址：https://blog.csdn.net/weixin_64875217/article/details/133455681