Vue.js学习笔记6.事件处理

<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="http://bj.xdf.cn/huodong/js/jquery-1.12.3.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<style>
.active {
	color: red;
}
</style>
</head>
<body>
	<div id="example-1">
	  <button v-on:click="counter += 1">Add 1</button>
	  <p>The button above has been clicked {{ counter }} times.</p>
	</div>
	<div id="example-2">
	  <!-- `greet` 是在下面定义的方法名 -->
	  <button v-on:click="greet">Greet</button>
	</div>
	<div id="example-3">
	  <button v-on:click="say('hi')">Say hi</button>
	  <button v-on:click="say('what')">Say what</button>
	  <button v-on:click="warn('Form cannot be submitted yet.', $event)">
		Submit
	  </button>
	  <!--
	    阻止单击事件继续传播
		<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>
		
		
		.stop - 调用 event.stopPropagation()。
		.prevent - 调用 event.preventDefault()。
		.capture - 添加事件侦听器时使用 capture 模式。
		.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
		.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
		.native - 监听组件根元素的原生事件。
		.once - 只触发一次回调。
		.left - (2.2.0) 只当点击鼠标左键时触发。
		.right - (2.2.0) 只当点击鼠标右键时触发。
		.middle - (2.2.0) 只当点击鼠标中键时触发。
		.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
		
		使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
		
		
		
		
		
		按键修饰符

		在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

		只有在 `keyCode` 是 13 时调用 `vm.submit()`
		<input v-on:keyup.13="submit">

		记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

		<input v-on:keyup.enter="submit">

		缩写语法
		<input @keyup.enter="submit">

		全部的按键别名：

			.enter
			.tab
			.delete (捕获“删除”和“退格”键)
			.esc
			.space
			.up
			.down
			.left
			.right

		可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

		// 可以使用 `v-on:keyup.f1`
		Vue.config.keyCodes.f1 = 112
	  -->
	</div>
	<script>
		var example1 = new Vue({
		  el: '#example-1',
		  data: {
			counter: 0
		  }
		})
		var example2 = new Vue({
		  el: '#example-2',
		  data: {
			name: 'Vue.js'
		  },
		  // 在 `methods` 对象中定义方法
		  methods: {
			greet: function (event) {
			  // `this` 在方法里指向当前 Vue 实例
			  alert('Hello ' + this.name + '!')
			  // `event` 是原生 DOM 事件
			  if (event) {
				alert(event.target.tagName)
			  }
			}
		  }
		})
		new Vue({
		  el: '#example-3',
		  methods: {
			say: function (message) {
			  alert(message)
			},
			warn: function (message, event) {
			  // 现在我们可以访问原生事件对象
			  if (event) event.preventDefault()
			    alert(message)
		    }
		  }
		})
	</script>
</body>
</html>
Vue.js学习笔记6.事件处理

猜你喜欢
