The Vue event processing for the 04-vue starter series

Source: Internet
Author: User

4.1. The Vue handling of the listener event

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]:

<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>
4.2. Event handling method integrated into Vue object

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 modifiers

Official 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 modifier

When 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 binding

The 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 Summary

Vue 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.