vue初识之事件修饰符及样式的使用

---

一、事件修饰符

1. .stop

阻止冒泡

<header @click="head">
            <aside @click="asdie">
                <button @click.stop="btn">点击</button>
            </aside>
        </header>

let vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            head() {
                console.log(3);
            },

            asdie() {
                console.log(2);
            },
            btn() {
                console.log(1);
            },
            targer() {
                console.log('点击了');
            }
        }
    })

2. .capture

添加事件侦听器时使用事件捕获模式

<header @click="head">
            <aside @click.capture="asdie">
                <button @click="btn">点击</button>
            </aside>
        </header>

3. .self

只当事件在该元素本身（比如不是子元素）触发时触发回调

<header @click="head">
            <aside @click.self="asdie">
                <button @click="btn">点击</button>
            </aside>
        </header>

4. .once

事件只触发一次

<header @click="head">
            <aside @click="asdie">
                <button @click.once="btn">点击</button>
            </aside>
        </header>

5. .prevent

阻止默认事件

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

二、样式的使用

1.数组

<div id='app'>
        <div class="box red">今天下雨了</div>

        <div :class="class1">今天下雨了</div>
        <!-- 数组 -->
        <div :class="class2">今天下雨了</div>
        
    </div>

 const vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                class1: 'box red',
                class2: ['box', 'red'],
                class3: [{ 'box': true, 'fs40': true }]
            },
            methods: {
                change() {
                    // this.class1 += ' fs40'
                    this.class2.push('fs40')
                }
            }
        })

2.三木表达式

<!-- 三木表达式 -->
        <div :class="flag?'red':'fs40'">今天下雨了</div>
        

3.数组内置对象（对象的键是样式的名字，值是bool类型）

<!-- 数组内置对象（对象的键是样式的名字，值是bool类型） -->
        <div :class="class3">今天下雨了</div>
        


        <button @click="change">change</button>

4.直接通过对象

<!-- 	直接通过对象 -->
        <div :class="{'box':true}">今天下雨了</div>

---

总结

以上就是今天要讲的内容，