Vuejs--v-on

Copyright Notice: Source http://blog.csdn.net/qq20004604

Directory (?) [+]

Information to the official documentation:

Http://cn.vuejs.org/guide/events.html

This article is based on the official documents, more detailed explanation, the code more complete.

Simply speaking, better for beginners to read

(22) method processorStandard usage of ①v-on

Used to listen to DOM events, typically V-on:click, the method of handling is placed in the methods attribute

A parameter is passed by default, with the following code:

1. <button @click ="Test" > Click </button>
3. Methods: {
4. Test: function (evt) {
5. Console.log (EVT);
6. }
7. }

Here the EVT is the standard mouse click event, similar to the parameters in the callback function of the Click event of jquery.

This can be used to find the value in the Data property (and perhaps several others), for example:

1. Data: {
2. Items: "Test"
3. },
4. Methods: {
5. Test:function (evt) {
6. Console.log (This.items);
7. Console.log (EVT);
8. }
9. }

Here is the This.items, which is the data items of this variable;

② Inline Statement Processor

Pass a fixed parameter to the V-on event

1. <button @click="Test (' a ')"> Click to search for age</button>

When this time, the first parameter of the function is not the mouse click event, but the string a

1. Test: function (MES) {
2. Console.log (MES);
3. }

The value of MES is ' a '

$event

If you need to give him a mouse click event like the one above, use $event as the parameter (he is the same as the default mouse event object when the parameter is not passed);

Variables that use the Vue instance

If a value in the Data property needs to be passed, the property name is placed directly

For example:

2. <div id="app" >
4. <a href="http://www.baidu.com" @click ="Test (items, $event)" > click Search age</a>
6. </div>
8. <script>
10. var test = {Name: "Test"};
12. var vm = New Vue ({
14. El: ' #app ',
16. Data: {
18. Items: "Test"
20. },
22. Methods: {
24. Test: function (msg, evt) {
26. Console.log (msg);
28. Evt.preventdefault (); //block default actions, such as this is a page jump
30. }
32. }
34. })
36. </script>

Output: Test and button

③ event modifier (for v-on)

Modifier	Effect	Note
. prevent	Block default events for HTML elements	Similar to Evt.preventdefault ()
. Stop	Block event bubbling
KeyUp. Digital	When the key that the number represents is bouncing	Has an alias
Keyup.enter	Enter	When you press ENTER
Keyup.tab	tab button	When tab is in the input
Keyup.delete	Del key	Causes the original delete delete function to fail
Keyup.esc	ESC key	When the ESC is pressed
Keyup.space	Space key	Does not invalidate the space function (that is, when a space is pressed, both spaces and events are triggered)
Keyup.up	On the keyboard direction key	The top key also makes the cursor to the left of the input box (The focus is in the input box, it takes effect when the key bounces, the same as below)
Keyup.down	The keyboard direction key is under	To the last face of the input box
Keyup.left	Left Arrow	Move Cursor Left
Keyup.right	Right Arrow	Move Cursor Right
. Self	Triggers an event when the current element itself (not a child element)	Looks like the top level when bubbling, typically used for mouse events such as click (after 1.0.16)
. Capture	Follow capture mode to handle	To put it simply, according to my assumptions, it is triggered by the capture sequence (the original pattern is after the capture bubbles first, this is the opposite) (1.0.16)

For. Self, for example, the following code:

2. <div id="app" >
4. <div @click. self="test" class="A" >
6. <div class="B" >
8. </div>
10. </div>
12. </div>
14. <script>
16. var test = {Name: "Test"};
18. var vm = New Vue ({
20. El: ' #app ',
22. Data: {
24. Items: "Test"
26. },
28. Methods: {
30. Test: function (evt) {
32. Console.log (EVT);
34. }
36. }
38. })
40. </script>

Events are triggered only when clicked on an area that is not div class= ' B ';

④ Custom Key aliases:

Specification:

Vue.directive ("on"), keycode. Alias = key code;

Example:

1. Vue.directive ("on"). Keycode.z = 122;

This refers to a 122 (lowercase z) alias named Z, which triggers the event when the Z key of the keyboard is pressed (regardless of case).

Note that this is written after the instance declaration (presumably, the template containing the key is created before it is valid)

Vuejs--v-on