() 一个 span 修饰 语句 特殊变量 方法 left stop
可以用 v-on 指令监听 DOM 事件:
- <div id="app">
- <button v-on:click = "greet">Greet</button>
- </div>
Js代码
- new vue({
- el: ‘#app‘,
- data: {
- message: ‘菜鸟教程 ! ‘
- },
- methods: {
- greet: function() {
- alert("OP");
- }
- }
- })
除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
- <div id="app">
- <button v-on:click = "greet(‘welcome‘)">Greet</button>
- </div>
Js代码
- new Vue({
- el: ‘#app‘,
- data: {
- message: ‘菜鸟教程 ! ‘
- },
- methods: {
- greet: function(msg) {
- alert(msg);
- }
- }
- })
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:
- <button v-on:click="say(‘hello!‘, $event)">Submit</button>
js代码:
- new Vue({
- el: ‘#example‘,
- methods: {
- say: function(msg, event) {
- // 现在我们可以访问原生事件对象
- event.preventDefault()
- }
- }
- })
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到,不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。为了解决这个问题,vue.js 为 v-on 提供两个事件修饰符:.prevent 与 .stop。
- <!-- 阻止单击事件冒泡 -->
- <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>
在监听键盘事件时,我们经常需要检测 keyCode。Vue.js允许为v-on添加按键修饰符:
- <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
- <input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:
- <!-- 同上 -->
- <input v-on:keyup.enter="submit">
常用按键别名:enter、tab、delete、esc、space、up、down、left、right。
Vue深度学习(4)-方法与事件处理器
() 一个 span 修饰 语句 特殊变量 方法 left stop
原文:http://www.cnblogs.com/QianBoy/p/7911982.html
来源: http://www.bubuko.com/infodetail-2410603.html