ES6 event binding (v-on usage)

Catalog

One 、v-on Basic use of

1. Basic form

 2. The case shows

  Two 、v-on Parameter transfer of

1. Basic transmission parameters

2. Pass other parameters

  3、 ... and 、v-on The modifier of

1. Stop bubbling （stop,prevent）

2. Modifiers can be concatenated

 3. Other modifiers （ Not commonly used ）

Four 、 Case study —— Clean Calculator Beta

---

One 、v-on Basic use of

1. Basic form

The operations performed by the two click buttons are the same ,1 and 2 The difference is that ,1 The short form of is 2.

	<div id="app">
		<button v-on:click="change()"> Click on </button>  <!-- 1 -->
		 <button @click="change2()"> Click on </button> <!-- 2 -->
	</div>
	<script>
		const vm = new Vue({
			el: '#app',
			data() {
				return {

				}
			},
			methods: {
				change() {
					console.log('1111');
				},change2() {
					console.log('2222');
				}
			}
		})
	</script>

 2. The case shows

By clicking on '+','-' Button to increase or decrease the displayed number .

 <div id="app">
        <button @click="sum++">+</button>
        <div>{
   {sum}}</div>
        <button @click="sum--">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    sum: 0,
                }
            },
        })
    </script>

  Two 、v-on Parameter transfer of

1. Basic transmission parameters

<div id="app">
        <button @click="handle(4418)"> Click on </button>
    </div>
<script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                handle: function (p) {
                    console.log(p)
                }
            }
        })

After clicking the button , Generate the passed in value 4418.

 

The event was not transmitted , It can be omitted ().

The event calling method passes parameters , Parentheses are omitted when writing functions , But the function itself needs to pass a parameter , This parameter is the native event event Parameters are passed in .

2. Pass other parameters

    <div id="app">
        <button @click="handle(4418,$event)"> Click on </button>
    </div>
<script src="../js/vue.js"></script>
    <script>
 let vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                handle: function () {
                    // console.log(p)
                    console.log(event.target.tagName);   //  Get objects 
                    console.log(event.target.innerHTML);  // Get tag    innerHTML Get the content inside 

                }
            }
        })
    </script>

  3、 ... and 、v-on The modifier of

1. Stop bubbling （stop,prevent）

It didn't stop bubbling , All functions are normal .

    <div id="app">
        <div>{
   {num}}</div>
        <div v-on:click="handle"><button v-on:click.stop="handle1"> Click on </button>
        </div>
        <a href="https://www.baidu.com/" v-on:click.prevent="handle1"> Baidu </a>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle: function () {
                    this.num++;
                    event.stopPropagation();
                },
                handle1: function (event) {
                },
            }
        })
    </script>

After bubbling :

2. Modifiers can be concatenated

<div id="app">
        <div @click="divClick" class="div">
			<a href="http://www.baidu.com" @click.stop.prevent="change"> Go to Baidu </a>
	    </div>
</div>
<script>
	const vm = new Vue({
		el: '#app',
		data() {
		},
		methods: {
		     change()  {
						console.log(' Prevents default behavior and bubbles ');
					    },
                 }

			})
</script>

 3. Other modifiers （ Not commonly used ）

Use event capture mode when adding event listeners .  capture

Just be there event.target Is the trigger handler for the current element itself .   prevent

The click event will only trigger once .   once

.passive In particular, modifiers can improve the performance of mobile terminals .  .passive

Four 、 Case study —— Clean Calculator Beta

    <div id="app">
        <div> Please enter the first digit ：<input type="text" v-model="a"></div>
        <div> Please enter &nbsp; &nbsp; Operator ：<input type="text" v-model="b"></div>
        <div> Please enter the second digit ：<input type="text" v-model="c"></div>
        <button @click="handle"> Calculation </button>
        <div> The result of the calculation is : <span v-text="msg"></span></div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '',
                a: '',
                b: '',
                c: '',
            },
            methods: {                    
                handle() {
                    if (this.b == '+') {
                        this.msg = parseInt(this.a) + parseInt(this.c);
                    } else if (this.b == '-') {
                        this.msg = parseInt(this.a) - parseInt(this.c);
                    } else if (this.b == '*') {
                        this.msg = parseInt(this.a) * parseInt(this.c);
                    } else {
                        this.msg = parseInt(this.a) / parseInt(this.c);
                    }
                }
            }
        })

    </script>