目录

1、v-on

2、事件修饰符

 3、按键修饰符

3.1、组合按钮

4、v-for

5、v-if和v-show

6、v-else 和 v-else-if

 6.1、v-if结合v-for来时用

1、v-on

v-on 指令用于给页面元素绑定事件。 语法： v-on:事件名="js 片段或函数名" 事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`

点赞取消
有{{num}}个赞

2、事件修饰符

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的 需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑， 而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 `v-on` 提供了事件修饰符。修饰符是由点开头的指令后缀来 表示的。 - `.stop` ：阻止事件冒泡到父元素 - `.prevent`：阻止默认事件发生 - `.capture`：使用事件捕获模式 - `.self`：只有元素自身触发事件才执行。（冒泡或捕获的都不执行） - `.once`：只执行一次

点赞
取消
有{{num}}个赞

效果：右键“点赞”，不会触发默认的浏览器右击事件；右键“取消”，会触发默认的浏览 器右击事件）

 就是点击“取消”会弹出下面这个框框

contextmenu表示的就是这个浏览器提示这个框框

 3、按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 `v-on` 在监听键盘事件时添 加按键修饰符

 全部的按键别名：

- `.enter` - `.tab` - `.delete` (捕获“删除”和“退格”键) - `.esc` - `.space` - `.up` - `.down` - `.left` - `.right`

点赞取消
有{{num}}个赞
大div
小div 
去百度

提示：

3.1、组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 - `.ctrl` - `.alt` - `.shift` 上面代码输入框按住CTRL+左键即是组合按键

4、v-for

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。 

   
当前索引：{{index}} ==>{{user}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} 
对象信息：{{k}}=={{v}}=={{i}}；

5、v-if和v-show

v-if 是直接删除元素

v-show 是使用style="display: none;"属性来隐藏

点我呀
if=看到我....
show=看到我

6、v-else 和 v-else-if

v-else 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。

点我呀{{random}}
= 0.75">看到我啦？！v-if >= 0.75
 0.5">看到我啦？！v-else-if > 0.5
 0.25">看到我啦？！v-else-if > 0.25
看到我啦？！v-else

 6.1、v-if结合v-for来时用

   
当前索引：{{index}} ==>{{user}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} 
对象信息：{{k}}=={{v}}=={{i}}；