Vue的事件处理

Vue的事件处理

vue的事件处理主要分为三类：

• 事件的绑定监听
  1. v-on:xxx=“fun”
  2. @xxx=“fun”
  3. @xxx=“fun(参数)”
  4. 默认事件形参: event
  5. 隐含属性对象: $event
• 事件修饰符
  1. prevent : 阻止事件的默认行为 event.preventDefault()
  2. stop : 停止事件冒泡 event.stopPropagation()
• 按键修饰符
  1. keycode : 操作的是某个 keycode 值的键
  2. keyName : 操作的某个按键名的键(少部分)

具体使用代码如下：

<div id="demo">
			<h2> 1.事件绑定</h2>
			<button @click="test1">test1</button>
			<button @click="test2('hello world')">test2</button>
			<button @click="test3()">test3</button>
			<button @click="test4('123',$event)">test4</button>

			<h2> 2.事件修饰符</h2> >

			<div style="width: 200px; height: 200px; background: red;" @click="test5">
				<div style="width: 100px; height: 100px; background: blue;" @click.stop="test6"></div>
			</div>
			<a href="http://www.baidu.com" @click.prevent="test7">百度</a>

			<h2> 3.按键修饰符</h2>
			<!--
            	描述：我们想要的效果是我们输入内容，然后按enter键，显示我们输入的内容
            	直接在方法后面加上.enter或者.13即可
            -->
			<input type="text" @keyup.enter="test8" />

</div>

		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#demo',
				data: {
				},
				methods: {
					test1: function() {
						console.log('test1');
					},
					test2: function(msg) {
						console.log(msg);
					},
					test3: function(event) {
						console.log(event.target.innerHTML);
					},
					test4: function(number, event) {
						console.log(number + '---' + event.target.innerHTML);
					},
					test5: function() {
						console.log('out');
					},
					//阻止事件冒泡
					test6: function() {
						//event.stopPropagation();
						console.log('inner');
					},
					test7: function() {
						//event.preventDefault();
						console.log('点击了');
					},
					test8: function(event) {
						/*if(event.keyCode === 13) {
							console.log(event.target.value + ' ' + event.keyCode);
						}*/

						console.log(event.target.value + ' ' + event.keyCode);
					}
				}
			})
		</script>

效果如下：