vue3教程-事件修饰符-阻止默认事件 .prevent-马育民老师

上接：[vue3教程-事件修饰符介绍](https://www.malaoshi.top/show_1GWRfVHQkag.html "vue教程-事件修饰符介绍")

# 提出问题

在 `a` 标签添加 **点击事件** 后，点击时会 **先触发事件**，然后会 **刷新页面**

如下图案例：

[![](https://www.malaoshi.top/upload/0/0/1GWRfgigmqU.png)](https://www.malaoshi.top/upload/0/0/1GWRfgigmqU.png)

在输入框中输入内容（这里演示，可随意输入）

在 `a` 标签添加 **点击事件** ，弹出提示框，关闭提示框后，会 **刷新页面**，由于 **刷新页面**，导致 **输入框的内容消失**

```
<div id="app">
    <input value=""><br>
    <a href="" v-on:click="show" >弹出对话框</a>
</div>
```

```
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
	"imports": {
		"vue": "./js/vue.esm-browser@3.5.13.js"
	}
}
</script>
<script type="module">
  import { createApp } from 'vue'
 
  createApp({
	data: function(){
		return{
	        msg: 'Hello Vue!',
	        panel:'student'
		}
	},
	methods:{ // 在 methods 对象中定义方法
		show:function(event){//第一个参数是事件对象
			alert("hello")
			console.log("hello")
		}
	}
	
  }).mount('#app')
</script>
```

### 分析

在 `a` 标签添加 **点击事件** 后，点击时会 **先触发事件**，然后会 **刷新页面**，那么要在vue中，**阻止 默认的刷新事件**

### 解决

通过 `.prevent` 阻止默认事件

```
<div id="app">
	<input value=""><br>
	<a href="" v-on:click="show" >弹出对话框</a><br>
	<a href="" v-on:click.prevent="show" >弹出对话框（不刷新）</a>
</div>
```

原文出处：http://malaoshi.top/show_1GWRfn3uvny.html