VUE学习：vue基础05————VUE语法对内容处理：事件绑定处理和事件修饰符

最新推荐文章于 2024-08-07 09:03:59 发布

北凉冬

最新推荐文章于 2024-08-07 09:03:59 发布

阅读量88

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/116949939

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

提示：
本文为VUE栏目：VUE学习：vue基础05————VUE语法对内容处理：事件绑定处理和事件修饰符

VUE学习：vue基础05————VUE语法对内容处理：事件绑定处理和事件修饰符

前言
VUE
- VUE语法对内容处理

前言

本文继续学习VUE语法对内容的处理。

提示：以下是本篇文章正文内容，下面案例可供参考

VUE

VUE语法对内容处理

事件绑定处理

v-on指令

v-on用来绑定事件，冒号后面跟事件名

@符号跟事件名是v-on的缩写形式

<body>
   <div id="app">
      <button type="button" v-on:click="getCount">{{count}}</button>
      <button type="button" @click="getCount2">{{count}}</button>
   </div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			count:0
		},
		methods:{
			getCount(){
				this.count=++this.count;
			},
			getCount2(){
				this.count=--this.count;
			}
		}
	});
</script>

事件修饰符

.stop

.stop修饰符表示事件的冒泡到此为止（阻止事件冒泡）

<body>
   <div id="app">
      <!---->
      <div style="height: 200px;width: 200px;background-color: pink" @click="divClick">
         <p style="height: 100px;width: 100px;background-color: yellow;" @click.stop="pClick">
            <button type="button" @click="btnClick">阻止冒泡</button>
         </p>
      </div>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
      },
      methods:{
         divClick(){
            console.log("您点击的是div");
         },
         btnClick(){
            console.log("您点击的是btn");
         },
         pClick(){
            console.log("您点击的是p");
         }
      }
   });
</script>

.capture

.capture修饰符表示事件捕获

<body>
   <div id="app">
      <div style="height: 200px;width: 200px;background-color: pink" @click.capture="divClick">
         <p style="height: 100px;width: 100px;background-color: yellow;" @click.capture="pClick">
            <button type="button" @click.capture="btnClick">阻止冒泡</button>
         </p>
      </div>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{

      },
      methods:{
         divClick(){
            console.log("您点击的是div");
         },
         btnClick(){
            console.log("您点击的是btn");
         },
         pClick(){
            console.log("您点击的是p");
         }
      }
   });
</script>

.prevent

.prevent修饰符阻止默认行为

.self修饰符表示该函数只在自身触发

<body>
   <div id="app">
      <a href="https://www.baidu.com" target="_blank" @click.prevent="aClick">有问题，先百度</a>
      <div style="height: 200px;width: 200px;background-color: pink" @click="divClick">
         <p style="height: 100px;width: 100px;background-color: yellow;" @click.self="pClick">
            <button type="button" @click="btnClick">阻止冒泡</button>
         </p>
      </div>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{

      },
      methods:{
         aClick(){
            console.log("您点击了a标签");
         },
         divClick(){
            console.log("您点击的是div");
         },
         btnClick(){
            console.log("您点击的是btn");
         },
         pClick(){
            console.log("您点击的是p");
         }
      }
   });
</script>

.once

.once修饰符表示该事件只生效一次

<body>
   <div id="app">
      <!--事件修饰符可以组合使用-->
      <a href="https://www.baidu.com" target="_blank" @click.prevent.once="aClick">有问题，先百度</a>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{

      },
      methods:{
         aClick(){
            console.log("您点击了a标签");
         },
         divClick(){
            console.log("您点击的是div");
         },
         btnClick(){
            console.log("您点击的是btn");
         },
         pClick(){
            console.log("您点击的是p");
         }
      }
   });
</script>

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础05————VUE语法对内容处理：事件绑定处理和事件修饰符

提示：本文为VUE栏目：VUE学习：vue基础05————VUE语法对内容处理：事件绑定处理和事件修饰符VUE学习：vue基础05————VUE语法对内容处理：事件绑定处理和事件修饰符前言VUEVUE语法对内容处理事件绑定处理v-on指令事件修饰符.stop.capture.prevent.once前言本文继续学习VUE语法对内容的处理。提示：以下是本篇文章正文内容，下面案例可供参考VUEVUE语法对内容处理事件绑定处理v-on指令v-on用来绑定事件，冒号后面跟事件名@符号跟事件
复制链接

扫一扫

专栏目录