Vue学习之--------监视属性(2022/7/10)

简介: 这篇博客文章详细介绍了Vue框架中的监视属性(watch)功能,通过天气案例展示了监视属性的基础知识、代码实例、测试效果、深度监视、监视属性简写以及在项目中的实际应用。

文章目录

  • 1、监视属性
    • 1.1 监视属性--天气案例
      • 1.1.1 基础知识
      • 1.1.2 代码实例
      • 1.1.2 测试效果
    • 1.2 深度监视-天气案例
      • 1.2.1 基础知识
      • 1.2.2 代码实例
      • 1.2.3 测试效果
    • 1.3 监视属性简写-天气案例
      • 1.3.1 代码实例
    • 1.4 天气案例 -method方法实现
      • 1.4.1 代码实例
      • 1.4.2 测试效果
    • 1.5 姓名案例-watch实现
      • 1.5.1 代码实例
      • 1.5.2 测试效果
  • 2、项目中的实际应用

1、监视属性

1.1 监视属性–天气案例

1.1.1 基础知识

监视属性watch:

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

1.1.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1>广州今天的天气很{
  
  {info}}</h1>
        <button @click="changeWeather">切换天气变化</button>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            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', {
            immediate: true, //初始化时让handler调用一下
            //handler什么时候调用?当isHot发生改变时。
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue)
            }
        })
    </script>

</body>

</html>

1.1.2 测试效果

在这里插入图片描述
在这里插入图片描述

1.2 深度监视-天气案例

1.2.1 基础知识

深度监视:

  • (1)、Vue中的watch默认不监测对象内部值的改变(一层)。
  • (2)、配置deep:true可以监测对象内部值改变(多层)。

备注:

  • (1)、Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
  • (2)、使用watch时根据数据的具体结构,决定是否采用深度监视。

1.2.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1>广州今天的天气很{
  
  {info}}</h1>
        <button @click="changeWeather">切换天气变化</button>

        <h3>a的值是:{
  
  {numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{
  
  {numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>


    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            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>

</body>

</html>

1.2.3 测试效果

在这里插入图片描述
在这里插入图片描述

1.3 监视属性简写-天气案例

1.3.1 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/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 在启动时生成生产提示。

    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(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }, */
            //简写
            /* isHot(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue,this)
            } */
        }
    })

        //正常写法
    /* vm.$watch('isHot',{
        immediate:true, //初始化时让handler调用一下
        deep:true,//深度监视
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    }) */

        //简写
    /* vm.$watch('isHot',(newValue,oldValue)=>{
        console.log('isHot被修改了',newValue,oldValue,this)
    }) */

</script>

</html>

1.4 天气案例 -method方法实现

1.4.1 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1>广州今天的天气很{
  
  {info}}</h1>
            <button @click="changeWeather">切换天气变化</button>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {

                isHot:true
            },
            computed:{
                info(){
                    return this.isHot ? '热' : '冷'
                }

            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot

                }
            },
        })
    </script>

</body>

</html>

1.4.2 测试效果

在这里插入图片描述

1.5 姓名案例-watch实现

1.5.1 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        姓:<input type="text" v-model="firstName"> <br /><br />
        名:<input type="text" v-model="lastName"> <br /><br />
        全名:<span>{
  
  {fullName}}</span> <br /><br />

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                firstName: '张',
                lastName: '三',
                fullName: '张-三'
            },
            watch: {
                firstName(val) {
                    setTimeout(() => {
                        console.log(this)
                        this.fullName = val + '-' + this.lastName
                    }, 1000);
                },
                lastName(val) {
                    this.fullName = this.firstName + '-' + val
                }
            }
        })
    </script>

</body>

</html>

1.5.2 测试效果

在这里插入图片描述

2、项目中的实际应用

这里需要监视使用Avue生成的输入框、校验内容。这个监视的位置需要注意、同时还需要引入。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
提示:这里的watch可以写多个对不同的值进行监视

相关文章
|
11天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
44 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
32 1
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
38 1
vue学习第四章
|
1月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
28 1
vue学习第7章(循环)
|
1月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
31 1
vue学习第九章(v-model)
|
1月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
46 1
vue学习第十章(组件开发)

热门文章

最新文章