vue 入门笔记 07 模板语法_事件处理

模板语法_事件处理

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		#div1{
			width:  500px;
			height: 500px;
			background: darkcyan;
		},
		#div2{
			width:  100px;
			height: 100px;
			background: red;
		},
	</style>
	<body>
		
		Vue.config.keycodes.f1 = 112;
		
		
		<div id="app">
			<button v-on:click="addNum()">累加(标准写法)</button>  {{num}}
			<button @click="addNum()">累加(简便写法)</button>  {{num}}
			
			<p></p>
			<a href="https://google.com" v-on:click="run" >google</a>
			<a href="https://google.com" v-on:click.prevent="run" >google</a>
			
			<div id="div1" v-on:click="parent()">
				<div id="div2" v-on:click.stop="child()"> <!-- 阻止事件向下传递 -->
					
				</div>				
			</div>
			
			
		</div>
		

		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<script>
			new Vue({
				el:"#app",
				data:{
					message:"",
					num:99
				},
				methods:{
					addNum:function(){
						this.num++;
					},					
					run:function(){
						alert("run");
					},
					parent:function(){
						alert("parent");
					},
					child:function(){
						alert("child");
					},
				},
				computed:{
					
				},
			})
		</script>
		
		
	</body>
</html>

小结：

事件处理器：v-on:事件名称=“方法” 或者方法()

<button v-on:click="addNum()">累加(标准写法)</button> {{num}}

简写：@事件名称=“方法” 或者方法()

<button @click="addNum()">累加(简便写法)</button> {{num}}

事件修饰符：

.stop

.prevent

.capture

.self

.once

.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

阻止冒泡：@click.stop

默认取消: @click.prevent

串联： @keyup.prevent.stop.37.等等

按键修饰符：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right