Vue—03—事件监听v-on；选择语句v-if；v-show；循环语句v-for；表单v-model；

---

 

一、事件监听v-on:

1、什么叫事件监听

v-on参数，就是可以监听我们触发的各种事件，比如点击click事件、键盘keyup事件；监听的原理是什么？我猜是因为我们的每一个事件都会产生一个对象，v-on捕获到了相关的对象就算是监听到了相关的事件；

2、v-on参数

 （1）不需要参数时，可以简写

 （2）需要参数时，加上括号，括号里面加参数即可

 （3）需要参数时，且需要event事件参数，使用$event参数

每当我们在浏览器点击某个按钮，拖拽某个页面时，浏览器会自动为我们生成一个event对象，也就是事件对象，有的时候我们需要这个对象，所以可以使用$event传递下去；

3、v-on的修饰符

(1)stop修饰符：可以阻止事件冒泡

此例中，如果我们不加stop，那么点击按钮的时候，btnclick和divclick两个事件都会被监听到；这就是因为事件冒泡；

 (2)prevent修饰符：

阻止默认的动作，比如form表单中当我们一点击“提交”时，就会自动帮助我们把数据收集起来提交，如果这个时候我们想自己定义一个submitclick事件去提交，则要把默认的阻止掉，可以使用prevent修饰符；

 (3)keycode/keyalias修饰符：

这个不是用在click事件的，这个是用在keyup事件的，主要是监听键盘敲击某个特殊的键的时候才会触发，比如q键，必去a键，比如回车键等；

once修饰符：

只触发一次回调函数

(4).native修饰符:

监听子组件时的一些事件比如像click这样原生事件。

我们需要写《ccpn   @click.native="m1" 》《/ccpn》

如果是监听子组件的非原生事件，则不需要，比如子父组件通信时，介绍子组件的通信内容《ccpn   @acceptChildrenMsg="m1" 》《/ccpn》

 

 

 二、条件判断v-if

当然上文那种写法比较麻烦，建议用下面这种计算属性的方式写；

 

 

三、v-show

v-show和vif的区别

 

 

 

四、循环语句v-for

1、遍历数组的两种方式：

第一种只取出数组的元素，第二种取出元素和下标；

 

 2、遍历对象的三种方式

第一种只取出对象的value,第二种取出对象的value和key，第三种取出对象的value和key和index；

3、使用v-for时，建议给标签属性加上key属性

这个key的话最好是固定唯一的；加上了key简单来说就是性能很高；

 

 使用v-bind语法，绑定一个：key属性，vue会自动去解析，并把值加到key上的；

 

 4、v-for遍历数组再探讨

因为v-for最主要用的还是遍历数组；

使用v-for遍历数组时，发生的改变有些是响应式的，即发生完后立即修改，

 splice方法很强，可以一个方法完成dql操作，第一个参数是其实下标，从第二个参数开始有变化了；

 但有些不是的，比如通过索引下标修改数组元素的值，就无法响应；

 

 

 

 

五、表单v-model

1、本质

注意是表单不是表格；

v-model是双向绑定，在表单里或者说对变量的值（也就是input框的value属性）进行修改，vue的data里的值也会改变；

其实v-model是一个语法糖，它的本质是通过输入框中v-bind：value和v-on：input实现；

如果实在无法理解v-model就用这两个属性绑定理解；

 

 

2、v-model如何结果单元框redio使用

当input的type为redio时会是一个单选框，单选框的值也就是value无论写什么都没法显示的，只会有一个小圆框；但是使用v-model双向绑定的时候，任然可以和value属性的值相匹配来决定那个小圆框会被选中；

 

 

3、v-model如何结合多选框checkbox使用

这里主要是用v-model的时候记得绑定的变量是一个数组类型了

 

 

4、v-model如何结合下拉框select使用

第一个是单选下拉框，第二个是多选下拉框；

多选的时候一样，绑定的要是数组；

 

 

 5、v-model的修饰符