vue各种事件监听实例

最新推荐文章于 2024-04-24 09:32:44 发布
最新推荐文章于 2024-04-24 09:32:44 发布
阅读量2.5k 收藏 16
点赞数 3
分类专栏： 前端 文章标签： vue javascript js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CharLINHeng/article/details/106880570
版权
计算属性的Get方法和Set方法

看代码说话:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小练习</title>
</head>
<body>
    <div id="calc">
        <a v-cloak="">{{name}}</a>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            counter:0
        }
        ,methods:{
        }
        ,computed: {
            name: {
                get: function(){
                    console.log("得值");
                    return 'AAAa';
                },
                set: function(){
                    console.log("设值");
                    
                }
            }
        }

    })

</script>

运行后如下:

20200620231219658
      可以知道，在计算属性对象中，里面定义一个name，通过定义name的set和get方法来对其值进行设置和获取，name获得get函数return的值，name通过set函数进行设置其值，或者说改变他的值。从运行图可以看到，当页面加载的时候，当我用到name的变量的时候，他会默认执行get方法，当我在控制台中改变其值，他会默认执行set方法。

methods中函数执行和computer计算的对比

这两个方式都可以对值进行拼接或者进行复杂操作。那么哪个方法性能比较好呢？答案是computed,原因在于computed内部有缓存。看代码如下来计算分别调用了函数多少次:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小练习</title>
</head>
<body>
    <div id="calc">
        <a v-cloak="">{{name}}</a>
        <a v-cloak="">{{name}}</a>
        <a v-cloak="">{{name}}</a>
        <a v-cloak="">{{name}}</a>
        <hr>
        <a v-cloak="">{{a()}}</a>
        <a v-cloak="">{{a()}}</a>
        <a v-cloak="">{{a()}}</a>
        <a v-cloak="">{{a()}}</a>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            counter:0
        }
        ,methods:{
            a :function(){
                console.log("执行了一次函数");
                return 'AAAa';
            }
        }
        ,computed: {
            name: {
                get: function(){
                    console.log("得值");
                    console.log("执行了一次 计算属性的get方法");
                    return 'AAAa';
                },
                set: function(){
                    console.log("设值");
                    
                }
            }
        }

    })

</script>
块级作用域

在这里插入图片描述

那什么时候改用let，什么时候用const呢。是变量则用let，静态常量则是const。

事件监听

上面已经数说了，标签点击事件，下面我们来说一下，v-on的语法糖，也就是类似v-bind的语法糖为:,, v-on的语法糖为@。代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <a id="num">{{num}}</a>
        <button @click="add">+1</button>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            num: 0
        }
        ,methods:{
            add: function(){
                this.num ++;
            }
        }
        ,computed: {
        }
    })

</script>

运行效果如下:

在这里插入图片描述

**传参情况，**代码如下:

​

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <a id="num">{{num}}</a>
        <button @click="add(num,$event)">*2</button>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            num: 1
        }
        ,methods:{
            add: function(param,event){
                console.log(param);
                console.log(event);
                this.num = param * 2;
            }
        }
        ,computed: {
        }
    })

</script>

运行如下：

在这里插入图片描述

监听获得event对象，里面可以有点击事件详情，代码如下:

在这里插入图片描述

说明：

在上面的代码中，

<button @click="add(num,$event)">*2</button>

num则被vue解释成变量，$event带有美元符号的修饰的变量，则被视为是事件。就是说，当你在网页上对键盘或者鼠标有动作的时候，他会生成事件，这个事件可以被检测到，可以进行传递。

修饰符阻止冒泡

在vue中，我们如果没有组织冒泡，那么请看是下面这样:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc" @click="adda">
        <button @click="add">点我</button>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            num: 1
        }
        ,methods:{
            add: function(){
                console.log("点击了按钮")
            }
            ,adda: function(){
                console.log("点击了div")
            }
        }
        ,computed: {
        }
    })

</script>

运行结果如下:

在这里插入图片描述

那么vue的阻止事件冒泡方法很简答，代码修改如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc" @click="adda">
        <a >我不是按钮</a>
        <button @click.stop="add" >点我</button>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            num: 1
        }
        ,methods:{
            add: function(){
                console.log("点击了按钮")
            }
            ,adda: function(){
                console.log("点击了div")
            }
        }
        ,computed: {
        }
    })

</script>

运行如下:

在这里插入图片描述

vue回车事件获取输入框的值

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc" @click="adda">
        <a >我不是按钮</a>
        <button @click.stop="add" >点我</button>
        <input type="text" @keyup.enter="console">
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            num: 1
        }
        ,methods:{
            add: function(){
                console.log("点击了按钮")
            }
            ,adda: function(){
                console.log("点击了div")
            }
            ,console: function(event){
                console.log(event.target.value);
            }
        }
        ,computed: {
        }
    })

</script>

运行效果如下:

在这里插入图片描述

通过使用@Keyup.enter事件来进行对输入框input的事件监听。

Vue的阻止表单提交的监听

通常情况下，默认form的submit一点击提交，就立即跳转，情况如下:

在这里插入图片描述

我们有时候希望点击提交submit类型的input按钮的时候，不要立即跳转到action页面，那么我们可以通过如下代码来实现:

​

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
       <form action="www.erremall.top" @click.prevent="judge" >
            <input type="submit">
       </form>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            num: 1
        }
        ,methods:{
            judge: function(){
                //在这里，对数据进行校验。不先提交
                console.log("来了这里，没有立即跳转");
            }
        }
        ,computed: {
        }
    })

</script>

运行效果如下:

在这里插入图片描述

码农藏经阁
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue各种事件监听实例(小结)
10-15
主要介绍了vue各种事件监听实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue学习笔记三（监听和事件处理小案例）
清风无虑skr的博客
06-13 412
vue监听watch Vue.js 监听属性 watch，可以通过 watch 来响应数据的变化,使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数 案例一：实现加减乘除计算器功能 在第一个表单中输入数字，然后通过下拉列表选择要进行的运算，然后再第二个表单中输入数字后，结果便会自动显示再最后一个表单中 <!DOCTYPE html> <html> <head> <meta charset="ut
【Vue】常见的事件梳理
最新发布
qq_51933234的博客
04-24 1075
个人觉得这篇的内容还是很重要的，这些事件是平时常用的，我们在写项目中也会经常使用。熟悉这些事件，对我们理解Vue有很多好处的。
vue项目使用watch监听器监听数据变化
Bruce小鬼
03-02 1765
在开发项目中，有些场景是当用户点击某个按钮后改变某个属性的值，这个值改变时需要触发事件做一些事情。属性值什么时候改变是没法提前判断的，因此需要有个监听的角色，当监听到值改变后触发事件。
【vue】学习vue之侦听器，应用场景+注意点+真实案例
花椒和蕊的博客
12-24 1405
侦听器：允许开发者监视数据的变化，从而针对数据的变化做特定的操作 侦听器本质上是一个函数，要监听哪个数据的变化，就把数据名作为方法名即可 const vm = new Vue({ el:'#app', data:{ username；'' }, watch:{ //监听data中定义的username值的变化 //newVal是变化后的新值，oldVal是变化之前的旧值 username(newVal,oldVal){ console.log(newVal,oldVal) } } }) 应用场景：侦听–
Vue 绑定使用 touchstart touchmove touchend
Joey的博客
09-05 2万+
Vue 简单绑定 touchstart touchmove touchend
Vue如何实现监听组件原生事件
10-15
总结起来，Vue中的`.native`修饰符使得我们可以在组件级别监听原生DOM事件，而`ref`属性则提供了对组件实例或DOM元素的直接访问。这种机制简化了组件间的通信，使得我们可以灵活地处理复杂的交互逻辑。通过熟练掌握...
Vue 实例事件简单示例
10-16
总结起来，这个Vue实例事件的示例展示了如何使用Vue的事件系统来处理用户交互。`$on`用于添加事件监听器，`$emit`用于触发事件，`$once`用于添加一次性事件监听器，而`$off`则用于移除事件监听器。理解并熟练运用...
使用 vue 实例更好的监听事件及vue实例的方法
10-17
主要介绍了使用 vue 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法，单独监听事件，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 中监听document.body.scrollTop 值总为0的解决方法
yw1376394716的博客
06-11 1万+
最近在vuex项目中碰到了这个问题，监听页面滚动时 document.body.scrollTop一直都是0，捣鼓了好久最后找到了几个解决方法 方法一：浏览器兼容有问题 写个兼容方法就行 // chrome || firefox || IE： // document.documentElement.scrollTop document.body.scrollTop // safari: window.pageYOffset let scrollTop= document.documentEleme
Vue监听用户指定时间内长未操作系统
qq_52337177的博客
03-21 1372
Vue监听用户指定时间内长未操作系统
Vue中的事件监听
helongzhi的博客
07-29 5421
Vue中的事件监听
Vue中监听属性的小案例
最爱喝怡宝的博客
12-06 703
今天学习了一下在jq22官网发现的一个小案例，里面 运用到蛮多的 watch 监听事件和一个过滤器的小方法，在这里仿一下该案例。 先查看一下成型后的效果： 1.先做基础样式和布局 因为页面中数据都是和Vue 实例数据中心进行绑定的，所以再写布局时，就直接把数据通过 插值表达式去 表达了 布局部分： <div id="app"> <p> 买入单价：<input type="number" v-model="mairu..
Vue的监听属性
richest_qi的博客
01-25 9002
文章目录监听属性深度监听 监听属性 监听的属性发生变化时，会自动调用回调函数，执行相关操作。 监听属性有两种写法，如下： new Vue()中传入watch配置。 通过vm.$watch进行监听。 看个具体的例子。 在new Vue()中传入watch配置。 <body> <div id="root"> <div>今天天气很{{info}}</div><br/> <button @click="
vue中事件监听watch
热门推荐
菜鸟搬砖记
08-23 4万+
vue中watch实际上是用来监听vue实例中的数据变化 监听String <template> <div @click="stringClick">{{msg}}</div> </template> <script> export default { name: "jianting", data() { ...
事件监听
qq_33879627的博客
09-21 193
（六）事件监听 6.1 v-on的基本使用 ​ 在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-
vue监听事件
Nikki_u的博客
03-10 6900
一、准备数据和样式 <template> <div> {{ name }} <br> {{obj.age}} <br> {{arr}} <button @click="fn">点击</button> </div> </template> data() { return { name: "zs", obj:{
Vue 中的事件处理和实例生命周期（五）
d2235405415的博客
03-15 874
本章我们会学习 Vue 中的事件处理以及各种事件修饰符、监听属性、计算属性以及 Vue 实例的生命周期。
vue中的监听事件（watch）
SeeU
07-29 1万+
使用watch这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理 html: 在html里写下那个事件会让触发methods让data发生变化 <input type="text" v-model="firstname" @keyup="getFullname">+ data: 这里是data里面的值 data: { firstname: "", lastname: "", ful
vue3 复杂监听实例
04-04
在 Vue3 中，可以使用 `watch` API 来监听数据的变化，这个 API 支持监听多个属性，并且可以设置深度监听。 以下是一个示例，演示了如何监听一个对象中的多个属性以及如何设置深度监听： ```js import { reactive,...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值