Vue provides a way to help us bind time to the tag, and of course we can bind the event directly in the DOM's native way. The instructions provided by Vue are also very convenient to bind, and can make viewmodel more concise and more logical. So it is recommended for everyone to use.
Vue provides v-on instructions to help us with the binding of events. Basic inline event handling methods [official Demo]:
4.2. Event handling method integrated into Vue object<div id="example-1"> <!-- 为按钮绑定点击事件，执行counter += 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>
Inline-bound events can only handle the processing logic of simple events. Complicated situation is the most convenient and not error-prone in encapsulation to JS. The methods property can be added to the Vue object, and the developer can put the logic of the event handler into methods.
<!DOCTYPE html>
4.3. Event modifiersOfficial online writing is very good, this piece is directly using the pipe network bar. Calling Event.preventdefault () or event.stoppropagation () in an event handler is a very common requirement. Although we can easily achieve this in methods, the better way is that methods has only pure data logic, not the details of DOM events. To solve this problem, Vue.js provides the event modifier for v-on. by Dot (.) Represents the instruction suffix to invoke the modifier.
- . 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><!-- the click event will be triggered at most once --><a v-on:click.once="doThis"></a>
4.4. Key modifierWhen listening to keyboard events, we often need to monitor common key values. Vue allows you to add key modifiers for v-on when listening to keyboard events:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --><input v-on:keyup.13="submit">记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">
All the key aliases:
- . Enter
- . tab
- . Delete (capturing "delete" and "backspace" keys)
- . ESC
- . Space
- . Up
- . Down
- . Left
- . Right
- . Ctrl
- . alt
- . Shift
- . Meta
4.5. Shorthand for event bindingThe shorthand for the binding of properties in Vue is directly : = = = ' V-bind: '
The abbreviation of the event is directly changed. That is @ : v-on: = = = @ See the following example:
<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>
4.6. Event Binding SummaryVue for the convenience of development, providing the relevant package of events, we can make it easy for us to use Vue to develop the event, especially the v-on instruction is very convenient with the Vue object methods in conjunction with complex event processing, very convenient. Event modifiers and key modifiers for events can also make the Vue event the icing on the cake.
GitHub Address: Source download
For other details, please refer to: http://aicoder.com/vue/preview/all.html
The Vue event processing for the 04-vue starter series
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
