前端学习04-Vue-指令-v-on、v-for、v-if

v-on

点赞实例，加赞和减赞

可以把 v-on:click 改成 @click也是一样的作用，效果一样

然后在两个div加上v-on:click

这个时候点击小的div会弹两次窗口，是因为事件冒泡的原因产生的

'stop'：阻止事件冒泡到父元素

'prevent'：阻止默认事件发生

'capture'：使用事件捕获模式

'self'：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

'once'：只执行一次

我们来阻止冒泡，给小div加上stop

这样页面就只会弹一次窗口了

现在看一下这个a标签

页面点击a标签会先弹窗，再跳转，我们使用prevent来阻止默认事件发生，这样就只会弹窗，不会跳转到百度

还可以 <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>，

表示阻止默认事件发生，阻止事件冒泡到父元素，再执行hello方法，结果也会弹一次窗口

大div只能被点击一次，加once

按键修饰符

keyup表示按键修饰符

up表示键盘的上键

down表示键盘的下键

要点到input框里面去按键盘的上下键

组合按键，按住ctrl + 单击input框，num变成10

========================================

v-for

拿到当前索引

获取对象信息

 

 

=============================

v-if和 v-show

当点击按钮的时候，两个都消失

可以看到 v-if是整个标签都消失了，而 v-show 是 style="display: none;"

===========================

v-else 和 v-else-if