吴荣昌个人博客|五天入门Vue--Day4

[[ $t(slide_text) ]]

[[ item.c ]]

五天入门Vue--Day4

[[ $t('发布时间') ]]：2023-03-10 [[ $t('作者') ]]：吴荣昌 [[ $t('来源') ]]：吴荣昌个人博客

HTML5 CSS JavaScript Vue

## 事件修饰符：

> **详见官方文档。**

### 什么是事件冒泡：

> 当三个盒子绑定事件并且嵌套时，你点击小层的盒子，外面大层盒子的事件都会被触发！
>
> ![image-20221209115200482](http://typora.wrcblog.cn/typora/img/image-20221209115200482.png)

#### 解决方案：

![image-20221209115558514](http://typora.wrcblog.cn/typora/img/image-20221209115558514.png)

```vue
<body>
<div id="app">
    <div @click="msg('大盒子', $event)">
        <h4>事件冒泡</h4>
        <div class="parent" @click="msg('父盒子', $event)">
            <div class="center" @click="msg('中盒子', $event)">
                <div class="child" @click="msg('子盒子', $event)">

</div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        methods:{
            msg(data, event){
                console.log(data)
                event.stopPropagation() //取消事件冒泡
            }
        }
    })
</script>
</body>
```

### 取消默认事件：

```vue
<body>
<div id="app">
    <a href="https://www.baidu.com" @click="my_alert">百度</a>
</div>
<script>
    new Vue({
        el: '#app',
        methods:{
            my_alert(event){
                console.log(event.target)
                event.preventDefault() //取消a标签默认事件【跳转】
                alert('百度')
            }
        }
    })
</script>
</body>
```

### 使用事件修饰符来解决以上两个问题：

#### 事件冒泡：

![image-20221209120505194](http://typora.wrcblog.cn/typora/img/image-20221209120505194.png)

```vue
<body>
<div id="app">
    <div @click.stop="msg('大盒子')">
        <h4>事件冒泡</h4>
        <div class="parent" @click.stop="msg('父盒子')">
            <div class="center" @click.stop="msg('中盒子')">
                <div class="child" @click.stop="msg('子盒子')">

</div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        methods:{
            msg(data, event){
                console.log(data)
                // event.stopPropagation() //取消事件冒泡
            }
        }
    })
</script>
</body>
```

> 添加stop事件修饰符之后，点击元素，会阻止事件继续向上传播

#### 默认事件：

```vue
<body>
<div id="app">
    <a href="https://www.baidu.com" @click.prevent="my_alert">百度</a>
</div>
<script>
    new Vue({
        el: '#app',
        methods: {
            my_alert(event) {
                console.log(event.target)
                // event.preventDefault() //取消a标签默认事件【跳转】
                alert('百度')
            }
        }
    })
</script>
</body>
```

### 键盘事件：

> ```javascript
> @keydown
> @keyup
> ```

```javascript
<div>
    表单时间==按键修饰符
    <input type="text" @keydown.enter="change">// 按下回车触发事件change
    <input type="text" @keydown.ctrl.shift.q="change"> // 同时按下ctrl+shift+q触发事件change
</div>
```

[[ $t("上一篇") ]]：五天入门Vue--Day3 [[ $t("下一篇") ]]：五天入门Vue--Day5

[[ $t('你觉得文章怎么样') ]]