前端Vue（二）——Vue事件的基本使用、Vue事件的参数传递、购物车数字增减小案例、v-show、v-if、v-bind

前端Vue（二）

Vue中事件的定义与使用

Vue的事件使用

1、事件的基本语法和使用

假设现在页面上有个按钮，怎么使点击就能让某个数值增加？

先来看下思路：

首先，先绑定事件，在想要绑定的标签上加上 v-on : 事件名字=“函数” （在js中的事件这里同样支持，不过稍有不同）：

事件统一定义在一个地方：
methods：{ xxx }

这时候测试可以发现成功触发。

接着继续：

可以通过 this 这个关键字，取到vue的实例：

来看下控制台：

可以看到拿得到。
在事件函数中this就是vue实例

到此，要干的事基本完成了，看成果：

可以发现，点击年龄就会增加了。

2、绑定事件的简单写法：

在vue2中，提供了事件的简化写法 “ @ ”：

简化写法：@事件名

再定义一个减少数字的函数：

结果：

3、事件函数优化

这两种写法，没有什么区别。

4、Vue事件的参数传递

比如某个变量现在是某一个数值，我想点击某个按钮，它就变成23：

由图可知，首先是@click这一块，传了23进来，然后到了下面的函数这的形参，接着传给this这一块，由于this代表的是vue的实例，所以vue里面的count数值就这样被改变。

当然，传递的参数可以是多个值：

注意：这里传递的字符串（23后面的那个）用的是单引号，因为外面有双引号括住了。

5、购物车数字小案例

这是很常见的案例：

6、v-show——控制标签是否展示

a、使用方式一

适用场景：适合频繁需要显示与隐藏的控件。如果是使用一次就不再用了，不推荐这种方式。

这么使用时，标签就会隐藏了。

来看下控制台：

b、使用方式二

这里定义一个 isShow。

在data里给这个变量赋值true，效果同样。

可以通过事件动态的控制这个值，来决定是否显示隐藏。

举个例子：

这样点击一下就隐藏，再点击就变成显示。

7、v-if——控制标签是否展示

使用方式：

如果此时是false，去查找页面元素的时候是找不到这个 h1 标签的！
效果跟v-show是一样的，但是原理不同，这点注意！

8、v-bind——给标签绑定属性

直接使用时：

但是不建议这么使用，因为这样就写死了。如果写在Vue中，就可以动态的绑定与更改里面的内容。
举个例子：

然后，此时可以绑定一个事件：

当然了。还能给很多东西绑定，比如src，可以动态的变化图片：

这里新放入了一个地址。

这样，当点击了按钮之后，就可以改变图片了。

a、v-bind简化写法

v-bind还有简化写法： ：属性名

之前的写法都可以改成这样。