Vue学习第四章-事件监听

最新推荐文章于 2022-09-10 12:20:25 发布

CodeKiang

最新推荐文章于 2022-09-10 12:20:25 发布

阅读量178

点赞数

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_43521592/article/details/104441492

版权

Vue学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件监听

事件监听即元素的响应函数。前面提到的methods就是用来写响应函数的。
语法：v-on:
语法糖：@

基本使用

基本使用，其实只要在需要响应的元素上写v-on:响应类型=‘响应函数名’就可以了。响应类型一般是js固定的，如click,input等

参数传递

事件监听并且不需要传参数的时候可以省略()
响应函数需要传一个参数但是调用时没加()，默认传event对象。如果加了()但没传参数，则形参为undefined
如果需要手动传递event对象，则传递参数$event

<body>
<div id="app">
<!-- 事件监听并且不需要传参数的时候可以省略() -->
<!-- 需要传一个参数但是没加()，默认传event对象。如果加了()但没传参数，则形参为undefined-->
  <button @click="increment">+</button>
<!-- 如果需要传递event对象，则传递参数$event -->
  <button @click="decrement('decrement',$event)">-</button>
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	data:{
  	  counter: 0
  	},
  	methods:{
  	  increment(name){
  	    console.log('========',name);
  	  },
  	  decrement(name,event){
  	    console.log('========',name,event);
  	  }
  	}
  })
</script>
</body>

v-on修饰符

这里先补充一下：
冒泡的概念：冒泡是指点击了A事件但B包含A，则B事件也会被触发。比如某个div包含了button，此时点击button，div的点击事件也会被触发
捕获的概念：捕获与冒泡相反，点击了子事件，父事件也会跟着执行。

<body>
<div id="app">
<!--  <div @click="divclick">  -->
<!--    <button @click="butclick">点我</button>   -->
<!--  </div>  -->

  <div @click="divclick">
    <!-- .stop修饰符停止冒泡  -->
    <button @click.stop="butclick">点我</button>
  </div>

  <div @click="divclick">
    <!-- .capture修饰符 捕获父事件  -->
    <!-- divclick跟butclick都会执行  -->
    <button @click.capture="butclick">点我</button>
  </div>
  
    <div @click="divclick">
    	<!-- .self修饰符 只有点击本身的时候才会触发  -->
    	<!-- 只有点击button，butclick才会执行  -->
   		<button @click.self="butclick">点我</button>
  	</div>
  
  <form action="baidu">
<!--    跳到百度   -->
<!--    <input type="submit" value="提交" @click="submitclick">-->
<!--    .prevent修饰符 拦截默认事件   -->
<!--    不会跳到百度，而是执行我的函数   -->
    <input type="submit" value="提交" @click.prevent="submitclick">
  </form>

<!-- .{keycode|keyAlias}  监听某个键盘的键帽,即只有点击了此键帽才会有响应 -->
  <input type="text" @keyup.enter="keyupEnter">

<!--  .once修饰符  只进行一次回调 -->
  <input type="button" value="点我啊" @click.once="onceclick">
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	methods:{
  	  divclick(){
  	    console.log('==========divclick');
  	  },
  	  butclick(){
  	    console.log('==========butclick');
  	  },
  	  submitclick(){
  	    console.log('==========submitclick');
  	  },
  	  keyupEnter(){
  	    console.log('==========@keyup.enter只有按了回车才会响应');
  	  },
  	  onceclick(){
  	    console.log('==========onceclick');
  	  }
  	}
  })
</script>
</body>

小结一下：
.stop 停止冒泡
.capture 捕获事件
.self 只有点击当前元素才会执行函数
.prevent 拦截默认事件
.{keycode|keyAlias} 监听某个键盘的键帽
.once 只会执行一次回调函数

另外，还要个系统修饰符
用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta