5.4.vue入门基础学习笔记-基础指令介绍(事件绑定v-on)
2017-07-21 15:11
871 查看
事件绑定v-on
1绑定代码段
<div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) </script>
2 绑定方法
无法绑定自定义的方法 只能绑定vue method属性里的方法<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> <!-- 这种写法是错误的 --> <button v-on:click="myGreet()">Greet</button> </div> <script> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) function myGreet(){ alert('Hello myGreet!') } // 也可以用 JavaScript 直接调用方法 example2.greet() // -> 'Hello Vue.js!' </script>
2.1 为方法传递参数
如果需要传递参数,那么可以直接加括号传递,和普通方法调用写法相同<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <script> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) </script>
2.2 传递dom事件对象
如果想要传递dom事件对象Event进入方法,可以用特殊变量 $event<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <script> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) </script>
3 修饰符
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。3.1 事件修饰符
.stop- 调用 event.stopPropagation()。
.prevent- 调用 event.preventDefault()。
.capture- 添加事件侦听器时使用 capture 模式。
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。
.native- 监听组件根元素的原生事件。
.once- 只触发一次回调。
.passive- (2.3.0) 以 { passive: true } 模式添加侦听器
<!-- 阻止单击事件冒泡 --> <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> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>
3.2 键盘修饰符
一般与keyup keydown keypress 等键盘事件配合使用<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">
键位别名
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名-
.enter
-
.tab
-
.delete(捕获 “删除” 和 “退格” 键)
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
除了官方定义好的键位别名,我们还可以通过全局 config.keyCodes 对象自定义键值修饰符别名:
// 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112
组合键
如果我们想触发一个组合键,比如ctrl+a shift+b 或者 按住ctrl点击click,可以用修饰键来完成修饰键与正常的按键不同;
修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。
换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放任意一个其他的按键;
单单释放 ctrl 不会引发事件。
修饰键有以下几种
.ctrl
.alt
.shift
.meta
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
3.3 鼠标修饰符
这些修饰符会限制处理程序监听特定的鼠标按键-
.left- (2.2.0) 只当点击鼠标左键时触发。
-
.right- (2.2.0) 只当点击鼠标右键时触发。
-
.middle- (2.2.0) 只当点击鼠标中键时触发。
相关文章推荐
- 5.5.vue入门基础学习笔记-基础指令介绍(其他绑定指令v-text v-html v-once v-pre v-cloak)
- 5.2.vue入门基础学习笔记-基础指令介绍(表单绑定v-model)
- 5.3.vue入门基础学习笔记-基础指令介绍(属性绑定v-bind)
- 6.vue入门基础学习笔记-逻辑控制指令介绍
- 5.1.vue入门基础学习笔记-基础指令介绍(表达式)
- docker学习笔记17:Dockerfile 指令 ONBUILD介绍
- js学习笔记(二):JQuery中的On绑定事件的方法
- 慕课网Vue.js入门基础学习笔记——vuejs及相关工具介绍
- MVC学习笔记之入门篇(二)mvc3相关介绍以及基础知识篇
- Jquery学习笔记:事件处理基础介绍
- [BX]和loop指令04 - 零基础入门学习汇编语言26
- [BX]和loop指令03 - 零基础入门学习汇编语言25
- [BX]和loop指令06 - 零基础入门学习汇编语言28
- [BX]和loop指令05 - 零基础入门学习汇编语言27
- [BX]和loop指令03 - 零基础入门学习汇编语言25
- 转移指令的原理02 - 零基础入门学习汇编语言44
- [BX]和loop指令06 - 零基础入门学习汇编语言28
- [BX]和loop指令02 - 零基础入门学习汇编语言24
- 入门基础学习 ExtJS笔记(一)
- 转移指令的原理01 - 零基础入门学习汇编语言43