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">

按键码

按键码	键值
.enter
.tab
.delete	“Del”和“Back Space”
.esc
.space
.up,.down,.left,.right	方向键

自定义按键

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

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

vm.config.keyCodes.f1 = 112;

修饰键

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

按键修饰符

按键修饰符键值

.ctrl

.alt

.shift

.meta "window"

.exact 精准按键修饰符

按键修饰符	键值
.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

巴特西

VUE学习-监听事件

监听事件

事件修饰符

按键修饰符

按键码

自定义按键

修饰键

最新文章

热门文章

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