Vue笔记 (四) 事件监听v-on、条件判断v-if、v-show、循环遍历v-for
v-on
在前端开发中，我们需要经常和用户进行交互，这个时候，就必须监听用户发生的事件，比如点击、拖拽、键盘事件等，在 Vue 中监听事件使用 v-on 指令
基本用法
<button v-on:click="add">+button>// ...
data: {
num: 0
},
methods: {
add () {
this.num++
},简写：
<button @click="add">+button>v-on 参数
1.事件调用的方法没有参数，方法后的()可不加
<button @click="btn1Click()">按钮1button><button @click="btn1Click">按钮1button>2.在事件定义时，方法本身是需要一个参数的，但写方法时省略了小括号，这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法
加小括号的话打印的就是undefined
// 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
function abc(name) {
console.log(name); // undefined
}
abc()eg：
<button @click="btn2Click">按钮2button>// ....
methods: {
btn2Click (abc) {
console.log(abc);
},
}打印结果：
这是因为当我们在浏览器上进行一些操作，比如点击、拖拽等事件时，浏览器会自动生成事件对象。
3.方法定义时, 我们需要浏览器的event对象, 同时又需要其他参数，这时就可以通过$event来手动获取到浏览器的event对象
<button @click="btn3Click(abc, $event)">按钮3button>// ...
data: {
abc: 123
},
methods: {
btn3Click(abc, event) {
console.log(abc, event);
}
}打印结果:
v-on的事件修饰符
vue提供了事件修饰符来帮我们更好的处理一些事件，比如冒泡、阻止默认事件等。
.stop修饰符,阻止冒泡
<div @click="divClick">
<button @click.stop="btnClick">按钮button>
div>methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
}加了.stop修饰符后就会阻止btn的点击事件冒泡到div，打印结果只打印btnClick
.prevent修饰符,阻止默认事件
<button @click.prevent="doThis">button>阻止默认行为，没有修饰符
<a href="https://cn.vuejs.org" @click.prevent>阻止跳转a>串联修饰符
<a v-on:click.stop.prevent="doThat">a>.once 修饰符
<a v-on:click.once="doThis">a>按键修饰符
按键名：
<input @keyup.enter="onEnter">按键数字：
<input @keyup.13="onEnter">.passive修饰符
每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。
passive的作用就是告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。
注：passive和prevent冲突，不能同时绑定在一个监听器上。
.native修饰符
当我们需要监听一个组件的原生事件时，必须给对应的事件加上.native修饰符，才能进行监听。
比如Home组件里有一个BackTop组件，直接在Home组件里监听BackTop组件的点击事件是监听不到的，必须加上.native修饰符才可以：
<back-top @click.native="backClick"/>v-if和v-show
v-if
vue中的v-if、v-else、v-else-if这三个指令与js 的条件语句用法相似。
v-if 是惰性的，如果后面的条件为 false ，则对应的元素以及其子元素不会渲染，也就是不会有对应的标签出现在 DOM 中。
v-show
v-show是通过改变元素的display属性值来显示/隐藏元素的，也就是说在初始的时候无论条件是true还是false,都被编译，然后被缓存，而且 DOM 元素保留。
v-if和v-show对比
1.v-if 有更高的切换消耗。当需要在显示与隐藏之间切换很频繁时，使用 v-show
2.v-show 有更高的初始渲染消耗，当只有一次切换时，使用 v-if
v-for
遍历数组
<ul>
<li v-for="(item,index) in items">
{{index}} : {{item}}
li>
ul>~js:
// ....
data: {
items: ['a','b','c','d']
}
遍历对象
<ul id="v-for-object" class="demo">
<li v-for="(value,key) in object">
{{key}} : {{value}}
li>
ul>js:
// ...
data: {
object: {
name: 'douer',
color: 'white',
sex: 'male'
}
}
还可以用第三个参数作为索引:
<ul>
<li v-for="(value, key,index) in object">
{{index}} : {{key}} : {{value}}
li>
ul>
key值的作用
