VUE学习笔记：4.vue的计算属性和v-on绑定监听事件

最新推荐文章于 2023-10-13 17:42:23 发布
最新推荐文章于 2023-10-13 17:42:23 发布
阅读量457 收藏 1
点赞数 2
分类专栏： vue学习笔记 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/117604634
版权

一.计算属性

1.什么是计算属性

在这里插入图片描述

2.计算属性的基本使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
	<!--可以像使用data中的数据一样，获取计算属性中的数据内容-->
    <h2>{{fullName}}</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            firstName: 'zhang',
            lastName: 'san'
        },
        //计算属性中的数据可以跟data中的数据一样使用，不过它的数据的值是通过方法的运算后得出的
        computed: {
            fullName: function(){
                return this.firstName + ' ' + this.lastName;
            }
        }
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

当然我们也可以使用methods来增加一个方法达到同样的效果。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <!--HTML页面中要使用一个方法必须在后面加上()-->
    <h2>{{getfullName()}}</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            firstName: 'li',
            lastName: 'si'
        },
        
        methods: {
            getfullName: function(){
                return this.firstName + ' ' + this.lastName;
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

  • methods方法和计算属性computed都可以实现计算功能，但是它们也有些不同：

  • computed计算属性是一个属性，挂载点使用它不需要在后面加括号。例如：fullName1

  • methods是一个方法，挂载点使用它需要在后面加括号。例如：fullName1()

  • computed计算属性会将值存到缓存中，当它的值没变化时，则不会计算，而是使用缓存。而methods则不同，每调用一次方法都会计算一次。所以对于不太变化的内容使用计算属性可以大大减小系统的消耗。

3.计算属性的getter和setter

在这里插入图片描述

  • 每一个计算属性都有一个get方法和一个set方法。

  • 当我们获取计算属性的值时会调用get方法。当我们给计算属性赋值时会调用先调用set方法再调用get方法。

  • 我们前面的计算属性的写法都只是实现了计算属性的get方法。

  • 计算属性一般不设置set方法。

  • 实现计算属性的get方法：

    <!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
</head>
<body>


<div id="app">
    <h2>{{fullName}}</h2>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            firstName: 'li',
            lastName: 'si'
        },
        computed:{
            fullName: {
                get(){
                    return this.firstName + ' ' + this.lastName;
                }
            }
//           如果计算属性只实现get方法，那么一般简写为这种形式。
//           fullName: function(){
//               return this.firstName + ' ' + this.lastName;
//           }
        }

    })
</script>
</body>
</html>

    此时我们修改计算属性的值：
    在这里插入图片描述

  • 实现计算属性的set方法。

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <!--HTML页面中要使用一个方法必须在后面加上()-->
    <h2>{{fullName}}</h2>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            firstName: 'li',
            lastName: 'si'
        },
        computed:{
            fullName: {
                get(){
                    console.log('开始调用get方法');
                    return this.firstName + ' ' + this.lastName;
                },
                set(newValue){
                    console.log('开始调用set方法');
                    let name_list = newValue.split(' ');
                    this.firstName = name_list[0];
                    this.lastName = name_list[1];
                }
            }

        }

    })
</script>
</body>
</html>

修改计算属性的值效果如下：
在这里插入图片描述

4.计算属性与method的区别

在这里插入图片描述
我们用一个小案例来看看它们之间的区别：在一个页面上多次打印相同的计算属性或者方法。

使用method实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            firstName: 'li',
            lastName: 'si'
        },
        methods: {
            getfullName: function(){
                console.log('调用方法+1');
                return this.firstName + ' ' + this.lastName;
            }
        }

    })
</script>
</body>
</html>

在这里插入图片描述
使用computed实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            firstName: 'li',
            lastName: 'si'
        },
        computed: {
            fullName: function(){
                console.log('调用计算属性+1');
                return this.firstName + ' ' + this.lastName;
            }
        }

    })
</script>
</body>
</html>

在这里插入图片描述

二.v-on绑定监听事件

在这里插入图片描述

1.v-on的基本使用

在这里插入图片描述
语法格式：v-on:监听的事件="表达式/方法名"
简写格式：@监听的事件="表达式/方法名"

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <h2>{{count}}</h2>
    <button v-on:click="jia">+</button>
    <button @click="jian">-</button>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            count: 0
        },
        methods: {
            jia: function(){
                this.count++;
            },
            jian: function(){
                this.count--;
            }
        }

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

2.v-on的传参问题

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <!--如果绑定监听事件的方法没有形参，那么调用方法时可以加()，也可以不加-->
    <button v-on:click="btnclick1()">按钮1</button>
    <button v-on:click="btnclick2">按钮2</button>
    <!--如果绑定监听事件的方法有一个形参，如果不传参数则会默认将`事件对象`本身作为参数-->
    <button v-on:click="btnclick3('zhangsan')">按钮3</button>
    <button v-on:click="btnclick4">按钮4</button>
    <!--如果绑定监听事件的方法有多个形参，如果不传参数则会默认将`事件对象`本身作为第一个参数，其他参数会默认为undefined-->
    <button v-on:click="btnclick5('zhangsan','lisi')">按钮5</button>
    <button v-on:click="btnclick6">按钮6</button>
    <!--如果绑定监听事件的方法有多个参数，且其中的参数之一为事件对象本身，可以使用$event来获取-->
    <button v-on:click="btnclick7('zhangsan',$event)">按钮7</button>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {
            btnclick1: function(){
                console.log('btnclick1');
            },
            btnclick2: function(){
                console.log('btnclick2');
            },
            btnclick3: function(name){
                console.log(name);
            },
            btnclick4: function(name){
                console.log(name);
            },
            btnclick5: function(name1,name2){
                console.log(name1);
                console.log(name2);
            },
            btnclick6: function(name1,name2){
                console.log(name1);
                console.log(name2);
            },
            btnclick7: function(name,event){
                console.log(name);
                console.log(event);
            }

        }

    })
</script>
</body>
</html>

3.v-on的修饰符

在这里插入图片描述

（1）event事件.stop修饰符阻止事件冒泡

先看一个案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app" v-on:click="divclick">
    我是div
    <button v-on:click="btnclick">按钮1</button>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {
            divclick: function(){
                console.log('div被点击了')
            },
            btnclick: function(){
                console.log('button被点击了')
            }

        }

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述
使用event事件.stop修饰符阻止事件冒泡。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app" v-on:click="divclick">
    我是div
    <button v-on:click.stop="btnclick">按钮1</button>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {
            divclick: function(){
                console.log('div被点击了')
            },
            btnclick: function(){
                console.log('button被点击了')
            }

        }

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

（2）event事件.prevent修饰符阻止标签的默认事件

还是先看一个案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <a href="https://www.baidu.com">百度一下</a>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {

        }

    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
使用event事件.prevent修饰符来阻止标签的默认事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <a href="https://www.baidu.com" v-on:click.prevent="aclick">百度一下</a>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {
            aclick: function(){
                console.log('点击a标签');
            }
        }

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

（3）键盘事件.键名 修饰符来监听特殊的键帽

老规矩还是先来看一个案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <input type="text" @keyup="keyUp">
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {
            keyUp: function(){
                console.log('按键盘咯');
            }
        }

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述
使用键盘事件.键名修饰符来监听特殊的键位抬起。例如：回车键

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <!--只监听回车键-->
    <input type="text" @keyup.enter="keyUp">
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {
            keyUp: function(){
                console.log('按键盘咯');
            }
        }

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

（4）event事件.once修饰符只触发一次事件方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
    <button @click.once="btnclick">点点点</button>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
        },
        methods: {
            btnclick: function(){
                console.log('点击按钮咯');
            }
        }

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

new nm个对象
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue语法 事件监听(v-on)
富有知识的小窝
07-21 1166
我们监听按键的使用，我们将上一个监听输入的案例，变成按回车抬起后才输出内容。点击按钮我们发现并没有什么改变，我们并没有把函数与我们的按钮进行绑定。刷新启动过的项目页面，再点击按钮可以发现可以改变计数。我们刷新启动的项目页面，在输入框输入内容并按下。在网站中存在很多按钮，点击会触发不同的功能。我们编写一个计数器，更好的理解监听事件。我们刷新启动的项目页面，在输入框输入内容。我们可以看到当我们按下回车键输出了内容。中怎么实现这一功能呢，使用到了。绑定函数时，如果我们没有写。中，我们编写如下代码。......
vue.js绑定事件监听器示例【基于v-on事件绑定】
10-18
主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下
Eslint格式化不生效怎么办
最新发布
m0_64047085的博客
10-13 297
1、首先分别下载三个依赖，eslint、@antfu/eslint-config、eslint-plugin-vue。若还是不行，重启下vscode试试吧，以上内容仅供参考。
浅谈Vue.js 组件中的v-on绑定自定义事件理解
10-18
主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ESLint vue/v-on-event-hyphenation 提示错误
m0_62410131的博客
06-29 2332
请注意，具体的配置方法可能因您的ESLint版本和其他相关设置而有所不同。确保参考官方文档或相关资源以获取更准确的信息。在代码中临时禁用规则：您可以在特定位置的代码行上添加注释来临时禁用该规则。配置文件中永久禁用规则：如果您希望在整个项目中禁用该规则，可以编辑。文件（或者其他相应的配置文件）并添加一个规则配置。相关的规则，并将其设置为。
一篇文章教小白学会搭建 vite + ts + vue3 项目，手把手教程，不会算我输（第一篇）
热门推荐
qq_17335549的博客
12-29 1万+
【前端工程化实践】手把手教小白搭建 vite + ts + vue3 项目
【ESLint】Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
tangkebo的博客
03-04 3090
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码，但是随着接手的项目越来越多，需要统一每个项目的代码规范，于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及修改为prettier风格。 对比肉眼可见的格式化风格差异，并且以字符串单/双引号，每行结尾有无分号，object对象最后一项有无尾逗号作为判断依据 VSC
.eslintrc.js文件配置(关于eslint文件的设置)
m0_64393334的博客
04-26 1787
.eslintrc.js文件配置(关于eslint文件的设置)
Vue3.0 + vite + Ts + element plus体验
yyXieDaiMa的博客
11-23 1586
1.配置eslint + vue Language Features (Volar) (vscode 插件) 2 路径别名配置vite.config.ts 3.sass: （css预处理器) 4.引入element plus
vue - 事件监听（v-on的使用方法及修饰符）
asfcyg的博客
06-21 618
一. v-on基本用法 v-on语法糖：@ data(){ counter:0 }, methods(){ add(){ this.counter++; } } <button @click='add'>+</button>
vue3学习2：vue 的指令v-on，event
weixin_43788986的博客
07-08 1725
作用：如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令，v-on就是用于绑定事件的，通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明。 简写：@举个栗子 v-on 指令所绑定的事件处理函数中，可以接收到事件对象 event。 event是vue提供的特殊变量，用来表示原生的事件参数对象event。event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。event是vue提供的特殊变量，用来表示原生的事件参数对象event。event
对Vue.js之事件的绑定(v-on: 或者 @ )详解
10-18
今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue.js的事件处理器v-on:click
10-19
本篇文章主要介绍了详解vue.js的事件处理器v-on:click，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-async-computed：Vue.js的异步计算属性
02-06
使用此插件，您可以在Vue中具有异步计算的计算属性。 如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource return Vue . ...
Vue的学习v-on和event
weixin_43288858的博客
03-23 1279
事件处理：v-on 完整格式： v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)” 缩写格式： @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意： @ 后面没有冒号 event ：函数中的默认形参，代表原生 DOM 事件 当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入 作用：用于监听 DOM 事件 v-on:cli...
vue中事件监听v-on的基本使用
nanzai11111的博客
10-08 638
v-on参数 当通过methods中定义方法，以供@click调用，需要注意参数问题， 情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。（） <!-- 1、 事件调用的方法没有参数--> <button @click="btnClick">按钮1</button> <button @click="btnClick()">按钮2</button> <!-- 2、 在事件定义时,方法本身需要一个参数，正常的写法应该是下面这样
vue里面v-on的使用
yamili的博客
03-23 5539
首先我们看看v-on的简单使用： 按钮1是将事件写在表达式里，按钮2是将事件添加到methods中定义的函数。 v-on的语法糖写法： v-on的参数： 当通过methods中定义的方法，以供@cilck调用时，需要注意参数问题。 情况一：如果该方法不需要额外参数，那么方法后的()可以不加，如果方法本身有一个参数没那么会默认将原生事件event参数传递进去。 情况二：如果需要同时掺入某个参数...
vue.js v-on事件使用，vue.js event事件绑定
蕃薯耀的博客
12-04 890
; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue 事件绑定&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="vue-div"&gt; 使用v-on:click &lt;img :src=&q
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5103
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
用于监听 DOM 事件的指令是 A.v-on B.v-model C.v-bind D.v-html
07-27
v-model 用于在表单元素和 Vue 实例的数据之间创建双向绑定。 C. v-bind 用于动态地绑定一个或多个属性或属性值。 D. v-html 用于将数据作为 HTML 解析并插入到 DOM 中。 希望这个回答能够帮助到您！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值