Vue学习(5)：v-on/if的使用开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

v-on 使用

v-on

用来进行事件监听，**v-on:**后面跟上事件，@+事件='回调' 为语法糖的写法

使用

<button v-on:click="counter++">+</button>	 // 简单写法
<button v-on:click="sub">-</button>			// 封装到函数里面

传参

// 1. 当我们在标签内监听事件不传参，但是回调函数需要参数，Vue会默认把事件传过去
<button v-on:click="siHi">你好</button>
methods: {
    siHi(e) {
        console.log(e);		// MouseEvent {isTrusted: true, , …}
    }
}
// 2. 回调函数需要参数，我们加了()但是没有传参数，underfined
<button v-on:click="siHi()">你好</button>
methods: {
    siHi(e) {
        console.log(e);		// underfined
    }
}
// 3. 回调函数需要参数，我们加了()并且传参
<button v-on:click="siHi(666)">你好</button>
methods: {
    siHi(e) {
        console.log(e);		// 666
    }
}
// 4. 回调函数需要参数，我们加了()传参，并且还要把事件参数传入
<button v-on:click="siHi(666, $event)">你好</button>
methods: {
    siHi(num, e) {
        console.log(num, e); // 666 MouseEvent {isTrusted: true, sc, ...}
    }
}

修饰符

阻止冒泡

<div id="app" v-on:click="cilck">
    我是一段话
    <button v-on:click.stop="clickOne">按钮</button>		/** 阻止按钮点击事件冒泡 **/
</div>

var app = new Vue({
    el: '#app',
    data: {
        counter: 0
    },
    methods: {
        cilck() {
            console.log('cilck');
        },
        clickOne() {
            console.log('clickOne');
        }
    }
})

// 按钮默认是有冒泡事件的，使用.stop能够阻止冒泡

阻止默认事件

// 我们不想要表单提交按钮自动提交，而是我们监听按钮让我们来提交，阻止默认行为
<button v-on:click.prevent="clickOne">按钮</button>

按键监听

// 只有当该按键触发了才会调用这个回调事件
<button v-on:click.enter="clickOne">按钮</button>	
<button v-on:click.13="clickOne">按钮</button>			// keycode

监听自定义组件原生事件

<my @click="clickOne"></my>		// 监听自定义属性的点击按钮

支触发一次回调

<button v-on:click.once="clickOne">按钮</button>

自身元素触发事件，而不是子元素

<div id="app" @click.self="cilck">我是div<button></button></div>

开启事件捕捉模式

<div id="app" @click="cilck">
    我是一段话
    <button @click.capture='clickOne'>按钮</button>		<!-- 捕捉阶段，当前按钮先执行 -->
</div>

案例3：点击li变成红色

<div id="app">
    <ul>
        <li v-for='(item, index) in movies' 
            :class="{active: currentIndex === index}"   	// li是否为红色的关键，默认第一个红色
            @click="clickRed(index)">
            {{item}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》'],
            currentIndex: 0,    // 使用一个变量来控制li是否为红色
        },
        methods: {
            clickRed(index) {
                this.currentIndex = index;
            },
        }
    })
</script>

v-if 的使用

v-if

满足一定条件渲染数据

使用

<div id="app">
    <section v-if="isShow">					<!-- isShow 为 true 时，显示下面的div -->
        <div>我是div，isShow为True时我显示</div>
    </section>
    <section v-else>						<!-- isShow 为 false 时，显示下面的div -->
        <div>我是div，isShow为False时我显示</div>
    </section>
</div>

var app = new Vue({
    el: '#app',
    data: {
        counter: 0,
        isShow: true
    },
})

v-else-if

<section>
    <p v-if='score >= 90'>优秀</p>
    <p v-if='score >= 80'>良好</p>
    <p v-if='score >= 60'>及格</p>
    <p v-else>不及格</p>
</section>

var app = new Vue({
    el: '#app',
    data: {
        score: 60
    },
})

// 逻辑比较复杂的使用计算属性，更推荐使用这样的写法
<p> {{result}} </p>

computed: {
    result() {
        if (this.score >= 90) {
            return '优秀'
        } else if (90 > this.score >= 80) {
            return '及格'
        } else {
            return '不及格'
        }
    }
}

案例3：切换账号格式

<div id="app">
    <section>
        <span v-if='isShow'>
            <label for="username">用户账户</label>
            <input type="text" placeholder="请输入账号" id="username">
            <button @click='toggle'>切换邮箱</button>
        </span>
        <span v-else>
            <label for="email">用户邮箱</label>
            <input type="text" placeholder="请输入邮箱" id="email">
            <button @click='toggle'>切换账号</button>
        </span>
    </section>
</div>

在这里插入图片描述

虚拟DOM复用问题

在这里插入图片描述

问题：

明明实在邮箱界面切换，结果里面的值被另外一个input框复用了
虽然有时候我们需要这样的功能，但是大部分情况下还是去掉的。

原因：

在Vue里面，刚拿到DOM的时候是不会直接渲染到页面的上的，而是先创建一个虚拟DOM，如果要渲染已经有的元素，虚拟DOM会尽量复用这个元素
比如我们写了两个input标签，其实虚拟DOM里面就储存了一个input标签的模板，每当页面上需要一个input标签，就会用把这个模板渲染到页面上，实际上两个input就是同一个东西，就是一些属性不同，所以里面的值会被保留

解决方案：

<!-- 如果不希望Vue出现类似的复用的情况，可以给对应的input添加key值，key不同代表不能相互复用 -->
<input type="text" placeholder="请输入邮箱" id="email" key="123">
<input type="text" placeholder="请输入邮箱" id="email" key="12">

在这里插入图片描述