⑤ Vue基础语法-事件处理🤞

avatar
开发工程师 @西安众邦网络科技有限公司

什么是事件？

事件是JS的基础知识，说学VUE，对js的基础知识得有些了解!

js事件指的是可以被Javascript侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述事件信息。

常见的事件有：

  • 用户点击页面上的某项内容
  • 鼠标经过特定的元素
  • 用户按下键盘的某个按键
  • 用户滚动窗口或改变窗口大小
  • 页面元素加载完成或加载失败

Vue监听事件

在vue中使用 v-on 指令监听DOM事件，在该事件触发是执行绑定的JavaScript代码！ 监听DOM：

<div id="app">
    <button type="button" v-on:click="count += 1">点击事件</button>
    <p>点击上边按钮的次数{{ count }}次！</p>
</div>
		
<script type="text/javascript">
var app = new Vue({
      el: '#app',
      data:{
        count: 0
	}
})
</script>

Vue事件处理方法

v-on指令中一般是不写事件处理逻辑的，而是将事件处理逻辑封装成一个函数，在mesthods中定义，v-on指令只需要对应绑定该方法即可！

示例：

<div id="app">
	<button type="button" v-on:click="greet">vue事件</button>
</div>

<script>
var app = new Vue({
	el: '#app',
	data:{
		count: 0
	},
	methods:{
		greet: function(event){
			// 'this'在方法里指向当前vue实例
			alert(this.count)
			// 'event'是原生的DOM事件
			if(event){
				alert(event.target.tagName)
			}
		}
	}
})
</script>

总结：

  • 定义方法在methods中构造
  • 定义的方法内的this 指向当前vue实例本身
  • 事件还可以通过 app.greet()方式调用

内联处理器中的方法

这个怎么理解呢？其实就是为定义的函数去传参，带参数调用！

例子：

<div id="app">
	<button v-on:click="say('hi')">Say hi</button>
	<button v-on:click="say('what')">Say what</button>
</div>

<script type="text/javascript">
var app = new Vue({
	el: '#app',
	methods:{
		say: function(message){
			alert(message)
			}
		}
	})
</script>

如果需要在内联处理器中访问原始DOM事件，可以将特殊变量$event参数传入方法！

<div id="app">
	<button v-on:click="say('hi', $event)">Say hi</button>
	<button v-on:click="say('what', $event)">Say what</button>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		methods:{
			say: function(message, event){
				if (event) {
					event.preventDefault()
				}
					alert(message)
					alert(event.target.tagName)
			}
		}
	})
</script>

事件修饰符

vue提供事件修饰符的目的是为了定义的方法内只有纯粹的数据逻辑，而不参与处理DOM事件的细节！

.stop 阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

.prevent 提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

.capture添加事件监听器时使用事件捕获模式，一种自上而下的处理方式

即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

<div v-on:click.capture="doThis">...</div>

.self 事件只在本身处理

<div @click.self="testOnClickMethods">
  testOnClickMethods
  <button @click="onSumClick(1, 2)">onSumClick</button>
</div>

默认情况下，当我们点击onSumClick时，事件向上传播，会调用testOnClickMethods。

如果我们不想调用testOnClickMethods的话，可以通过 @click.stop="onSumClick(1, 2)"来阻止事件冒泡，也可以通过 @click.self="testOnClickMethods" ， 来规定 testOnClickMethods 事件只由它本身处理

.once 点击事件将只会触发一次,可以用在自定义组件事件上！

<a v-on:click.once="doThis"></a>

.passive 滚动事件的默认行为将会立即触发

<div v-on:scroll.passive="onScroll" >...</div>

在默认情况下滚动的时候，浏览器会在整个事件处理完毕之后再触发滚动，因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault() （通知 Web 浏览器不要执行与事件关联的默认动作）。

.passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消。 这样可有效的提供浏览器的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

修饰符可以串联

<div @click="testOnClickMethods">
    testOnClickMethods
    <a href="http://www.baidu.com/" @click.prevent.self="alert('http://www.baidu.com/')">
        http://www.baidu.com/

        <button @click="onSumClick(1, 2)">onSumClick</button>
    </a>
</div>

修饰符可以串联,并且在进行修饰符串联的时候，顺序很重要。比如：

  • 如果我们使用 @click.prevent.self="alert('www.baidu.com/')" ,
  • 那么不仅阻止了 a标签中前往百度的跳转，也阻止了 a标签的点击事件。
  • 而如果使用 @click.self.prevent="alert('www.baidu.com/')" ,
  • 那么只阻止了 a标签的点击事件，在 testOnClickMethods 执行之后会跳转到百度

感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"掘金号。码云上有我们开源的商城项目，知识付费项目，JAVA版全开源商城系统，学习研究欢迎使用，老铁顺手点个star呗，老板奖励五毛，分你两毛五，😂😂关注我们保持联系！

avatar
文章
阅读
粉丝