vue2基础语法02——计算属性、方法、侦听器

最新推荐文章于 2024-11-08 11:00:17 发布
最新推荐文章于 2024-11-08 11:00:17 发布
阅读量514 收藏 5
点赞数 4
分类专栏： Vue 文章标签： vue.js 前端 javascript vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suixinfeixiangfei/article/details/138666413
版权

vue2基础语法02——计算属性、方法、侦听器

1. 计算属性 computed

1.1 为什么要用计算属性

  • 先看下面的例子：
    <div id="root">
    <h2>狗狗信息_1处：{{dogName}} - {{dogSex==0 ? '女' : '男'}} - {{dogAge}}</h2>
    <hr>
    <h2>狗狗信息_1处：{{dogName}} - {{dogSex==0 ? '女' : '男'}} - {{dogAge}}</h2>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            dogName: "麦兜",
            dogSex: 0,
            dogAge: 3,
        }
    })
</script>
  • 在上面例子中，模板不再是简单的声明式逻辑，虽然模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
    所以，对于任何复杂逻辑，我们应当考虑使用计算属性。

1.2 简单例子

1.2.1 例子

  • 例子如下：

    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>狗狗信息：{{dogInfoDetail}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                dogName: "麦兜",
                dogSex: "女",
                dogAge: 3,
            },
            computed: {
                // 计算属性的 getter
                dogInfoDetail: function(){
                    // this 指向 vm 实例
                    return this.dogName + "-" + this.dogSex + "-" + this.dogAge;
                }
            }
        })
    </script>
</body>

    在这里插入图片描述

  • 这里我们声明了一个计算属性 dogInfoDetail。我们提供的函数将用作 property vm.dogInfoDetail 的 getter 函数。

    Vue 知道 vm.dogInfoDetail 依赖于 vm.dogName、vm.dogSex、vm.dogAge，因此当 vm.dogName、vm.dogSex、vm.dogAge 发生改变时，所有依赖 vm.dogInfoDetail 的绑定也会更新。

1.2.2 计算属性缓存

  • 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 计算属性所依赖的属性 还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

1.3 计算属性的 setter

  • 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。
  • 如下例子：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>狗狗信息：{{dogInfoDetail}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                dogName: "麦兜",
                dogSex: "女",
                dogAge: 3,
            },
            computed: {
                dogInfoDetail: {
                    /*
                         getter
                      1. 当 dogInfoDetail 被读取时，这里的get方法会被调用，且此get方法的返回值就是计算属性 dogInfoDetail的值
                      2. 什么时候被调用？
                         2.1 初次读取 dogInfoDetail 时，后续再读取就是读取的缓存；
                         2.2 所依赖的数据发生变化时，会重新调用get，重新获取计算属性的值
                      3.
                    */
                    get(){
                        return this.dogName + "-" + this.dogSex + "-" + this.dogAge;
                    },
                    // setter
                    set: function(newValue){
                        console.log("newValue:::",newValue);
                        
                        var dogInfo = newValue.split('-')
                        this.dogName = dogInfo[0];
                        this.dogSex = dogInfo[1];
                        this.dogAge = dogInfo[dogInfo.length - 1]
                    }
                }
            }
        });
    </script>
</body>

2. 方法 methods

2.1 例子

  • 先看例子：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>狗狗信息_computed：{{dogInfoDetail}}</h2>

        <hr>
        <h2>狗狗信息2_methods：{{dogInfoDetail_2()}}</h2>
        <hr>
        <button @click="dogInfoDetail_3">点我提示狗狗信息3_methods</button>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                dogName: "麦兜",
                dogSex: "女",
                dogAge: 3,
            },
            computed: {
                dogInfoDetail: function(){
                    return this.dogName + "-" + this.dogSex + "-" + this.dogAge;
                }
            },
            methods: {
                dogInfoDetail_2: function(){
                    return this.dogName + "-" + this.dogSex + "-" + this.dogAge;
                },
                dogInfoDetail_3: function(){
                    console.log('methods……');
                    var dogInfo = this.dogName + "-" + this.dogSex + "-" + this.dogAge;
                    alert(dogInfo);
                }
            },
        })
    </script>
</body>
  • 再看效果：
    在这里插入图片描述

2.2 说明

  • methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
  • 方法不像计算那样可以缓存。

2.3 简单方法替换实现

  • 如果方法过于简单，也可以不用定义方法实现，如下直接写语句：
    在这里插入图片描述

    <body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <div id="root">
        <h2>现在的数字是：{{number}}</h2>

        <button v-on:click="numberAdd">1_methods:点击数字+1</button>
        
        <button @click="number += 1;">2_语句:点击数字+1</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                number :1,
            },
            methods: {
                numberAdd(){
                    this.number++;
                }
            },
        })
    </script>
</body>

3. 侦听属性 watch

3.1 介绍

  • 类型：{ [key: string]: string | Function | Object | Array }

  • 详细：

    一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

  • 可以监测 data里的属性，也可以监测 computed 里的计算属性。

3.2 值的情况

3.2.1 对应回调函数

  • 测试案例如下：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>你家宠物是狗狗还是猫咪：{{petKindDetail}}</h2>
        <button v-on:click="petKindCode = (petKindCode == 0) ? 1 : 0;">切换宠物类型</button>
    </div>

    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                petKindCode: 0,
            },
            computed:{
                petKindDetail: function(){
                    return this.petKindCode==0 ? "狗狗" : "猫咪";
                }
            },
            watch:{
                // 1. 值是对应回调函数
                'petKindCode': function(newValue,oldValue){
                    console.log('属性petKindCode被监测前后值变化==》newValue: %s, oldValue: %s', newValue, oldValue)
                },
             // petKindCode 也可以不用引号引起来
             // petKindCode: function(newValue,oldValue){
            //     console.log('属性petKindCode被监测前后值变化==》newValue: %s, oldValue: %s', newValue, oldValue)
            // },
            }
        })
    </script>
</body>
  • 效果如下：
    在这里插入图片描述
  • 也可以简写成下面形式：
    <script>
    const vm = new Vue({
        el:"#root",
        data:{
            petKindCode: 0,
        },
        computed:{
            petKindDetail: function(){
                return this.petKindCode==0 ? "狗狗" : "猫咪";
            }
        },
        watch:{
            // 1. 值是对应回调函数
            // 'petKindCode': function(newValue,oldValue){
            //     console.log('属性petKindCode被监测前后值变化==》newValue: %s, oldValue: %s', newValue, oldValue)
            // },
            
            // petKindCode 也可以不用引号引起来
            // petKindCode: function(newValue,oldValue){
            //     console.log('属性petKindCode被监测前后值变化==》newValue: %s, oldValue: %s', newValue, oldValue)
            // },

            // 简洁写法
            petKindCode(newValue,oldValue){
                console.log('属性petKindCode被监测前后值变化==》newValue: %s, oldValue: %s', newValue, oldValue)
            }
        }
    })
</script>

3.2.2 方法名

  • 测试案例如下：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>你家宠物是狗狗还是猫咪：{{petKindDetail}}</h2>
        <button v-on:click="petKindCode = (petKindCode == 0) ? 1 : 0;">切换宠物类型</button>
    </div>
    
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                petKindCode: 0,
            },
            computed:{
                petKindDetail: function(){
                    return this.petKindCode==0 ? "狗狗" : "猫咪";
                }
            },
            methods: {
                // 这里的方法 可以有参数也可以无参数，如果有参数也是被监测属性改变前后的值
                // 我这里为了效果，写了有惨
                changPetKindCodeMethod(newValue,oldValue){
                    console.log("被监测属性 petKindCode 的值改变了，执行方法changPetKindCodeMethod...");
                    console.log('属性petKindCode监视前后值变化===》newValue: %s, oldValue: %s', newValue, oldValue);
                }
            },
            watch:{
                // 2. 值是 方法名
                petKindCode: "changPetKindCodeMethod"
            }
        })
    </script>
</body>
  • 测试效果如下：
    在这里插入图片描述

3.2.3 包含选项的对象

3.2.3.1 选项 immediate
  • immediate 选项值默认是false，如果设置为true：该回调将会在侦听开始之后被立即调用(即：被监测属性未发生改变、在初始化时或者说页面加载时就调用handler)。
  • 例子代码如下：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>你家宠物是狗狗还是猫咪：{{petKindDetail}}</h2>
        <button v-on:click="petKindCode = (petKindCode == 0) ? 1 : 0;">切换宠物类型</button>
    </div>
    
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                petKindCode: 0,
            },
            computed:{
                petKindDetail: function(){
                    return this.petKindCode==0 ? "狗狗" : "猫咪";
                }
            },
            watch:{
                // 3. 值是 包含选项的对象
                /*
                   immediate: true 默认是false
                   如果设置为true：该回调将会在侦听开始之后被立即调用(即：被监测属性未发生改变、在初始化时或者说页面加载时就调用handler)
                */
                petKindCode: {
                    handler: function(newValue,oldValue){
                        console.log('属性petKindCode监视前后值变化===》newValue: %s, oldValue: %s', newValue, oldValue);
                    },
                    immediate: true  
                }
            }
        })
    </script>
</body>
  • 效果如下：
    在这里插入图片描述
3.2.3.2 对于多层级结构——选项 deep
3.2.3.2.1 监听整个对象
3.2.3.2.1 例子
  • 例子代码如下：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>狗狗信息：{{dog.dogName}} - {{dog.dogAge}} - {{dog.dogWeight}}</h2>
        <button v-on:click="dog.dogAge++;">狗狗年龄+1</button> <br>
        <button v-on:click="dog.dogWeight++;">狗狗重量+1</button>
    </div>
    
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                dog: {
                    dogName: '麦兜',
                    dogAge: 3,
                    dogWeight: 35
                }
            },
            watch:{
                // 3. 值是 包含选项的对象
                /*
                   deep: true  默认是false
                   如果设置为true：会深度监听属性的变化，即：
                                 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
                */
               // 监听整个对象，每个属性值的变化都会执行handler
                dog: {
                    handler: function(newValue,oldValue){
                        // 注意：属性值发生变化后，handler执行后获取的 newValue 值和 oldValue 值是一样的
                        const oldDogJson = JSON.stringify(oldValue);
                        const newDogJson = JSON.stringify(newValue);
                        // console.log(oldValue.dogAge);
                        // console.log(newValue.dogAge);
                        console.log('dog监视前后值变化===》newDogJson: %s, oldDogJson: %s', newDogJson, oldDogJson);
                    },
                    deep: true
                }
            }
        })
    </script>
</body>
  • 效果如下：
    在这里插入图片描述
3.2.3.2.1 注意事项
  • 上面方式：属性值发生变化后，handler执行后获取的 newValue 值和 oldValue 值是一样的，都是更新后的new值。
3.2.3.2.2 监听对象的某个属性
  • 测试代码如下：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>狗狗信息：{{dog.dogName}} - {{dog.dogAge}} - {{dog.dogWeight}}</h2>
        <button v-on:click="dog.dogAge++;">狗狗年龄+1</button> <br>
        <button v-on:click="dog.dogWeight++;">狗狗重量+1</button>
    </div>
    
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                dog: {
                    dogName: '麦兜',
                    dogAge: 3,
                    dogWeight: 35
                }
            },
            watch:{
                'dog.dogAge': {
                    handler(newValue,oldValue){
                        console.log('dogAge监视前后值变化===newValue: %s, oldValue: %s', newValue, oldValue);
                    }
                }
            }
        })
    </script>
</body>
  • 效果如下：
    在这里插入图片描述

3.2.4 回调数组

3.3 使用vm.$watch

  • 通过vm实现监测，语法
    vm.$watch( expOrFn, callback, [options] )
  • 简单例子：
    <body>
    <script type="text/javascript" src="../js/vue.js"></script>

    <div id="root">
        <h2>你家宠物是狗狗还是猫咪：{{petKindDetail}}</h2>
        <button v-on:click="petKindCode = (petKindCode == 0) ? 1 : 0;">切换宠物类型</button>
    </div>

    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                petKindCode: 0,
            },
            computed:{
                petKindDetail: function(){
                    return this.petKindCode==0 ? "狗狗" : "猫咪";
                }
            },
        });
        
        // 这种方式监测，petKindCode 必须用引号引起来
        vm.$watch('petKindCode',function(){
            console.log('属性petKindCode被监测前后值变化==》newValue: %s, oldValue: %s', newValue, oldValue);
        })
    </script>
</body>
    在这里插入图片描述
  • 更多参考：
    https://v2.cn.vuejs.org/v2/api/#vm-watch.

4. 总结

  • 计算属性可以缓存；methods不能缓存
  • 计算属性里不能写定时器，watch里可以写定时器，即：watch可以异步，计算属性不能异步；

5. 参考

Vue2 入门-第三篇：Vue2 数据响应式与方法
无
04-05 602
在 Vue 实例中，methods选项用于定义处理事件和业务逻辑的方法。这些方法可以在模板中通过事件绑定来调用，也可以在其他方法中调用。例如：< template > < div > < input type = " text " v-model = " inputValue " > < button @click = " handleClick " > 点击 </ button > </ div > </ template > < script > export default {data() {
vue2（2）之watch 侦听器/computed 计算属性/指令修饰符 / v-bind对于样式操作的增强 / v-model应用于其他表单元素
qq_66318904的博客
04-27 1271
​ 所谓指令修饰符就是通过指明一些指令后缀 ，不同的后缀封装了不同的处理操作 —> 简化代码代码演示： 3.v-model修饰符 ——去除首位空格 -——转数字 4.事件修饰符 ——阻止冒泡 ——阻止默认行为 ——可以连用 即阻止事件冒泡也阻止默认行为 三、v-bind对样式控制的增强-操作class 为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。 2.对象语法 当class动态绑定的是对象时，键就是类
Vue2-计算属性、监视属性（侦听属性）
weixin_56498069的博客
08-10 1380
Vue2-计算属性、监视属性（侦听属性）
Vue2中的计算属性（computed）和监听属性（watch）
zwl2220943286的博客
05-31 539
vue2中的计算属性和监听属性使用
Vue2 计算方法与计算属性
qq_52731478的博客
06-02 445
【代码】Vue2 计算属性。
Vue2系列教程——计算属性 computed
DTCloud
05-18 728
Vue2 计算属性 computed <template> <span>{{fullName}}</span> </template> <script> data: { firstName: '张', lastName: '三' }, computed: { fullName: { // get有什么作用？当读取fullName时，get就会被调用，且返回值就作为fullName的值。 //
Vue【2】基本方法
大火的博客
08-18 197
1.显示结果 在两个花括号之间之间引用变量名就可以了 <div id="app"> {{message}} </div> <script> var app=new Vue({ el:'#app', data:{ mess...
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
Vue3基础+代码语法+例子大全（二）——data property、methods、计算属性和侦听器
m0_46610349的博客
09-06 538
Data Property和方法；计算属性；侦听器
Vue计算属性和侦听器
weixin_43108180的博客
06-23 1017
计算属性和侦听器以及指令补充
Vue入门1：基础语法
echola_mendes的博客
07-19 775
个人喜欢将复杂概念简化，不做过多概念点的赘述，通过案例来理解和巩固知识点，由浅入深……：需要HTML、CSS和JavaScript前端基础Node和一个Vue编译器（VS Code /Sublime Text）Vue (发音为 /vjuː/，类似) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
Vue2.0-侦听器
Java_young_man的博客
05-18 829
Vue2.0-侦听器 文章目录Vue2.0-侦听器1.什么是侦听器2.watch侦听器2.1什么是watch侦听器2.2侦听器的格式2.3侦听器-deep深度侦听 1.什么是侦听器 我们都知道data里面可以定义数据，data里面的数据是可以发生变化的，如果我们需要对这些数据进行监听的话，我们可以用到vue里面的侦听器，我们可以定义一个侦听器，来监视data里面的某个数据变化，只要数据发生变化，我们就可以在侦听器里面做出变化。 2.watch侦听器 2.1什么是watch侦听器 watch侦听器允许开发者监
Vue2 watch监听对象的属性值变化
热门推荐
白瑕 的博客
09-01 1万+
Vue2 watch监听对象属性值变化, 监听props对象, 监听对象整体变化, 参数对象的组织方法 如何避雷监听失败
vue2一些常用的方法
m0_50374211的博客
12-03 463
11111
Vue2：侦听属性
最新发布
盒马的博客
11-08 906
讲解Vue的侦听属性
Vue2的基本用法
qq_62499582的博客
11-25 1632
Vue2的基本使用
vue2：侦听器watch
在这个地方会介绍一些前端和后端的开发内容，暂时以springBoot和Vue为主。
05-28 430
vue2，侦听器watch
Vue2快速入门
rnnf_yyds的博客
08-14 1447
插值语法：{{js表达式 或者 data中对应的属性名}},插值语法用于解析标签的内容能将vue实例对象中data数据里的一些属性渲染到页面上，以下代码展示了插值语法的使用在一个vue实例中，el表示绑定的哪个容器，这里使用的是id选择器进行绑定,而data属性负责放数据,在data中我们放置了俩个属性数据，并且在 id为app的容器中，通过{{}}语法进行渲染到界面上。
Vue2 几种常见开局方式
hsany330的专栏
08-28 1839
Vue2 加了reader选项后, 再加上几种构建方式, 开局方式真是各种五花八门, 这里列几种常见的, 说说注意点 我们先建立一个 app.vue 来当入口组件, 即所有页面都会以这个组件为模板 (下面代码中无特别说明, App 即指下面这个组件) template> div id="app"> img src="./assets/logo.png"> hello>h
生鲜超市管理系统设计与实现——Java+SpringBoot+Vue教程
- 计算属性与侦听器。 - **优势**: 结合现代工具链，可以高效开发单页应用（SPA）。 #### 3. MySQL数据库 - **定义**: MySQL是一个流行的关系型数据库管理系统，以其高可靠性和高性能广受欢迎。 - **特点**: 开源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@素素~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值