1. Event modifiers

The v-on instruction provides some event modifiers, that is, custom event behavior. Different event modifiers will produce different functions. Usually, the v-on instruction is configured to use. The following table is a common event modifier

event modifier	illustrate
.stop	prevent event bubbling
.prevent	block default event
.capture	Use event capture mode when adding event listeners
.self	Bind the event to the element itself, only itself can trigger
.once	The event fires only once

(1) .stop prevents event bubbling

Event bubbling means that when an event is triggered, it will pass from the bottom of the DOM tree layer by layer to the root node of the DOM tree like a bubble, if the child element and the parent element trigger the same event , then when the child element is triggered, the parent element will also be triggered, which is the event bubbling mechanism

Since the event delivery method is bubbling, when the child element and the parent element are bound to the same event, the event may be triggered incorrectly. In this case, the .stop modifier needs to be used to prevent the event from bubbling. The code is as follows:

    <div id="div1" @click="div1Handler">
        <input type="button" value="点击" @click.stop="btnHandler">
    </div>

Note: In browsers using different kernels, the bubbling rules are different. For example, the order in IE browser is div=>body=>html=>document, while the order in other kernels is div=>body=>html=>window. In addition, in JavaScript, not all events can bubble, such as blur, unload, load and other events cannot bubble

(2).prevent prevents the default event

In HTML, many tags have default events. For example, when the <a> hyperlink tag is clicked, it will automatically jump to the specified page. In actual development, if the default event of <a> conflicts with other events, then You can use the .prevent modifier to prevent its default event, the code is as follows:

<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>

(3).capture event capture mode

The execution order of event capture is executed from the external structure to the internal structure, which is exactly opposite to the bubbling order of events. The code is as follows:

    <div id="div3" @click.capture="div3Handler">
        <input type="button" value="点击" @click="btnHandler3">
    </div>

In the above code, the click event of the parent element <div> is followed by ".capture". When the button is clicked, the div3Handler function will be executed first, and then the btnHandler3 function will be executed, which is opposite to the bubbling mode.

(4). Self triggers events

The .self modifier is used to implement the callback only when the element of the event itself is triggered, otherwise it will not be triggered.

    <div class="inner" @click.self="divHandler">
        <input type="button" value="点击" @click="btnHandler">
    </div>

After the ".self" modifier is added to the above code, when the button is clicked, the click event of <div> will no longer be triggered, and the "divHandler" function will be executed only when <div> is clicked

Note: The .self modifier only prevents bubbling on itself, and does not really prevent bubbling

(5). The once event is only triggered once

The .once modifier is used to prevent the event from being triggered multiple times, only once, the code is as follows:

<input type="button" value="点击" @click.once="btnHandler">

In the above code, the click event of <input> is followed by ".once", no matter how many times the button is clicked, the "btnHandler" function will only be executed once

Event modifiers can control events to be triggered according to certain rules. When using event modifiers, the order of writing is very important. For example, @click.prevent.self will prevent all click events, while @click.self.prevent will only prevent click events on the element itself.

Two, v-model two-way data binding

The v-model directive is mainly used to implement two-way binding between form elements and data.

Vue.js is a single-item data stream, and the v-model instruction is just syntactic sugar. The principle of realizing two-way binding is equivalent to a collection of two instructions (v-on and v-bind). v-model essentially includes two operations: use the v-bind command to bind a value attribute, and use the v-on command to bind the input event to the current element. The code is as follows:

1    <input v-model="sth">
2    <input v-bind:value="sth" v-on:input="sth=$event.target.value">
3    <input :value="sth" @input="sth=$event.target.value">

The above three lines of code have the same effect. The first line of code is the syntactic sugar of the second line of code. The second line of code can also be abbreviated as the third line of code. It can be seen that v-model and v-bind are used at the same time The effect is the same as v-on .

The following v-mode l is bound to the text box , bound to the radio , bound to the checkbok for single selection\multiple selection , bound seleck for single selection\multiple selection and binding textareat

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue-2.7.14.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #root {
            background-color: #7fffd4;
            width: 450px;
            height: 860px;
            margin: 0 auto;
           
        }

        div {
            margin-top: 20px;
        }

        .tilte{
            text-align: center;
        }

        #dd{
            border: 1px solid white;
            width: 400px;
            height: 50px;
            margin: 2px auto;
        }

        #dc{
            width: 400px;
            height: 80px;
            margin: 2px auto;
            border: 1px solid white;
        }

        #df {
            width: 400px;
            height: 100px;
            margin: 2px auto;
            border: 1px solid white;
        }

        #dg {
            width: 400px;
            height: 120px;
            margin: 2px auto;
            border: 1px solid white;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="tilte" id="dd"><h3>v-model双向绑定</h3></div>
        <div id="dd">
            <h3>v-model的原理</h3>
            <input v-bind:value="msg" type="text" @input="msg=$event.target.value" />

        </div>

        <div id="dd">
            <h3>v-model绑定文本框</h3>
            <input v-model="text" type="text" placeholder="v-model绑定文本框"/>
        </div>

        <div id="dc">
            <h3>v-model绑定radio</h3>
            <input v-model="sex" type="radio" value="男" />男
            <input v-model="sex" type="radio" value="女" />女
            <br>
            所选的性别是：{
   
   {sex}}
        </div>

        <div id="dc">
            <h3>v-model绑定radio</h3>
            <input v-model="zimu" type="radio" value="A" />A
            <input v-model="zimu" type="radio" value="B" />B
            <input v-model="zimu" type="radio" value="C" />C
            <input v-model="zimu" type="radio" value="D" />D
            <br>
            多选的答案是：{
   
   {zimu}}
        </div>

        <div id="dc">
            <h3>v-model绑定checkbox做单选</h3>
            <input v-model="isangree" type="checkbox" value="男" />同意协议
            <br>
            isAngree的值是：{
   
   {isangree}}
        </div>

        <div id="df">
            <h3>v-model绑定checkbox做多选</h3>
            <input v-model="hobbies" type="checkbox" value="篮球" />篮球
            <input v-model="hobbies" type="checkbox" value="足球" />足球
            <input v-model="hobbies" type="checkbox" value="乒乓球" />乒乓球
            <input v-model="hobbies" type="checkbox" value="排球" />排球
            <input v-model="hobbies" type="checkbox" value="网球" />网球
            <br>
            所选爱好有：{
   
   {hobbies}}
        </div>

        <div id="dc">
            <h3>v-model绑定select做单选</h3>
            <select v-model="fruit">
                <option value="苹果">苹果</option>
                <option value="香蕉">香蕉</option>
                <option value="李子">李子</option>
                <option value="桃子">桃子</option>
                <option value="西瓜">西瓜</option>
                <option value="草莓">草莓</option>
            </select>
            <br>
            所选水果有:{
   
   {fruit}}
        </div>

        <div id="dg">
            <h3>v-model绑定select做多选</h3>
            <select v-model="fruits" multiple>
                <option value="苹果">苹果</option>
                <option value="香蕉">香蕉</option>
                <option value="李子">李子</option>
                <option value="桃子">桃子</option>
                <option value="西瓜">西瓜</option>
                <option value="草莓">草莓</option>
            </select>
            <br>
            所选水果有:{
   
   {fruits}}
        </div>

        <div id="df">
            <h3>v-model绑定textareat</h3>
            <textarea v-model="info" cols="" rows="">

            </textarea>
            <br>
            所写内容是:{
   
   {info}}
        </div>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                msg: "同学你好啊！！！",
                text: "",
                sex: "",
                zimu:"",
                isangree: "",
                hobbies: [],
                fruit:"",
                fruits:[],
                info:""

            },
            methods: {

            }
        })
    </script>
</body>

</html>

Execution screenshot:

Two-way binding, v-model is actually syntactic sugar. Its essence is to bind the value to the specified element of the element and listen to the input event of the element. Vue.js implements this function in the form element.

Vue.js event modifier and v-model two-way data binding