VUE学习-监听事件

监听事件

事件处理方法可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="app">
	<button v-on:click="counter += 1">Add 1</button>
	<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
new Vue({
	el: '#app',
	data: { counter: 0 }
})
</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<div id="app">
	<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</div>
<script>
new Vue({
	el:'#app',
	methods:{
		warn(msg,event){
			if(event)event.preventDefault();
			alert(msg);
		}
	}
})
</script>

事件修饰符

• .stop: 阻止冒泡。
• .prevent: 阻止默认事件。
• .capture: 捕捉冒泡。
• .self: 自身触发。
• .once: 只会触发一次。
• .native - 监听组件根元素的原生事件。
• .passive: 告诉浏览器你不想阻止事件的默认行为。:scroll.passive = 'onScroll',滚动事件的默认行为 (即滚动行为) 将会立即触发

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 `onScroll` 完成 -->
<!-- 不要把 .passive 和 .prevent 一起使用， -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符

监听键盘事件时添加按键修饰符

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

按键码

自定义按键

别名有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

//实例vm中可以用:keyup.f1="event"绑定按键f1的响应事件
vm.config.keyCodes.f1 = 112;

修饰键

修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。

• 按键修饰符

  按键修饰符	键值
  .ctrl
  .alt
  .shift
  .meta	"window"
  .exact	精准按键修饰符

• <!-- 只有在按住 ctrl 的情况下释放按键C，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。 -->
  <input v-on:keyup.ctrl.67="clear">
  <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  <button v-on:click.ctrl.exact="onCtrlClick">A</button>
  

• 鼠标修饰符

  鼠标修饰符	键值
  .left
  .right
  .middle