09.监视属性

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量719 收藏
点赞数
分类专栏： Vue学习 文章标签： 前端 javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ma628991/article/details/121412777
版权

01.天气案例

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

    <script src="../JS/vue.js"></script>
</head>

<body>
    <div id='root'>
        <h2>今天的天气很{{info}}</h2>
        <!-- 如果绑定事件的任务比较简单，我们不需要methods，可以在后面直接写，多个不建议，例如： -->
        <!-- <button @click='isHot=!isHot'>点我切换</button> -->
        <button @click='changeWeather'>点我切换</button>
    </div>
    <script>
        Vue.config.productionTip = false;

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

</html>

02.天气案例-监视属性

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

    <script src="../JS/vue.js"></script>
</head>

<body>
    <div id='root'>
        <h2>今天的天气很{{info}}</h2>
        <!-- 如果绑定事件的任务比较简单，我们不需要methods，可以在后面直接写，多个不建议，例如： -->
        <!-- <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
                }
            },

            // 以下是新内容：监视属性
            // 1.当监视属性发生变化时，回调函数自动调用，进行相关操作。
            // 2.监视属性必须存在

            // watch: {  // watch有监视的意思。
            //     isHot: {  // 监视谁呢？这里监视isHot，info也能被监视。
            //         // immediate 初始化时，让handler调用一下，默认是false
            //         immediate: true,
            //         handler(newValue, oldValue) {  // 参数有变动前 和 变动后的参数
            //             console.log('isHot被修改', newValue, oldValue);
            //         }
            //     }
            // }
        })

        // 另一种写法格式,如下
        // vm.$watch('监视对象', {})
        vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {  // 参数有变动前 和 变动后的参数
                console.log('isHot被修改', newValue, oldValue);
            }
        })
    </script>
</body>

</html>

03.深度检测

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

    <script src="../JS/vue.js"></script>
</head>

<body>
    <div id='root'>
        <h2>a的值是：{{numbers.a}}</h2>
        <!-- 因为需求比较简单且只有一个需求，可以直接书写 -->
        <button @click='numbers.a++'>点我让a++</button>
        <h2>b的值是：{{numbers.b}}</h2>
        <button @click='numbers.b++'>点我让b++</button>

        <!-- 证明deep:true是可以监测多层的。 -->
        <h2>e的值是：{{numbers.c.d.e}}</h2>
        <button @click='numbers.c.d.e++'>点我让e++</button>
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                numbers: {
                    a: 1,
                    b: 2,
                    c: {
                        d: {
                            e: 8
                        }
                    }
                }
            },
            watch: {  // watch有监视的意思。
                numbers: {
                    // 深度检测
                    // Vue中的watch默认不监测对象内部值的改变（一层）
                    // 配置deep：true，可以监测多层,deep默认是false
                    // 备注:
                    // Vue自身可以监测对象内部值的改变,但是Vue提供的watch不支持
                    // 使用watch时,根据数据的要求,决定是否采用深度监视
                    deep: true,
                    handler() {
                        console.log('numbers被修改');
                    }
                }
            }
        })


    </script>
</body>

</html>

04.天气案例-监视属性简写

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

    <script src="../JS/vue.js"></script>
</head>

<body>
    <div id='root'>
        <h2>今天的天气很{{info}}</h2>
        <!-- 如果绑定事件的任务比较简单，我们不需要methods，可以在后面直接写，多个不建议，例如： -->
        <!-- <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
                }
            },

            // 以下是新内容：监视属性
            // 1.当监视属性发生变化时，回调函数自动调用，进行相关操作。
            // 2.监视属性必须存在

            // watch: {  // watch有监视的意思。
            //     isHot: {  // 监视谁呢？这里监视isHot，info也能被监视。
            //         // immediate 初始化时，让handler调用一下，默认是false
            //         immediate: true,
            //         handler(newValue, oldValue) {  // 参数有变动前 和 变动后的参数
            //             console.log('isHot被修改', newValue, oldValue);
            //         }
            //     }
            // }
        })

        // 另一种写法格式,如下
        // vm.$watch('监视对象', {})
        // vm.$watch('isHot', {
        //     immediate: true,
        //     handler(newValue, oldValue) {  // 参数有变动前 和 变动后的参数
        //         console.log('isHot被修改', newValue, oldValue);
        //     }
        // })
        // 再次简写（如果你不需要immediate和deep（深度检测）的时候）
        vm.$watch('isHot', function (nowValue, oldValue) {
            console.log('isHot被修改', nowValue, oldValue);
        })
    </script>
</body>

</html>

05.姓名案例-监视属性语法

<!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 type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- 双向数据绑定使用v-model,可省略value -->
        姓：<input type="text" v-model:value="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>

        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: 'Vue',
                lastName: '学习',
                // 下面要先设置一个初始的，不然页面姓名内容是空白的。
                fullName: 'Vue - 学习'
            },
            computed: {
                // 完整写法
                // fullName: {
                //     // get什么作用？
                //     // 答：当有人读取get的时候，且返回值是fullName的值。
                //     // get什么时候被调用？
                //     // 答：1.初次被调用
                //     //     2.所依赖的参数数据发生变化时。
                //     // 上面两点是与众不同之处，别的方法在多次调用的时候，系统会有缓存，在次调用会直接拿缓存的数据，而computed在发生变化的时候也会调用。
                //     // 优势:与methods相比,内部有缓存机智(复用),效率更高,调试方便
                //     get() {
                //         // 同样,不能写箭头函数
                //         return this.firstName + '-' + this.lastName
                //     },
                //     // 在你确定name不会发生改变的时候，可不写set
                //     set() {
                //         // 因为姓 名中间有个-，所有我们要提取。
                //         const arr = value.split('-')
                //         // 我们利用set修改之后，让名字和修改的内容相等。
                //         //  firstName 和 lastName = value的值,会到前台显示,而fullname捕捉到了name发生变化,因此名字组合也会跟着变化
                //         firstName = value[0]
                //         lastName = value[1]
                //     }
                // }

                // 简写（当我们确定只读取不修改才能简写）
                // fullName: function () {
                //     return this.firstName + '-' + this.lastName
                // }

                // 再次简写
                // fullName() {
                //     return this.firstName + '-' + this.lastName
                // }
            },
            watch: {
                // 完整写法
                // firstName: {
                //     // 因为我们不需要deep和深度检测,所以handler可不写.
                //     handler(newValue, oldValue) {
                //         // 此时我们只用到新的newvalue值，所以oldValue可不写,而newvalue也可简写val
                //         this.fullName = newValue + '-' + this.lastName
                //     }
                // },
                // lastName: {
                //     handler(newValue, oldValue) {
                //         this.fullName = this.firstName + '-' + newValue
                //     }
                // }

                // 简写(省去handler,只保留新的value,简写val)
                // firstName(val) {
                //     this.fullName = val + '-' + this.lastName
                // },
                // lastName(val) {
                //     this.fullName = this.firstName + '-' + val
                // }

                // 拓展知识点:
                // 在watch和计算属性都能完成的时候, 我们推荐计算属性完成.
                // 但是涉及到异步定时器的时候，我们只能通过watch完成。
                // 例如：我们要求在修改名字，1s之后在执行。
                firstName(val) {
                    // 特别注意：此处我们用了箭头函数，this指向的是window
                    // 由Vue管理的函数，我们写普通函数，this指向的是vm或者组件实例对象。
                    // 不被Vue管理的函数，我们可以写箭头函数，例如：定时器，ajax回调函数，promise的回调函数
                    setTimeout(() => {
                        this.fullName = val + '-' + this.lastName
                    }, 1000)
                },
                lastName(val) {
                    setTimeout(() => {
                        this.fullName = this.firstName + '-' + val
                    }, 1000)
                }

            }
        })
    </script>
</body>

</html>

M丶GentleMan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的监视属性
weixin_46376652的博客
07-09 2728
如果刚开始确定监视对象，在vue中可以直接使用watch属性实现监视 监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；接收两个参数：newValue：表示新的值oldValue：表示改变前的值实现初始化的时候调用一次监视函数handler，默认为false如果刚开始不确定监视的对象，就可以后续再使用这个实现监视 watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性watch:{ "numbers.a":{ ... } } //numb
超详细 - 学习vue3.0的基础代码.zip
06-07
07_src_vue3的计算属性 08_src_watch监视函数 09_src_watch监测ref数据的说明 10_src_watchEffect函数 11_src_vue3生命周期 12_src_自定义hook函数 13_src toReffltoRefs 14 src shallowRef和shallowReactive 15 src...
vue监听的deep和immediate属性
前端-黎姿
03-23 983
watch选项 当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 FullName: {{ fullName }} FirstName: new Vue({ el: ‘#app’, data: { firstName: ‘Dawei’, lastName: ‘Lou’, fullName: ‘’ }, watch: { // newNa...
Vue框架学习笔记——侦听（监视）属性watch：天气案例+immediate+deep深度监听
Aer_7z的博客
11-27 531
介绍了Vue框架中的侦听属性watch，加上immediate和deep配置
Vue 监视属性
qq_56303170的博客
10-18 2463
监视属性 写在Vue对象的watch中，它的值是配置对象——即属性名 当被监听的属性改变时，回调函数自动调用，进行相关操作 监视的属性必须存在，才能进行监视 监视的两种写法： new Vue时传入watch配置 通过vm.$watch监视 handler方法 可传递参数：newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值 var vm = new Vue({ el: "#root", data: {
Vue之监视属性
花&败
11-27 1523
我们实现以下的一个小案例：点击切换天气会分别显示凉爽、炎热(只有这两种状态)，且每一次天气切换的时候都会被控制台给捕获到。我们先不考虑控制台的那一部分，先把切换部分给做出来。我们可以使用前文刚刚介绍的计算属性。此处有两个注意点：①如果我们把上述代码模板中的插值语法给去掉，也就是这样：因为此时已有属性、计算属性在模板当中都没有使用，故会导致Vue的开发者工具出现一点小问题。
2021-2022收藏资料多媒体技术基础期末复习指导(专科).doc
09-25
这些指令用来描述图中线条的形状、位置、颜色等各种属性和参数。矢量图与位图比较，主要看空间和性能两方面，一般说来，要看图像的复杂程度，简单的图使用矢量图描述好一些，复杂的图使用位图好一些。 监视器分辨率...
sl（实例源程序）.rar
07-18
- 使用`CREATE DATABASE`语句创建数据库，`ALTER DATABASE`修改数据库属性，`DROP DATABASE`删除数据库。 - 数据库的备份与恢复是SQL Server管理的重要部分，包括完整备份、差异备份、日志备份等策略。 3. **表...
程序文件清单(1).doc
12-24
"9 "测量和监控设备控制程序 "TJLXSH /CX-09 "Q " "10 "内部审核控制程序 "TJLXSH /CX-10 "Q、E、O " "11 "产品的监视和测量控制程序 "TJLXSH /CX-11 "Q、E、O " "12 "不合格品控制程序 "TJLXSH /CX-12 "Q " "13 ...
计算机日常应用与维护09
08-31
- 打印设置：学习如何配置打印机，设置打印属性，解决打印问题。 - 网络连接：掌握建立和管理网络连接，包括Wi-Fi和有线连接，以及处理网络故障。 2. **软件安装与卸载**： - 安装程序：了解不同类型的安装包...
Vue前端框架——监视属性
weixin_45661229的博客
09-22 698
当被监视的属性发生变化时，回调函数handler会被自动调用并进行相应的操作。所要监视的属性必须存在，才能进行监视，否则不会有效果，控制台也不会报错。深度监视：Vue中的watch默认不监测对象内部值的改变。配置deep:true就可以检测到对象内部值的改变了注意：在使用watch监测数据是要根据数据的具体结构，再决定是否使用深度监视。Vue自身可以监测对象内部值的改变，但由Vue提供的watch默认不行。
Vue核心⑤(监视属性)
十八岁讨厌编程的博客
06-04 1063
我们实现以下的一个小案例： 点击切换天气会分别显示凉爽、炎热(只有这两种状态)，且每一次天气切换的时候都会被控制台给捕获到。我们先不考虑控制台的那一部分，先把切换部分给做出来。我们可以使用前文刚刚介绍的计算属性。第一部分实现代码如下： 然后控制台的捕获部分就要使用监视属性了。监视属性顾名思义就是我们要监视的属性。那么我们如何去监视一个属性呢。Vue为我们提供了一个新的配置项。我们直接看相关实现代码，再进行解释： watch里面的被监视属性同样也要写成一个配置对象。其中：我们也可以不通过watch来进行监
vue的watch监听属性中的immediate属性和deep属性
weixin_43478869的博客
03-09 5078
vue的watch监听属性中的immediate属性和deep属性
Vue 知识点：监视属性 - watch
summer_cloudy的博客
02-22 379
Vue 知识点：监视属性 - watch 当被监视的属性变化时，回调函数自动调用，进行相关操作 （以下指的是watch里的 handler） 监视属性必须存在，才能进行监视 监视的两种写法： （1）new Vue的时候传入watch配置 （2）通过vm.$watch监视 //监视属性实现 <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气&
vue.js监听属性watch(handler方法immediate属性deep属性)
热门推荐
Amanda_wmy的博客
11-05 2万+
vue.js监听属性watch(handler方法immediate属性deep属性) &lt;div&gt; &lt;p&gt;FullName: {{fullName}}&lt;/p&gt; &lt;p&gt;FirstName: &lt;input type="text" v-model="firstName"&gt;&lt;/p&gt;
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 465
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
Haproxy搭建Web群集
wkysdhr的博客
07-08 882
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Webkit简介以及工作流程
最新发布
读心悦
07-10 196
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
JS混淆基本类型和原理
朴拙科技的博客
07-06 713
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
vue3 监视多个属性
03-25
可以使用computed属性方法，它支持对多个依赖属性进行监视，当其中任何一个依赖属性发生变化时，就会重新计算computed属性的值。举个例子： ``` <template> <div> <p>Length: {{ length }}</p> <p>Width: {{ width }}</p> <p>Area: {{ area }}</p> </div> </template> <script> export default { data() { return { length: 3, width: 4, }; }, computed: { area() { return this.length * this.width; }, }, }; </script> ``` 在这个例子中，当length或width发生变化时，area也会重新计算。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值