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

最新推荐文章于 2025-11-25 22:28:25 发布

原创最新推荐文章于 2025-11-25 22:28:25 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 专栏收录该内容

29 篇文章

订阅专栏

提示：
本文为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>