前端VUE3.0,DAY13，监视属性与天气案例

最新推荐文章于 2024-03-24 13:05:14 发布
最新推荐文章于 2024-03-24 13:05:14 发布
阅读量220 收藏 1
点赞数 2
分类专栏： 前端 文章标签： javascript vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681463/article/details/119410720
版权

VUE3.0,DAY13

天气案例

1第一种写法，在插值语法中使用三元表达式。在vue中设置数据ishot的布尔值。

<!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="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--三元表达式，使用ishot的布尔值切换，选择炎热或者寒冷-->
        <h2>今天天气很{{ishot? '炎热': '寒冷'}}</h2>
        <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="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <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() {
                //在这里与按钮绑定，然后点击按钮，ishot的布尔值就会取反一次
                this.ishot = !this.ishot
            }
        },
    })
</script>

</html>

在这里插入图片描述

监视属性

1.监视属性，监视天气案例中ishot的变化。使用一个watch函数，handler函数。同时还能监视到新旧值分别是多少。每点一次按钮，在console中就会看到打印输出的属性。

<!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="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--三元表达式，使用ishot的布尔值切换，选择炎热或者寒冷-->
        <h2>今天天气很{{info}}</h2>
        <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() {
                //在这里与按钮绑定，然后点击按钮，ishot的布尔值就会取反一次
                this.ishot = !this.ishot
            }
        },
        //监视ishot值的变化用watch
        watch: {
            ishot: {
                //handler什么时候调用？当ishot发生改变时
                //还可以显示ishot的新旧值分别是什么
                handler(newValue, oldValue) {
                    //在控制台显示，当ishot切换一次布尔值，就输出一次下边这句话
                    console.log('ishot被修改了', newValue, oldValue);
                }
            }
        }
    })
</script>

</html>

在这里插入图片描述
2.配置监视的一些属性，immediate函数。如图，当未点击修改按钮时，只有一个值，未产生旧值。所以出现undifined。

<!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="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--三元表达式，使用ishot的布尔值切换，选择炎热或者寒冷-->
        <h2>今天天气很{{info}}</h2>
        <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() {
                //在这里与按钮绑定，然后点击按钮，ishot的布尔值就会取反一次
                this.ishot = !this.ishot
            }
        },
        //监视ishot值的变化用watch
        watch: {
            ishot: {
                immediate: true,//初始化时让handler调用一下。
                //handler什么时候调用？当ishot发生改变时
                //还可以显示ishot的新旧值分别是什么
                handler(newValue, oldValue) {
                    //在控制台显示，当ishot切换一次布尔值，就输出一次下边这句话
                    console.log('ishot被修改了', newValue, oldValue);
                }
            }
        }
    })
</script>

</html>

在这里插入图片描述

深度监视

1.修改一项配置deep：true。开启深度监视，监视多级结构中所有属性值的改变。先点击b+1按钮，再点击a+1按钮，效果如图所示。该段代码中的number对象就是一个多级结构。

<!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="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--三元表达式，使用ishot的布尔值切换，选择炎热或者寒冷-->
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <!--hr的意思是分割线-->
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <hr>
        <!--hr的意思是分割线-->
        <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: 2
            }
        },
        computed: {
            info() {
                //三元表达式
                return this.ishot ? '炎热' : '寒冷'
            }
        },
        methods: {

            changeWeather() {
                //在这里与按钮绑定，然后点击按钮，ishot的布尔值就会取反一次
                this.ishot = !this.ishot
            }
        },
        //监视ishot值的变化用watch
        watch: {
            ishot: {
                // immediate: true,//初始化时让handler调用一下。
                //handler什么时候调用？当ishot发生改变时
                //还可以显示ishot的新旧值分别是什么
                handler(newValue, oldValue) {
                    //在控制台显示，当ishot切换一次布尔值，就输出一次下边这句话
                    console.log('ishot被修改了', newValue, oldValue);
                }
            },
            //监视多级结构中某个属性变化
            //只监视a，不监视b,注意要加单引号是原始的写法，不加的话是简写，有时会报错。
            'numbers.a': {
                handler(newValue, oldValue) {
                    console.log('a被修改了一次', newValue, oldValue);
                }
            },
            //监视整个numbers里边任何一个属性的变化
            numbers: {
                //deep开启了深度监视，监视多级结构中所有属性的变化
                deep: true,
                handler() {
                    console.log('numbers改变了');
                }
            }
        }
    })
</script>

</html>

在这里插入图片描述

总结

深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep :true可以监测对象内部值改变(多层)。
备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

疯子的梦想＠
关注
专栏目录
vue中的监视属性
weixin_46376652的博客
07-09 2769
如果刚开始确定监视对象，在vue中可以直接使用watch属性实现监视 监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；接收两个参数：newValue：表示新的值oldValue：表示改变前的值实现初始化的时候调用一次监视函数handler，默认为false如果刚开始不确定监视的对象，就可以后续再使用这个实现监视 watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性watch:{ "numbers.a":{ ... } } //numb
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
10-20
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
Vue监视属性
m0_74641039的博客
03-24 138
【代码】Vue监视属性。
Vue 监视属性
qq_56303170的博客
10-18 2583
监视属性 写在Vue对象的watch中，它的值是配置对象——即属性名 当被监听的属性改变时，回调函数自动调用，进行相关操作 监视的属性必须存在，才能进行监视 监视的两种写法： new Vue时传入watch配置 通过vm.$watch监视 handler方法 可传递参数：newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值 var vm = new Vue({ el: "#root", data: {
vue3.0 vue-quill-editor.rar
09-19
在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的Vue兼容，以充分利用Vue3.0的改进和提升。 Vue CLI 3 是Vue.js的命令行工具，用于快速搭建Vue项目。它简化了项目配置，提供了开箱即用的脚手架，支持热...
vue3.0源码2024-7-1从gitlub上下载的
最新发布
07-01
vue3.0源码2024-7-1从gitlub上下载的
Vue3.0快速入门
06-30
只要你与前端工作有关， Vue3.0的问世都可能是你脱颖而出的好机会！ 抢先进阶，成为首批Vue3.0开发者，升职、加薪、找工作一路绿灯！ 你为Vue3.0入门，准备了多少学习时间？ 三天？五天？还是七天？ 完全不需要...
vue3.0pdf在线预览
02-25
Vue3.0是一款备受瞩目的前端JavaScript框架的最新版本，由尤雨溪领导的团队开发。Vue3.0带来了许多性能优化和新特性，旨在提高开发效率和应用性能。PDF在线预览是Web应用程序中常见的一项功能，允许用户在不下载文件...
vue 中使用中国天气插件
01-08
export default { name: 'BIWeather.vue', created () { window.WIDGET = { ID: '自己的ID' }; (function (d) { var cs = d.createElement('link') cs.rel = 'stylesheet' cs.href = 'https://apip.weatherdt.com/view/static/css/tqw_widget_view.css?v=0101' var s = d.createElement('
Vue之监视属性
花&败
11-27 1547
我们实现以下的一个小案例：点击切换天气会分别显示凉爽、炎热(只有这两种状态)，且每一次天气切换的时候都会被控制台给捕获到。我们先不考虑控制台的那一部分，先把切换部分给做出来。我们可以使用前文刚刚介绍的计算属性。此处有两个注意点：①如果我们把上述代码模板中的插值语法给去掉，也就是这样：因为此时已有属性、计算属性在模板当中都没有使用，故会导致Vue的开发者工具出现一点小问题。
Vue中的监视属性
XunLin233的博客
10-11 751
当我们想要监视一个属性改变的时候就可以使用监视属性监视其变化并进行操作。语法格式如下：watch:{监视属性名称 : { // 监视属性的配置项 }
Vue—监视属性
Guuiabc的博客
01-23 248
(1).vue自身可以路测对象内部值的改变，但vue提供的watch默认不可以！(2).使用watch时根据数据的具体结构。决定是否采用深度监视。(1).vue中的watch默认不监测对象内部值的改变（一层）。(2).配置deep:true可以监测对象内部值改变（多层）。1.当被监视的属性变化时，回调函数自动调用，进行相关操作。(1).new Vue时传入watch配置。2.监视的属性必须存在，才能进行监视！(2).通过vm. $watch监视。*默认不开启深度监视是为了效率更高。
Vue之监视属性（watch）
浩泽学编程的博客
07-09 837
监视属性当被监视的属性变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进行监视！监视的两种写法：（1） Vue实例化对象内watch配置（2）通过Vue实例（假设是vm）vm.$watch监视以上就是监视属性。
Vue---监视属性
gaoqiandr的博客
05-10 236
本文主要讲解的是Vue中的监听属性，简单易懂
Vue-Vue的监视属性
Laollaoaolao的博客
08-18 579
1.理解 监视属性watch: 1.当被监视的属性变化时，回调函数自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视 3.监视的两种写法: ​ 1.new Vue时传入watch配置 ​ 2.通过vm.$watch监视 格式: watch:{ xxx:{ hander(newValue,oldValue){ xxxxx } } } 2.案例 1.基本属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值