Vue-事件处理

事件的基本使用

1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2. 事件的回调需要配置在methods对象中，最终会在vm上；
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对像
5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<div id="app">

			<h2>欢迎来到{{name}}学习</h2>

			<!-- <button v-on:click="showInfo">点我提示信息</button> -->

			<button @click="showInfo1">点我提示信息1（不传参）</button>

			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

		</div>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el:'#app',
		data:{
			name:'前端',
		},
		methods:{
			showInfo1(event){
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！')
			},
			showInfo2(event,number){
				console.log(event,number)
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！！')
			}
		}
	})
</script>

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

1.Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

• .stop - 阻止冒泡
• .prevent - 阻止默认事件
• .capture - 阻止捕获
• .self - 只监听触发该元素的事件
• .once - 只触发一次
• .left - 左键事件
• .right - 右键事件
• .middle - 中间滚轮事件
• .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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<ul @wheel.passive="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>

键盘事件

1.Vue中常用的按键别名：

回车 => enter

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

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

控制 => ctrl

可选 => alt

上档 => shift

元 => meta（也就是那个win键）

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
 (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
 (2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键，例如@keydown.13（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

	<!-- 准备好一个容器-->
	<div id="app">
		<h2>欢迎来到{{name}}学习</h2>
		<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    Vue.config.devtools = true //浏览器的开发者工具中使用 Vue DevTools 插件来调试和检查 Vue 应用的状态和组件树
	Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

	new Vue({
		el:'#app',
		data:{
			name:'前端'
		},
		methods: {
			showInfo(e){
				// console.log(e.key,e.keyCode)  //e.key获取按键名字，e.keycode获取按键编码
				console.log(e.target.value)
			}
		},
	})
</script>