Vue初体验（四），关于事件v-on

最新推荐文章于 2022-09-05 20:52:40 发布
最新推荐文章于 2022-09-05 20:52:40 发布
阅读量166 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36486737/article/details/82707076
版权

事件是每个框架都绕不过去的话题，实现的方式各有千秋，而Vue中，我们使用v-on的指令来进行事件监听。
1、使用v-on监听事件。示例代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Vue学习</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <style>
        .style{ color: red }
    </style>
    <body>
        <div id="app">
            <button v-on:click="message+=1">click</button>
            <p>被点击了{{message}}次</p>

        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 0
                }
            })
        </script>
    </body>
</html>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

2、正常情况下，事件应该写在函数中，而我们需要在Vue这个对象的参数中配置methods属性，里面就是相应的一些方法，这个方法通过this能访问数据。代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Vue学习</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <style>
        .style{
            color: red }
    </style>
    <body>
        <div id="app">
            <button v-on:click="clicks">click</button>

        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 0
                },
                methods: {
                    clicks: function(){
                        alert("发生点击事件了")
                    }
                }
            })
        </script>
    </body>
</html>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

3、关于事件修饰符。
在Vue中，我们不得不牵扯一些dom相关的东西，比如阻止默认行为，阻止事件冒泡等等，但是正常情况下，我们应该着手处理的是数据逻辑，而不是和dom相关的东西，尽管我们确实能在事件中处理。（这里应该这么理解，MVC思想中，和dom相关的处理尽可能的隔离出去，我们应该专注于数据和逻辑），这就是事件修饰符的存在意义。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。
.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
  
  
  • 1
  • 2
  • 3
  • 4
whao-csdn
关注
专栏目录
Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）
百赢出品，必属精品
04-23 1906
列表渲染是指将数据集合（通常是数组）中的每个数据项渲染成相应的 DOM 元素，通常用于显示列表、表格等内容。双向绑定是指视图（DOM）与数据模型之间的双向关联，当数据模型发生变化时，视图会更新；反之亦然，当用户在视图中输入内容时，数据模型会相应地更新。
详解vue表单验证组件 v-verify-plugin
08-30
<button v-on:click="submit">确认 ``` 这里的 `v-verify.grow1` 修饰符表示验证规则，`username` 和 `pwd` 对应Vue实例中的数据属性。`v-verified` 指令用于显示验证错误信息。 在Vue实例中，你需要定义验证...
Vue指令之v-on
热门推荐
俊而不逊的博客
12-07 1万+
Vue指令之v-on 目录 Vue指令之v-on 1.v-on怎么使用？ 2.事件名到底写什么呢？ 3.方法名在哪里定义呢？ 4.v-on的简写 5.访问data中的数据,通过this关键字 6.总结 v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。 我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需..
v-bind和v-on
weixin_30586257的博客
02-14 970
v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href <a :href="{{url}}">aa</a> v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click <a @click="get()">aa</a> 最好不要用@，因为asp.net mvc页面识别@ 不太好 ...
v-on
弱智de克星
11-08 341
为了与用户交互，可以用v-on指令绑定一个事件监听器，通过该监听器调用Vue实例中定义的方法：<html> <head> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p>{{msg}}</p> <butt
关于vue3默认把所有onSomething当作v-on事件绑定的思考
10-15
Vue3 框架在设计上进行了一些重大改进，其中包括将所有以 `on` 开头的属性默认处理为 `v-on` 事件绑定。这一改变的目的是为了保持向后兼容性和简化组件接口。在 Vue2 中，我们通常使用 `v-on` 指令来监听并处理组件...
vue2.0移动端滑动事件vue-touch的实例代码
10-17
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper"> <div class="menu-container" ref="menuContainer"> <!-- 内容区域 --> </v-touch> export default { name: '...
V-on指令
2021_fc的博客
09-02 141
V-on v-on:click/@click <div id="app"> <h2>当前计数:{{counter}}</h2> <!-- 方法一 --> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> <!-- 方法二 --> <
v-once
弱智de克星
11-08 2600
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：<html> <head> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p>可以改变：{
v-on指令
liuguoxuanvip的博客
02-11 1258
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-on指令&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/di
Vue中的v-on
m0_72694993的博客
09-05 5413
1.我们解决这个事件冒泡的第一种方法是通过在event(事件)下的stopPropagation()方法,值得注意的是我们是点击text2区域才出现这种情况的，所以我们应该阻止text2冒泡，应该在text2方法下加入改代码；3.当我们在@keyup后边加上.enter的时候，即@keyup.enter=""，只有再点击回车的时候才会执行绑定的函数，也可以用enter的键盘码 即用@keyup.81和enter效果相同。2.@:click="函数名字"是v-on:click的简写模式，效果和用法是一样的；
v-on事件
qq_44822110的博客
03-17 171
v-on事件绑定方法 可以简写成 @符号 在vue实例中，方法写在methods:{ } 里，与data:{ } 平级 @click=“handle()” 可以传参，把需要传递的参数写在括号里，在methods中就可以接收到 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...
04 v-on
Civitasv
02-01 122
vue中提供v-on事件绑定机制，用于绑定事件
1-6.vue指令：v-on指令
weixin_45660035的博客
12-06 214
1-6.vue指令：v-on指令 v-on的作用 v-on是绑定事件监听器。通过触发某个特定事件(如页面点击事件)时，触发相应的行为(打印语句或跳转等等)。v-on就是在绑定特定事件自行处理相关结果。v-on的语法糖为："@"。 v-on的使用 1.代码展示 <body> <div id='app'> <!-- 语法展示 --> <button v-on:click="btnClick">{{message}}</button&gt
vue指令 —— v-on：
牛涵熙的博客
12-06 823
v-on 指令的总结
Vue事件处理详解：v-on用法与方法实现
`v-on:click`是Vue中最常见的事件绑定，如例子所示： ```html <button v-on:click="counter+=1">Add 1 按钮被点击了{{counter}}次. ``` 在这个例子中，每点击一次按钮，`counter`属性会递增1。这里的`counter`是Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值