vue-监视属性

最新推荐文章于 2024-06-14 10:39:01 发布

谁伴我闯荡か

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量220

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq1632047376/article/details/122837737

版权

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 src="/vue.js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx = "yyy" yyy可以写一些简单的语句 -->
        <!-- <button @click="isHot = !isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script>
    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
            }
        },
    })
</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 src="/vue.js/vue.js"></script>
</head>
<body>
    <!-- 监视属性watch:
        1,个被监视的属性变化时,回调函数自动调用,进行相关操作
        2.监视的属性必须存在，才能进行监视!!
        3.监视的两种写法:
            (1).new Vue时传入watch配置
            (2).通过vm.$watch监视
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script>
    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',{
    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 src="/vue.js/vue.js"></script>
</head>
<body>
    <!-- 深度监视:
        (1).vue中的watch默认不监测对象内部值的改变(一层)。
        (2).配置deep:true可以监测对象内部值改变(多层)。
    备注:
        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
        (2).使用watch时根据数据的具体结构,决定是否采用深度监视。 
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值是；{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是；{{numbers.a}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
    </div>
</body>
<script>
    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 src="/vue.js/vue.js"></script>
</head>
<body>
    <!-- 深度监视:
        (1).vue中的watch默认不监测对象内部值的改变(一层)。
        (2).配置deep:true可以监测对象内部值改变(多层)。
    备注:
        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
        (2).使用watch时根据数据的具体结构,决定是否采用深度监视。 
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值是；{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是；{{numbers.a}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
    </div>
</body>
<script>
    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调用一下
        //         //deep:true,//深度监视
        //        handler(newValue,oldValue){
        //             console.log('isHot被修改了',newValue,oldValue)
        //         }
        // },
        //简写
        // isHot(newValue,oldValue){
        //     console.log('isHot被修改了',newValue,oldValue)
        // }
    }
})

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

vm.$watch('isHot',function(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue,this)
})
</script>
</html>

5.姓名案例_watch实现

<!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>姓名案例_watch实现</title>
    <!-- 引入Vue -->
    <script src="/vue.js/vue.js"></script>
</head>
<body>
    <!-- computed和lwatch之间的区别:
        1.computed能完成的功能, watch都可以完成。
        2.watch能完成的功能,computed不一定能完成，例如: watch可以进行异步操作。
    两个重要的小原则:
        1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
        ⒉.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，
        这样this的指向才是vm或组件实例对象。 
    -->

   <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstnName"><br/><br/>
        名：<input type="text" v-model="lastName"><br/><br/>
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
        el:'#root',
        data:{
            firstnName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            firstnName(val){
                setTimeout(() =>{
                    this.fullName = val + '-' + this.lastName
                },1000);
                
            },
            lastName(val){
                this.fullName = this.firstnName + '-' + val
            }
        }
    })
</script>
</html>

谁伴我闯荡か

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-监视属性

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
复制链接

扫一扫