2、事件修饰符
在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的 需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑， 而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 `v-on` 提供了事件修饰符。修饰符是由点开头的指令后缀来 表示的。
`.stop` ：阻止事件冒泡到父元素
`.prevent`：阻止默认事件发生
`.capture`：使用事件捕获模式
`.self`：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
`.once`：只执行一次
<div id="app"> <!--右击事件，并阻止默认事件发生--> <button v-on:contextmenu.prevent="num++">点赞</button> <br /> <!--右击事件，不阻止默认事件发生--> <button v-on:contextmenu="decrement($event)">取消</button> <br /> <h1>有{{num}}个赞</h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { num: 100 }, methods: { decrement(ev) { // ev.preventDefault(); this.num--;} } }) </script>
效果：右键“点赞”，不会触发默认的浏览器右击事件；右键“取消”，会触发默认的浏览 器右击事件）
3、按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 `v-on` 在监听键盘事件时添 加按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"> <input v-on:keyup.13="submit"> 记住所有的 `keyCode` 比较困难，所以 Vue 为最常用的按键提供了别名： <input v-on:keyup.enter="submit"> <input @keyup.enter="submit">
全部的按键别名：
`.enter`
`.tab`
`.delete` (捕获“删除”和“退格”键)
`.esc`
`.space`
`.up`
`.down`
`.left`
`.right
4、组合按钮
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
`.ctrl`
`.alt`
`.shift`
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
5、v-for
遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。
1、遍历数组
语法：v-for="item in items"
items：要遍历的数组，需要在 vue 的 data 中定义好。
item：迭代得到的当前正在遍历的元素 示例：
<div id="app"> <ul> <li v-for="user in users"> {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { users: [ { name: '柳岩', gender: '女', age: 21 }, { name: '张三', gender: '男', age: 18 }, { name: '范冰冰', gender: '女', age: 24 }, { name: '刘亦菲', gender: '女', age: 18 }, { name: '古力娜扎', gender: '女', age: 25 } ] }, }) </script>
2、数组角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数： 语法：v-for="(item,index) in items"
items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从 0 开始。 示例：
<div id="app"> <ul> <li v-for="(user, index) in users"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul> </div>
3、遍历对象
v-for 除了可以迭代数组，也可以迭代对象。语法基本类似 语法：
v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"
1 个参数时，得到的是对象的属性值
2 个参数时，第一个是属性值，第二个是属性名
3 个参数时，第三个是索引，从 0 开始
<div id="app"> <ul> <li v-for="(value, key, index) in user"> {{index + 1}}. {{key}} - {{value}} </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el: "#app", data: { user: { name: '张三', gender: '男', age: 18 } } }) </script>
4、Key
用来标识每一个元素的唯一特征，这样 Vue 可以使用“就地复用”策略有效的提高渲染的 效率。
<ul> <li v-for="(item,index) in items" :key=”index”></li> </ul> <ul> <li v-for="item in items" :key=”item.id”></li> </ul>
如果 items 是数组，可以使用 index 作为每个元素的唯一标识 如果 items 是对象数组，可以使用 item.id 作为每个元素的唯一标识
6、v-if 和 v-show
1、基本用法
v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。
v-show，当得到结果为 true 时，所在的元素才会被显示。 语法：v-if="布尔表达式", v-show="布尔表达式",
示例：
<div id="app"> <button v-on:click="show = !show">点我呀</button> <br> <h1 v-if="show"> 看到我啦？！ </h1> <h1 v-show="show"> 看到我啦？！show </h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { show: true } }) </script>
2、与 v-for 结合
当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件。 修改 v-for 中的案例，添加 v-if：
<ul> <li v-for="(user, index) in users" v-if="user.gender == '女'"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul>
7、v-else 和 v-else-if
v-else 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。 示例：
<div id="app"> <button v-on:click="random=Math.random()">点我呀 </button><span>{{random}}</span> <h1 v-if="random >= 0.75"> 看到我啦？！v-if >= 0.75 </h1> <h1 v-else-if="random > 0.5"> 看到我啦？！v-else-if > 0.5 </h1> <h1 v-else-if="random > 0.25"> 看到我啦？！v-else-if > 0.25 </h1> <h1 v-else> 看到我啦？！v-else </h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { random: 1 } }) </script>
