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

最新推荐文章于 2024-05-17 14:32:46 发布

明灭18

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量725

点赞数 1

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_60440795/article/details/127349473

版权

笔记专栏收录该内容

81 篇文章 3 订阅

订阅专栏

Vue

一、计算属性
1、姓名案例_插值语法实现
2、姓名案例_methods实现
3、姓名案例_计算属性实现
4、姓名案例_计算属性实现
二、监视属性
1、天气案例
2、天气案例 _监视属性
3、天气案例 _深度监视
4、天气案例 _监视属性_简写
5、watch对比computed
三、绑定样式
1、绑定样式

一、计算属性

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>

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>

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>

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、天气案例

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

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>

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>

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>

5、watch对比computed

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

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

三、绑定样式

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>