提出问题
在 a 标签添加 点击事件 后，点击时会 先触发事件，然后会 刷新页面
实际上： 我们只想 触发点击事件，不想 刷新页面
<div id="app">
<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{
name: "百度",
url: "http://www.baidu.com"
}
},
methods:{ // 在 methods 对象中定义方法
show:function(event){//第一个参数是事件对象
alert("hello")
console.log("hello")
}
}
}).mount('#app')
</script>
解决
通过 .prevent 阻止默认事件
<div id="app">
<a href="" v-on:click="show" >弹出对话框</a><br>
<a href="" v-on:click.prevent="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{
name: "百度",
url: "http://www.baidu.com"
}
},
methods:{ // 在 methods 对象中定义方法
show:function(event){//第一个参数是事件对象
alert("hello")
console.log("hello")
}
}
}).mount('#app')
</script>