Vue的v-on事件监听，v-if条件判断与v-for循环遍历
1.在Vue中监听事件使⽤v-on指令
v-onsquare是什么意思
作⽤：绑定事件监听器
缩写(语法糖）：@ （如v-on:click可简写为@click）
当通过methods中定义⽅法，以供@click调⽤时，需要注意参数问题：
情况⼀：如果该⽅法不需要额外参数，那么⽅法后的()可以不添加。
但是注意：如果⽅法本⾝中有⼀个参数，那么会默认将原⽣事件event参数传递进去，如果函数需要参数，但是没有传⼊, 那么函数的形参为undefined
情况⼆：如果需要同时传⼊某个参数，同时需要event时，可以通过$event传⼊事件。
Vue提供了修饰符来帮助我们⽅便的处理⼀些事件：
大学四六级报名官网
.stop - 调⽤ event.stopPropagation()。（阻⽌事件冒泡）
<!--1. .stop修饰符的使⽤：停⽌冒泡-->
<button @click.stop="doThis"></button>
.prevent - 调⽤ event.preventDefault()。（阻⽌事件提交）
<!--阻⽌默认⾏为-->
<button @click.pervent="doThis"></button>
<!--阻⽌默认⾏为，没有表达式-->
<form @submit.pervent></form>
<!--串联修饰符-->
<button @click.stop.pervent="doThis"></button>
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。（监听某个键盘键帽）
<!--键修饰符，键别名-->
<input @="onEnter">
幼儿口语<!--键修饰符，键代码-->
<input @keyup.13="onEnter">
.native - 监听组件根元素的原⽣事件。
.once - 只触发⼀次回调。
<button @="doThis"></button>
2.条件判断
1）.v-if、v-el-if、v-el
这三个指令与JavaScript的条件语句if、el、el if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
参加英语
<div id="app">
<h2 v-if="score>=90">优秀</h2>
沪科版初中数学目录<h2 v-el-if="score>=80">良好</h2>
<h2 v-el-if="score>=60">及格</h2>
<h2 v-el>不及格</h2>
<h1>{{result}}</h1>
</div>
转租赁<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 95
},
computed: {
result() {
let showMessage = '';
if (this.score >= 90) {
showMessage = '优秀'
} el if (this.score >= 80) {
showMessage = '良好'
}
// ...
return showMessage
}
}
})不知不觉英文
</script>
v-if的原理：
v-if后⾯的条件为fal时，对应的元素以及其⼦元素不会渲染，也就是根本不会有对应的标签出现在DOM中2）.条件渲染
案例：
⽤户登录时，可以切换使⽤⽤户账号登录还是邮箱地址登录
<div id="app">
<span v-if="isUr">
<label for="urname">⽤户账号</label>
<input type="text" id="urname" placeholder="⽤户账号">
</span>
<span v-el>
<label for="email">⽤户邮箱</label>
<input type="text" id="email" placeholder="⽤户邮箱">
</span>
<button @click="isUr = !isUr">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUr: true
}
})
</script>
效果图：
发现问题：
我们在有输⼊内容的情况下，切换了类型，我们会发现⽂字依然显⽰之前的输⼊的内容。
切换类型应该切换到另外⼀个input元素中了，在另⼀个input元素中，并没有输⼊内容。
问题解答：
考研考点查询
这是因为Vue在进⾏DOM渲染时，出于性能考虑，会尽可能的复⽤已经存在的元素，⽽不是重新创建新的元素。
在上⾯的案例中，Vue内部会发现原来的input元素不再使⽤，直接作为el中的input来使⽤了。
解决⽅案：
如果我们不希望Vue出现类似重复利⽤的问题，可以给对应的input添加key，并且我们需要保证key的不同
3）.v-show
它的⽤法和v-if⾮常相似，也⽤于决定⼀个元素是否渲染：
v-if当条件为fal时，压根不会有对应的元素在DOM中，当只有⼀次切换时，通过使⽤v-if
v-show当条件为fal时，仅仅是将元素的display属性设置为none⽽已，当需要在显⽰与隐藏之间切⽚很频繁时，使⽤v-show
3.v-for 循环遍历
v-for的语法类似于JavaScript中的for循环。
格式如下：item in items的形式
1）.遍历数组
the forgotten如果在遍历的过程中不需要使⽤索引值
语法格式： v-for=“movie in movies”
依次从movies中取出movie，并且在元素的内容中，可以使⽤Mustache语法，来使⽤movie
如果在遍历的过程中，需要元素在数组中的索引值
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。
<div id="app">
<!--1.在遍历的过程中，没有使⽤索引值(下标值)-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!--2.在遍历的过程中, 获取索引值-->
<ul>
<li v-for="(item, index) in names">
{{index+1}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['陈凯歌', '张艺谋', '姜⽂', '冯⼩刚']
}
impress的用法})
</script>
2）.遍历对象
