vueday04

zhangzhangxinya

已于 2023-03-04 11:03:31 修改

阅读量47

点赞数

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

于 2023-03-03 15:10:20 首次发布

本文链接：https://blog.csdn.net/weixin_44931575/article/details/129320427

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.监视属性

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

    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">点击切换天气</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 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: {
                    // 监视多级结构中某个属性的变化
                    // 初始化时让handler调用一下
                    // immediate: true,
                    // 当isHot发生改变时，就调用handler
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了', '新的值为' + newValue, '旧的值为' + oldValue);
                    }
                },
                // 监视多级属性中所有属性的变化
                numbers: {
                    // 开启深度监视
                    deep: true,
                    handler() {
                        console.log('numbers被修改了');
                    }
                }
            },

        })
  </script>

1.2computed和watch之间的区别:

1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的国调函数)，最好写成箭头函数，
这样this的指向才是vm 或组件实例对象。

1.3绑定class样式

class样式
1.写法:class="xxx” 其中xxx可以是字符串、对象、数组。
2.字符串写法适用于:类名不确定，要动态获取。
3.对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
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>Document</title>
    <style>
        .basic {
            width: 200px;
            height: 200px;
            border: 1px solid greenyellow;
        }

        .happy {
            background-color: hotpink;
        }

        .sad {
            background-color: gray;
        }

        .normal {
            background-color: rgb(74, 191, 236);
        }

        .one {
            border-radius: 20px;
        }

        .two {
            font-size: 18px;
            color: aqua;
        }

        .three {
            background-color: greenyellow;
            padding: 10px 10px;
        }
    </style>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入图标 -->
    <link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon">
</head>

<body>
    <div id="root">
        <!-- 点击盒子随机切换心情,切换心情就会切换背景色 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>
        <!-- 盒子的样式有可能是one two three 中的一个或者两个或者三个，或者都没有 -->
        <div class="basic" :class="classArr">{{name}}</div><br><br>
        <!-- 盒子的样式one two three确定的，但是动态决定用于不用 -->
        <div class="basic" :class="classObj">{{name}}</div><br><br>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示。
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'zhangzhang',
                    mood: 'normal',
                    classArr: ['one', 'two', 'three'],
                    classObj:{
                        one:true,
                        two:false,
                        three:true
                    }
                }
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'normal', 'sad']
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            }
        })
    </script>
</body>

</html>

1.4绑定style样式

style样式
:style="{fontsize: xxx｝"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象

 <style>
        .basic {
            width: 200px;
            height: 200px;
            border: 10px solid rgb(52, 231, 231);
        }
    </style>
<div id="root">
        <!-- 绑定style样式 -->
        <div :style="{fontSize:fsize + 'px'}" class="basic">{{name}}</div>
        <div :style="styleObj" class="basic">{{name}}</div>
        <div :style="styleObj2" class="basic">{{name}}</div>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示。
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'zhangzhang',
                    fsize:30,
                    styleObj: {
                        color: 'aqua',
                        backgroundColor: 'hotpink'
                    },
                    styleObj2: [
                        {
                            backgroundColor: 'greenyellow'
                        },
                        {
                            color:'black'
                        }
                    ]
                }
            },

        })
    </script>