Vue.js Study notes: Instruction V-on

Vue.js official documentation for v-on This common Directive provides an abbreviated method to see how the official website is introduced

<!--full syntax--><a v-on:click= "dosomething" ></a><!--abbreviation--><a @click = "DoSomething" ></a >

1. Method processor

DOM events can be monitored with v-on instructions

<div id= "box" > <button class= "btn btn-success" v-on:click= "ShowMsg" >{{msg}}</button></div>

Binding a single-machine event handling method ShowMsg to methods

Var vm = new vue ({    el: ' #box ',  //el refers to selectors such as  id,class,tagname     DATA:{        MSG: ' Click button ',  // This is just for the blunt reinforcement memory Vue double bracket label notation         name: ' Vue.js '     } ,     methods:{  //defines the method in the Methods object          showmsg: function (e) {            // The this in the method refers to the instance object of New vue, which can be verified again under              Console.log (This);            //event  is the native DOM event             console.log (e.target);  // Print out Event source Object Button            console.log (' Hello '  + this.name +  '! ');          }    }}); 

View page Effects

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/88/E6/wKioL1gAR1fTKAu1AABklCPDp9g505.png "title=" Qq20161014104618.png "alt=" Wkiol1gar1ftkau1aabklcpdp9g505.png "/>

2. Inline Statement processor

In addition to being directly bound to a method, you can also use inline JavaScript statements

<div class= "App" > <button class= "btn btn-default" v-on:click= "Say (' Hi ')" >say hi</button> <!--tasting Try the abbreviated method under V-on @click--<button class= "btn btn-primary" @click = "Say (' What ')" >say What</button></div >

var vm2 = new Vue ({el: '. App ', methods:{say:function (msg) {//) The parameters inside the method are printed out Console.log (msg); }    }});

View page Effects

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/88/EA/wKiom1gASbyTL4PrAAA44dNplg0172.png "title=" Qq20161014105746.png "alt=" Wkiom1gasbytl4praaa44dnplg0172.png "/>

It is also sometimes necessary to access native DOM events in the inline statement processor, such as blocking link jumps. It can be passed into the method with a special variable $event:

<div class= "App" > <a href= "http://cn.vuejs.org/guide/events.html" @click = "Stop (test, $event)" > Open Vue official website </a></div>

var vm2 = new Vue ({el: '. App ', data:{test: ' Block link jump '}, methods:{stop:function (test, E) {            E.preventdefault ();        alert (test); }    }});

After clicking a link, can the page also jump to the Vue website? Look at the page effect

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/88/EA/wKiom1gAT-jhd-pDAABiTNJWbjM327.png "title=" Qq20161014112122.png "alt=" Wkiom1gat-jhd-pdaabitnjwbjm327.png "/>

3. Event modifiers

It is often necessary to call Event.preventdefault () or event.stoppropagation () in the event handler. Although it can be done easily within a method (as in the example above), it is better to make the method purely data logic without handling DOM event details.

To solve this problem, Vue provides two event modifiers for v-on:. Prevent and. Stop

<!--block Click event bubbling--><a v-on:click.stop= "Dothis" ></a><!--commit event no longer overloads the page--><form v-on: Submit.prevent= "OnSubmit" ></form><!--modifiers can be concatenated--><a v-on:click.stop.prevent= "Dothat" ><!-- Use capture mode--><div v-on when adding event listeners--><form v-on:submit.prevent></form><!--only modifiers: Click.capture= "Dothis" >...</div><!--only events trigger callbacks when the element itself (not the child element) is triggered--><div v-on:click.self= "Dothat" >...</div>

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/88/E7/wKioL1gAVXKQ4StyAAFT7_wfYyA262.png "title=" Qq20161014114738.png "alt=" Wkiol1gavxkq4styaaft7_wfyya262.png "/>

Look at a small piece of code to understand the big paragraph above:

<div id= "Container" > <!--block page jumps--<a v-on:click.prevent= "Dothis" href= "http://cn.vuejs.org/guide/e Vents.html ">doThis</a></div>

var vm3 = new Vue ({el: ' #container ', methods: {Dothis:function () {}}});

The end result is that clicking on the a link does not jump to the Vue website and fully achieves the results we expect.

Take another look at the example of. Self

<div id= "App" > <div @click. self= "Test" class= "a" >a <div class= "B" >b</div> </div> ;</div>

var vm4 = new Vue ({el: ' #app ', data:{items: ' Test '}, methods:{test:function (e) {Co        Nsole.log (e); }    }})

According to Vue's documentation, "Only the event triggers a callback when the element itself (not the child element) is triggered, so the event is triggered when a div of Class A is fired, and a div of Class B does not

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/88/EB/wKiom1gAWNjhO8N4AABLWlXWGoY185.png "title=" Qq20161014115904.png "alt=" Wkiom1gawnjho8n4aablwlxwgoy185.png "/>

4. Key modifier

http://dapengtalk.blog.51cto.com/11549574/1860203

In this blog post, I specialize in reviewing the relevant knowledge of keycode. A series of key modifiers are also available in Vue specifically for keyboard listener events

<!--only KeyCode is 13 o'clock call Vm.submit ()--><input v-on:keyup.13= "Submit" ><!--ditto--><input V-on:keyup. Enter= "Submit" >

All the key aliases:

• Enter

• tab

• Delete

• Esc

• Space

• Up

• Down

• Left

• Right

5. Why listen to events in HTML?

(1), scan the HTML template can easily locate the corresponding method in the JavaScript code.

(2), because you do not have to manually bind events in JavaScript, your ViewModel code can be very pure logic, fully decoupled from the DOM, and easier to test.

(3), when a viewmodel is destroyed, all event handlers will be automatically deleted, you don't have to worry about how to know them

The following documents are referenced in the course of study, and we sincerely thank

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

http://blog.csdn.net/qq20004604/article/details/52413898

Vue.js Study notes: Instruction V-on