Vue.js事件修饰符及v-model双向数据绑定

我不是女神ヾ 2024-03-24 10:53 68阅读 0赞

**目录**

一、事件修饰符

（1）.stop阻止事件冒泡

（2）.prevent阻止默认事件

（3）.capture事件捕获模式

（4）.self自身触发事件

（5）.once事件只触发一次

二、v-model双向数据绑定

--------------------

## 一、事件修饰符 ##

v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，下表是常用事件修饰符

<table> 
 <tbody> 
  <tr> 
   <td><strong>事件修饰符</strong></td> 
   <td><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td><strong>.stop</strong></td> 
   <td>阻止事件冒泡</td> 
  </tr> 
  <tr> 
   <td><strong>.prevent</strong></td> 
   <td>阻止默认事件</td> 
  </tr> 
  <tr> 
   <td><strong>.capture</strong></td> 
   <td>添加事件监听器时使用事件捕获模式</td> 
  </tr> 
  <tr> 
   <td><strong>.self</strong></td> 
   <td>将事件绑定到该元素本身，只有自身才能触发</td> 
  </tr> 
  <tr> 
   <td><strong>.once</strong></td> 
   <td>事件只触发一次</td> 
  </tr> 
 </tbody> 
</table>

### （1）**.stop**阻止事件冒泡 ###

事件冒泡是当事件触发时，会像气泡一样，从DOM树的底层，一层一层往上面传递，一直传递到DOM树的根节点，如果子元素和父级元素触发的是相同的事件，那么当子元素被触发时父元素也会被触发，这就是事件的冒泡机制

由于事件的传递方式是冒泡，当子元素与父元素绑定同一事件时，有可能会造成事件的错误触发，此时需要使用.stop修饰符来阻止事件的冒泡，代码如下：

**注意：**在使用不同内核的浏览器中，冒泡规律是不一样的。如IE浏览器中的顺序为div=> body=>html=>document，而其他内核中顺序为div=>body=>html=>window。此外，在JavaScript中，并非所有的事件都可以冒泡，像blur、unload、load等事件就不能冒泡

### （2）.prevent阻止默认事件 ###

在HTML中，很多标签都有默认事件，例如，<a>超链接标签被单击时会自动跳转到指定页面、在实际开发中，若<a>的默认事件会与其他事件冲突，则可以使用.prevent修饰符阻止它的默认事件，代码如下：

### （3）.capture事件捕获模式 ###

事件捕获的执行顺序是由外部结构向内部结构执行，恰好与事件的冒泡顺序相反，代码如下：

上述代码中，父级元素<div>的click事件后跟了".capture"，当单击按钮时，则会先执行div3Handler函数，在执行btnHandler3函数，与冒泡模式相反。

### （4）.self自身触发事件 ###

**.self**修饰符用来实现只有事件的元素本身触发时才会回调，除此之外都不会被触发。

上述代码添加了".self"修饰符之后，当单击按钮时，将不再触发<div>的单击事件，只有单击<div>时，才会执行"divHandler"函数

注意：**.self**修饰符只会阻止本身身上的冒泡，并不会真正阻止冒泡

### （5）.once事件只触发一次 ###

**.once**修饰符用来阻止事件被多次触发，只触发一次，代码如下：

上述代码中，<input>的click事件后跟了".once"，无论单击多少次按钮，"btnHandler"函数都只执行一次

事件修饰符可以控制事件按照一定的规则进行触发，在使用事件修饰符的时候，书写的顺序非常重要。譬如，@click.prevent.self会阻止所有的单击事件，而@click.self.prevent只会阻止对元素自身的单击事件。

## 二、v-model双向数据绑定 ##

v-model指令主要用于实现表单元素和数据的双向绑定。

Vue.js是单项数据流，v-model指令只是语法糖而已，实现双向绑定的原理相当于两个指令（v-on和v-bind）的集合。v-model本质上包含两个操作：使用v-bind指令绑定一个value属性，使用v-on指令给当前元素绑定input事件，代码如下：

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">

上述3行代码的效果都是一样的，第一行代码是第2行代码的语法糖，第2行代码也可以简写为第3行代码，可以看出，v-model与同时使用v-bind和v-on的效果是**相同的**。

下面v-mode**l绑定文本框**、**绑定radio**、**绑定checkbok做单选\\做多选**、**绑定seleck做单选\\做多选**及**绑定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>

执行截图：

![d1399366d29643b28563e5dd8aa5c362.png][]

双向绑定，v-model其实是语法糖，它的本质是绑定值到元素的指定元素上，并监听元素的输入事件，Vue.js在表单元素中实现了该功能。

[d1399366d29643b28563e5dd8aa5c362.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c8edc396882044af80b2585e7af962df.png