一、v-on事件监听
1.1 v-on基本使用
我们前面学习了，{{}}和v-bind，这两货可以让我们将Vue实例中的数据绑定到DOM中。那么，产品经理又开始有奇怪的需求了，比如我们要点击按钮更换图片怎么办？怎么办呢？我们目前只会将数据绑定到DOM上，如何监听DOM里的事件，然后作用到Vue实例数据上呢？别急，这正是今天要学的v-on的主场。
产品经理太可恶，我们实现一个其他的事件监听案例，实现一个计数器。有按钮加和按钮减，然后将数值展示出来。
{{count}}
代码分析：
实现了v-on正常写法和更常用的语法糖写法
一般v-on绑定了方法，如最上面的+和-按钮，但是运算简单时，可以直接运算，如后面++和--按钮
延伸分析（v-on参数传递问题）：
上面代码里的方法都是不带参数的。点击按钮是事件监听，鼠标位置也可以是事件监听，那么怎么将DOM元素事件里的信息传递回来呢？下一节可以正是登场了。
1.2 v-on的参数传递问题
开始之前，我想请大家思考3个问题：
方法定义时没有参数，调用时（v-on绑定时）加不加括号有什么区别？
方法定义时有一个参数，事件调用时省略了方法的小括号，此时会发生什么？
方法定义时，需要传入DOM事件信息和其他参数，但是事件调用时，省略小括号会发生什么？只写一个参数会发生什么？
这种抽象的东西，我们只能上代码，然后带着上面的问题，去代码中分析，希望能将抽象具体化。下面的代码展现了同一个方法调用时加不加小括号，传不传入参数，传入浏览器事件的区别。
问题1：{{message1}}
问题2：{{message2}}
问题3：{{message3}}
代码分析：
方法定义时没有参数，那么调用时加不加括号都一样
-
方法定义时有一个参数
调用时不加小括号，Vue会默认将浏览器产生的event事件当作实参传入
调用时只有小括号没有实参，此时在方法内部的形参为undefined
-
方法定义时有两个参数，一个是数据，另一个是浏览器产生的事件对象
调用时不加小括号，Vue会默认将浏览器产生的event事件当作第一个实参传入，第二个为undefined
调用时只有小括号没有实参，在方法内部的两个形参都为undefined
调用时只有一个实参，在方法内部的另一个形参为undefined
注意：
调用时，要传入浏览器的事件对象，使用$event
方法定义时有参数，调用时不加小括号，默认第一个实参为浏览器事件对象
方法定义时有参数，调用时没有传入，则都为undefined
1.3 v-on的修饰符使用
Vue总是很贴心，毕竟是一个JS框架，当然会替我们着想了。我们拿到浏览器事件对象是用来进行加工处理的，那么Vue同样提供了一些修饰符帮我们处理浏览器事件对象。
.stop 调用event.stopPropagation()用于阻止默认事件冒泡
.prevent 调用event.preventDefault()用于阻止默认事件，比如提交按钮，点击后会默认提交然后转跳，用.prevent可以阻止
.{keyCode | keyAlias} 当事件从特定键触发时才触发回调。keyCode指键盘的编码，用于监听键盘的事件。
.native 监听组件根元素的原生事件，必须用在组件中
.once 只触发一次
接下来放上一坨代码举例示范
.stop修饰符举例
效果示例：
二、v-model实现表单元素和数据的双向绑定
v-model主要用于表单元素和数据的双向绑定，使用v-model="数据"，实现改变数据，表单元素也改变。
v-model其实是一个语法糖，完全可以自己实现，它本质上是包含两个操作：
v-bind绑定input元素的value值
v-on指令给当前元素绑定input事件
message：{{message}}
代码解析：
:value="message"将message绑定至input元素的value属性上
input元素里有个input事件，用于监听用户是否输入数据
input="message = $event.target.value"监听input事件，然后将事件的值传递给message
2.1 v-model结合radio类型使用
使用v-model即可将输入放入数据中，然后就可以进行处理和传输
在radio多个单选框中，JS的做法是将多个radio添加name属性，并且name属性值相同，从而只能从中选一个。在Vue中，如果v-model绑定的是同一个属性，那么name属性可以删除。在Vue中实现单选框的代码如下：
你选择的性别是：{{sex}}
2.2 v-model结合checkbox类型使用
checkbox有两种用法，一种是单选，一种是多选。单选绑定的是一个变量，而多选框checkbox则是绑定了一个数组。
{{message}}
你选择的兴趣爱好是：{{hobbies}}
2.3 v-model修饰符的使用
v-model当然也有修饰符，总共有3个需要提一下：
lazy修饰符：默认情况下，v-model是在input事件中同步输入框的内容，一旦有内容发生改变，对应data中的数据就会自动发送改变，这样的机制会使得变化很快。lazy修饰符可以让数据在失去焦点或者回车时才更新。
number修饰符：默认情况下，输入框中的内容都会当作字符串类型进行处理，加上number修饰符后，就可以将输入框里的内容自动转为数字类型
trim修饰符：过滤输入框中内容左右两遍的空格
如何使用，我们还是用代码实现一下：
lazy修饰符使用
{{message}}
number修饰符
{{typeof num}}-{{num}}
trim修饰符
{{showMsg}}
三、v-if条件判断
其实也就是if...else的条件判断，我印象中，我实现的两个假电商项目中，使用得较少。直接上代码了，代码实现了v-if的使用，v-if和v-else的使用，以及v-if和v-else-if和v-else的使用，最终还在计算属性中使用了v-if等条件判断
{{message}}
{{message}}
{{noMessage}}
优秀
良好
及格
不及格
{{result}}
四、v-for
一般for循环都是用来遍历的，在Vue里也是。一般用于遍历数组和对象
遍历数组时，分为两种情况，需要索引值和不需要索引值
{{item}}
{{index}}-{{item}}
遍历对象时，有三种情况：
{{item}}
{{key}}-{{value}}
{{index+1}...{{key}}-{{value}}
4.1 v-for绑定和不绑定key的区别
我们将之前先来完成一下看图描述。
第一步，我们有个一堆相同的元素ABCDE,此时想将F插入到B后面
第二步，按照DOM的算法，是将c更新成f，d更新成了c，e更新成了d这样循环下去。其实就是数组的移位思想。
第三步，这就是有没有key的对比，没有key的是左边图，有key的是右边图。有了key就能根据key来识别元素，从而达到从数组插入变成链表插入的效果。
五、v-show显示
主要用于展示元素，这里主要的问题就是和v-if的区别。毕竟v-if也可以用来展示或者隐藏元素
主要区别有以下：
v-if条件为false时，不会有对应的元素存在DOM中
v-show条件为false时，仅将元素的display属性设置为none
先来看代码使用一下：
{{message}}
{{message}}
那么肯定有小伙伴心中会有疑惑，v-if使用范围更大，记住v-if不就行了嘛？实际上开发中，确实使用v-if的较多。但是两者还是有区别的，当需要在显示和隐藏之间切换很频繁时，使用v-show，当只有一次切换时，使用v-if。
原因就是，v-if是对元素进行销毁和创建，而v-show只是CSS状态的切换，这就是为什么显示和隐藏频繁切换时要使用v-show的原因了。