以下是代码源码,可直接复制运行:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试实例009</title>
<script src="vue.js"></script>
</head>
<body>
“:” 是指令 “v-bind”的缩写,“@”是指令“v-on”的缩写;“.”是修饰符。
<!-- 阻止单击事件继续传播 -->
<div id="example">
<h2>主要是理解stop的作用</h2>
<div @click="parentEvent()">
<a @click="test01()">v-on:click阻止不了单击事件继续传播,父事件处理程序被执行</a>
<br>
<a @click.stop="test01_stop()">
v-on:click.stop阻止单击事件继续传播,阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
</a>
</div>
<h2>主要是理解prevent的作用</h2>
<div>
<a href="https://www.baidu.com" @click="test02()">我去百度(无法阻止事件的默认行为)</a>
<br>
<a href="https://www.baidu.com" @click.prevent="test02_prevent()">我不去百度(阻止事件的默认行为)</a>
</div>
<h2>主要是理解submit结合prevent的刷新作用</h2>
<form @submit="test02_01()">
简单输入(提交事件重新加载页面):
<input type="text" v-model="formData1.name">
单选:
<input type="radio" v-model="formData1.open" value="1"> 开
<input type="radio" v-model="formData1.open" value="0"> 关
下拉选择框:
<select v-model="formData1.weidao">
<option value="xl">香辣</option>
<option value="ml">麻辣</option>
<option value="qt">清汤</option>
<option value="yy">鸳鸯</option>
</select>
<button type="submit">确定</button>
</form>
<form @submit.prevent="test02_01_prevent()">
简单输入(提交事件不再重载页面):
<input type="text" v-model="formData2.name">
单选:
<input type="radio" v-model="formData2.open" value="1"> 开
<input type="radio" v-model="formData2.open" value="0"> 关
下拉选择框:
<select v-model="formData2.weidao">
<option value="xl">香辣</option>
<option value="ml">麻辣</option>
<option value="qt">清汤</option>
<option value="yy">鸳鸯</option>
</select>
<button type="submit">确定</button>
</form>
<h2>主要是理解prevent.self的作用</h2>
<div @click="parentEvent()">
<a href="https://www.baidu.com" @click="test03()">我去百度
<div @click="test03_div()">divtest03_div0标签</div>
<div @click="test03_div()">divtest03_div1标签</div>
<div @click="test03_div()">divtest03_div2标签</div>
</a>
<br>
<a href="https://www.baidu.com" @click.prevent.self="test03_prevent_self()">我不去百度
<div @click="test03_prevent_self_div()">test03_prevent_self0标签</div>
<div @click="test03_prevent_self_div()">test03_prevent_self1标签</div>
<div @click="test03_prevent_self_div()">test03_prevent_self2标签</div>
</a>
</div>
<h2>主要是理解self.prevent的作用</h2>
<div @click="parentEvent()">
<a href="https://www.baidu.com" @click="test04()">我去百度
<div @click="test04_div()">divtest04_div0标签</div>
<div @click="test04_div()">divtest04_div1标签</div>
<div @click="test04_div()">divtest04_div2标签</div>
</a>
<br>
<a href="https://www.baidu.com" @click.self.prevent="test04_self_prevent()">我不去百度
<div @click="test04_self_prevent_div()">test04_self_prevent0标签</div>
<div @click="test04_self_prevent_div()">test04_self_prevent1标签</div>
<div @click="test04_self_prevent_div()">test04_self_prevent2标签</div>
</a>
</div>
<h2>主要是理解修饰符可以串联(例如:click.stop.prevent或者click.prevent.stop)的作用</h2>
<div @click="parentEvent()">
<a href="https://www.baidu.com" @click="test05()">
我去百度(无法阻止事件的默认行为以及阻止不了单击事件继续传播,父事件处理程序被执行)
</a>
<br>
<a href="https://www.baidu.com" @click.stop.prevent="test05_stop_prevent()">
我不去百度(阻止事件的默认行为以及阻止单击事件继续传播,阻止事件冒泡到父元素,阻止任何父事件处理程序被执行)
</a>
<br>
<a href="https://www.baidu.com" @click.prevent.stop="test05_prevent_stop()">
我不去百度(阻止单击事件继续传播,阻止事件冒泡到父元素,阻止任何父事件处理程序被执行以及阻止事件的默认行为)
</a>
</div>
<h2>添加事件监听器时使用事件捕获模式(即内部元素触发的事件先在此处理,然后才交由内部元素进行处理)</h2>
<div @click="parentEvent()">
第一层
<div @click="test06()">
第二层
<div @click="test06_third()">
第三层
</div>
</div>
<p> 正常情况下:点击第三层时候一层一层冒泡,先第三层=》第二层=》第一层</p>
</div>
<span>====================</span>
<div @click="parentEvent()">
第1层
<div @click.capture="test06_capture()">
第2层
<div @click="test06_third()">
第3层
</div>
</div>
<p> 使用了关键字:capture 点击第三层时候,先第2层=》第3层=》第1层</p>
</div>
<h2>只当在 event.target 是当前元素自身时触发处理函数(即事件不是从内部元素触发的)</h2>
<div @click="parentEvent()">
第一层
<div @click="test07()">
第二层
<div @click="test07_third()">
第三层
</div>
</div>
<p> 正常情况下:点击第三层时候一层一层冒泡,先第三层=》第二层=》第一层</p>
</div>
<span>====================</span>
<div @click="parentEvent()">
第1层
<div @click.self="test07_self()">
第2层
<div @click="test07_third()">
第3层
</div>
</div>
<p>
使用了关键字:self 点击第三层时候,先第三层 =》第一层<br>
第二层的话,直接跳过不是我自己点击的,不出来
</p>
</div>
<h2>点击事件将只会触发一次</h2>
<a @click.once="test08()">点击事件将只会触发一次</a>
<h2>这是普通button,主要是用来测试method顺序的</h2>
<div>
<button @click="greet()">Greet</button>
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
</div>
</div>
<script>
var example = new Vue({
el: '#example',
data: {
name: 'Vue.js',
formData1: {
name: "",
opn: "",
weidao: ""
},
formData2: {
name: "",
opn: "",
weidao: ""
}
},
// 在 `methods` 对象中定义方法
methods: {
greet(event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
/* if (event) {
alert(event.target.tagName)
}*/
},
warn(message, event) {
// 现在我们可以访问原生事件对象
/* if (event) {
event.preventDefault()
}*/
alert(message)
},
parentEvent(){
alert("我是父节点,被执行了!")
},
test01(){
alert("我是没有stop后缀的click(v-on:click)")
},
test01_stop(){
alert('我是有stop后缀的click(v-on:click.stop)')
},
test02(){
alert("我是没有prevent后缀的click(v-on:click)")
},
test02_prevent() {
alert('我是有prevent后缀的click(v-on:click.prevent)')
},
test02_01() {
alert("我是没有prevent后缀的submit(v-on:submit),我要刷新页面啦")
},
test02_01_prevent() {
alert('我是有prevent后缀的submit(v-on:submit.prevent),我不不不不刷新页面啦')
},
test03() {
alert("我是没有prevent.self后缀的click(v-on:click)")
},
test03_div() {
alert("我是没有prevent.self后缀的click(v-on:click),a标签里面的div")
},
test03_prevent_self() {
alert('我是有prevent.self后缀的click(v-on:click.prevent.self)')
},
test03_prevent_self_div() {
alert('我是有prevent.self后缀的click(v-on:click.prevent.self),a标签里面的div')
},
test04() {
alert("我是没有self.prevent后缀的click(v-on:click)")
},
test04_div() {
alert("我是没有self.prevent后缀的click(v-on:click),a标签里面的div")
},
test04_self_prevent() {
alert('我是有self.prevent后缀的click(v-on:click.self.prevent)')
},
test04_self_prevent_div() {
alert('我是有self.prevent后缀的click(v-on:click.self.prevent),a标签里面的div')
},
test05() {
alert("我是没有prevent后缀的click(v-on:click)")
},
test05_stop_prevent() {
alert('我是有stop.prevent后缀的click(v-on:click.stop.prevent)')
},
test05_prevent_stop() {
alert('我是有prevent.stop后缀的click(v-on:click.prevent.stop)')
},
test06() {
alert("我是没有capture后缀的click(v-on:click)")
},
test06_capture() {
alert('我是有capture后缀的click(v-on:click.capture)')
},
test06_third() {
alert('我是测试capture第三层div的点击事件啦')
},
test07() {
alert("我是没有self后缀的click(v-on:click)")
},
test07_self() {
alert('我是有self后缀的click(v-on:click.self)')
},
test07_third() {
alert('我是测试self第三层div的点击事件啦')
},
test08() {
alert("你点击我无数次次,我就只响应一次(v-on:click.once)")
}
}
})
</script>
</body>
</html>
以下是代码运行结果: