事件处理器
- <div id="app">
- <button v-on:click="counter += 1">增加 1</button>
- <p> {{ counter }} 次.</p>
- </div>
- <script>
- new vue({
- el: '#app',
- data: {
- counter: 0
- }
- })
- </script>
- <div id="app">
- <!-- `greet` 是在下面定义的方法名 -->
- <button v-on:click="greet">Greet</button>
- </div>
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- name: 'vue.js'
- },
- methods: {
- greet: function (event) {
- alert('Hello' + this.name + '!')
- // `event` 是原生 DOM 事件
- if (event) {
- alert(event.target.tagName)
- }
- }
- }
- })
- // 也可以用 JavaScript 直接调用方法
- App.greet() // -> 'Hello Vue.js!'
- </script>
- <div id="app">
- <button v-on:click="say('hi')">Say hi</button>
- <button v-on:click="say('what')">Say what</button>
- </div>
- <script>
- new Vue({
- el: '#app',
- methods: {
- say: function (message) {
- alert(message)
- }
- }
- })
- </script>
event.preventDefault() 或 event.stopPropagation()
- .stop
- .prevent
- .capture
- .self
- .once
- <!-- 阻止单击事件冒泡 -->
- <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 事件只能点击一次 -->
- <a v-on:click.once="doThis"></a>
- <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
- <input v-on:keyup.13="submit">
- <!-- 同上 -->
- <input v-on:keyup.enter="submit">
- <!-- 缩写语法 -->
- <input @keyup.enter="submit">
- .enter
- .tab
- .delete (捕获 "删除" 和 "退格" 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- <p><!-- Alt + C -->
- <input @keyup.alt.67="clear">
- <!-- Ctrl + Click -->
- <div @click.ctrl="doSomething">Do something</div>
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/e9800d4f1953