<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../../vue.js/vue.js"></script>
</head>
<body>
<!-- <div id="app">
<p></p>
<h3 @click="xd">点击</h3>
<a href="https://xdclass.net" @click="xd">跳转</a>
<div @click="xd">
<a href="https://xdclass.net" @click.prevent.stop="xd">小滴课堂</a>
</div>
<div @click.once="xd">一次事件</div>
<div>键盘事件 <input type="text" @keyup.enter="change" /></div>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
name: '小滴课堂',
},
methods: {
xd() {
// alert(event.target.innerText);
alert(111);
},
change() {
console.log(222);
},
},
});
</script> -->
<div id="app">
<h3 v-on:click="xd">fdsafas</h3>
<a href="https://xdclass.net" v-on:click="xd">跳转到小滴课堂</a>
<!-- 阻止了跳转 -->
<a href="https://xdclass.net" v-on:click.prevent="xd">跳转到小滴课堂</a>
<br>
<!-- 冒泡 -->
<div v-on:click="xd">
现在是冒泡时刻
<a href="https://xdclass.net" v-on:click="xd">跳转到小滴课堂</a>
</div>
<br>
<!-- 阻止冒泡 -->
<div v-on:click="xd">现在是阻止冒泡时刻
<a href="https://xdclass.net" v-on:click.stop="xd">跳转到小滴课堂</a>
</div>
<br>
<!-- 阻止冒泡和跳转 -->
<div v-on:click="xd">
不冒泡也不跳转
<a href="https://xdclass.net" v-on:click.prevent.stop="xd"></a>
</div>
<br>
<!--只出现一次 -->
<div>
<a href="hhttps://xdclass.net" v-on:click.once="xd"></a>
</div>
<br>
<!-- 键盘事件到最后enter才触发 -->
<h3 v-on:keyout.enter='change'>键盘事件 </h3>
<input type="这是一个说明">
<br>
</div>
<script>
Vue.config.productionTip = false
new Vue(
{
el:"#app",
data:{
name:"小滴课堂",
},
methods:{
// 事件取到了标签中的值，相当于传入了一个方法，该方法能够取到该标签中的值
xd(event){
alert(event.target.innerText);
},
change(){
console.log("键盘事件当enter时才触发")
}
}
}
)
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
