• Vue笔记3（计算属性，监视属性，绑定样式）

    Vue

    一、计算属性

    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>1.姓名案例_插值语法实现</title>
    <!--引入Vue-->
    <script type="text/javascript" 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 /> 姓名： <span>{{firstname}}-{{lastname}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成自动提示
    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

    2、姓名案例_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>
    <!--引入Vue-->
    <script type="text/javascript" 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 /> 姓名： <span>{{fullname()}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成自动提示
    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

    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>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
        计算属性：
        1、定义：要用的属性不存在，要通过已有属性计算得来
        2、原理：底层借助了Object.defineproperty方法提供的getter和setter
        3、get函数什么时候执行
        （1）初次读取会执行依次，然后会被缓存
        （2）当依赖的数据发生改变时会被再次调用
        4、优势：和methods相比，内部有缓存机制（可以复用），效率更高，调式方便
        5、备注：
        （1）计算属性最终会出现在vm身上，直接读取即可，不用跟调用函数一样使用
        （2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
    -->
    <div id="root">
        姓：<input type="text" v-model="firstname"> <br /><br /> 名：
        <input type="text" v-model="lastname"> <br /><br /> 姓名： <span>{{fullname}}</span>
        <!--使用fullname而不是fullname()的原因是fullname的值是函数调用返回的结果，而不是函数本身-->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成自动提示
    const vm = new Vue({
        el: '#root',
        data: {
            firstname: '张',
            lastname: '三'
        },
        computed: {
            fullname: {
                //get有什么作用？当有人读取fullname的时候，get就会被调用，且返回值就作为fullname的值
                //get什么时候被调用？1.当有人读取的fullname的时候。2.所依赖的数据发生变化时（firstname和lastname）
                get() {
                    console.log('get被调用了')
                    return this.firstname + '-' + this.lastname //this指的是vm
                },
                //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

    4、姓名案例_计算属性实现

    <!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>
    <!--引入Vue-->
    <script type="text/javascript" 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 /> 姓名： <span>{{fullname}}</span>
        <!--使用fullname而不是fullname()的原因是fullname的值是函数调用返回的结果，而不是函数本身-->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成自动提示
    const vm = new Vue({
        el: '#root',
        data: {
            firstname: '张',
            lastname: '三'
        },
        computed: {
            //完整写法
            /*fullname: {
                //get有什么作用？当有人读取fullname的时候，get就会被调用，且返回值就作为fullname的值
                //get什么时候被调用？1.当有人读取的fullname的时候。2.所依赖的数据发生变化时（firstname和lastname）
                get() {
                    console.log('get被调用了')
                    return this.firstname + '-' + this.lastname //this指的是vm
                },
                //set什么时候被调用？当fullname被修改时
                set(value) {
                    console.log('set', value)
                    const arr = value.split('-')
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                } */
            //简写——只考虑读取不考虑写才可以用简写
            fullname() {
                console.log('get被调用了')
                return this.firstname + '-' + this.lastname //this指的是vm
            }
        }
    })
</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

    二、监视属性

    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>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--绑定时间的时候：@xxx="yyy",yyy可以写一些简单的语句-->
        <button @click="changeweather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeweather() {
                this.isHot = !this.isHot
            }
        }
    })
</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

    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>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
        监视属性watch：
        1、当被监视的属性发生变化时，回调函数自动调用（如handler），进行相关操作
        2、监视的属性必须存在（如isHot），才能进行监视
        3、监视的两种写法：（1）new Vue时传入watch配置
        （2）通过vm.$watch监视
    -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--绑定时间的时候：@xxx="yyy",yyy可以写一些简单的语句-->
        <button @click="changeweather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeweather() {
                    this.isHot = !this.isHot
                }
            },
            /*   watch: {
                  isHot: {
                      immediate: true, //初始化时让handler调用一下
                      //handler什么时候调用？当isHot发生改变时
                      handler(newvalue, oldvalue) {
                          console.log('isHot被修改了', newvalue, oldvalue)
                      }
                  }
              } */
        })
        //第二种形式
    vm.$watch('isHot', { //isHot一定要打上单引号
        immediate: true, //初始化时让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

    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>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
        深度监视：
        （1）Vue中的watch默认不监视对象内部值的改变（一层）
        （2）配置deep:true可以监视对象内部值的改变（多层）
        备注：
        （3）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
        （4）使用watch时可以根据数据的具体结构，决定是否采用深度监视
    -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--绑定时间的时候：@xxx="yyy",yyy可以写一些简单的语句-->
        <button @click="changeweather">切换天气</button>
        <hr/>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    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: {
                //immediate: true, //初始化时让handler调用一下
                //handler什么时候调用？ 当isHot发生改变时
                handler(newvalue, oldvalue) {
                    console.log('isHot被修改了', newvalue, oldvalue)
                }
            },

            //监视多级结构中某个属性的变化
            /*  'numbers.a': {
                 handler() {
                     console.log('a被改变了')
                 }
             } */

            //监视多级结构中所有属性的变化
            numbers: {
                deep: true,
                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

    4、天气案例 _监视属性_简写

    <!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>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
        监视属性watch：
        1、当被监视的属性发生变化时，回调函数自动调用（如handler），进行相关操作
        2、监视的属性必须存在（如isHot），才能进行监视
        3、监视的两种写法：（1）new Vue时传入watch配置
        （2）通过vm.$watch监视
    -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--绑定时间的时候：@xxx="yyy",yyy可以写一些简单的语句-->
        <button @click="changeweather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeweather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            //正常写法
            /*  isHot: {
                 //immediate: true, //初始化时让handler调用一下
                 //deep: true, //深度监视
                 //handler什么时候调用？当isHot发生改变时
                 handler(newvalue, oldvalue) {
                     console.log('isHot被修改了', newvalue, oldvalue)
                 }
             }, */

            //简写(不需要immediate之类的时候)
            isHot(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

    5、watch对比computed

    <!--
    computed和watch之间的区别：
    1.computed能完成的功能，watch都可以完成
    2.watch能完成的功能，computed不一定能完成。
    例如：watch可以进行异步操作（比如姓名的姓更改后过一秒更新）

    两个重要的小原则：
    1.所被Vue管理的函数，最好写成普通函数，这样this指的才是vm 或 组件的实例对象
    2.所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，
    这样this的指向才是vm 或 组件的实例对象
-->

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

    三、绑定样式

    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>
    <style>
        .basic {
            background-color: red;
        }
        
        .happy {
            font-size: 30px;
        }
        
        .sad {
            font-size: 50px;
        }
        
        .normal {
            font-size: 80px;
        }
        
        .LYH1 {
            font-size: 110px;
        }
        
        .LYH2 {
            font-size: 130px;
        }
        
        .LYH3 {
            font-size: 150px;
        }
        /* 此处省略样式 */
    </style>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
        绑定样式：
        1、class样式
        写法：class="xxx" xxx可以时字符串，对象，数组
            字符串的写法适用于：类名不确定，要动态获取
            对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
            数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
        2、style样式
           :style="{frontSize:xxx}"其中xxx时动态值
           :style="[a,b]"其中a,b是样式对象

    -->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changemood">{{name}}</div><br/><br/>
        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div><br/><br/>
        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div><br/><br/>
        <!-- 绑定style内联样式--对象写法-->
        <div class="basic" :style="styleObj">{{name}}</div><br/><br/>
    </div>
</body>
<script type="text/javascript ">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            name: '林宇航',
            mood: 'normal',
            classArr: ['LYH1', 'LYH2', 'LYH3'],
            classObj: {
                LYH1: false,
                LYH2: false,
            },
            styleObj: {
                fontSize: '40px',
                backgroundColor: 'blue'
            }
        },
        methods: {
            changemood() {
                const arr = ['happy', 'sad', 'mormal']
                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
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
  • 相关阅读:
    自研爬虫框架的经验总结（理论及方法）
    Stanford CS143 速通PA2教程
    线段树板子4
    JavaEE——传输层_UDP
    气传导耳机什么意思？备受好评的气传导耳机推荐
    Nacos - Nacos与Eureka区别
    附录A 程序员工作面试的秘密
    OpenCV入门5：色彩空间及色彩变换
    记录服务磁盘满了清理记录
    问题：anaconda的bin和envs目录莫名奇妙消失！
  • 原文地址：https://blog.csdn.net/weixin_60440795/article/details/127349473