九、事件处理
1、v-on基础
- 作用：绑定事件监听器
- 缩写：@
- 预期：Function | Inline Statement | Object
- 参数：event
2、v-on参数
- 情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加
- 但是注意：如果方法本身中有一个参数，那么方法后的（）可以不添加
- 情况二：如果需要同时传入某个参数，同时需要even时，可以通过 $even 传入事件
3、事件修饰符
- 在某些情况下，我们拿到event的目的可能是进行一些事件处理
- Vue提供了修饰符来帮助我们方便的处理一些事件：
- .stop 阻止默认事件【常用】，调用event.stopPropagation()，修饰于内块
- .prevent ，阻止默认事件【常用】，等同于调用event.preventDefault()
- .{keyCode | keyAlias} 只当事件是从特定键触发时才会触发回调
- .native 监听组件根元素的原生事件
- .once 只触发一次【常用】
- .capture，使用事件的捕获模式，实现先捕获后冒泡，捕获的元素先执行
- .self，只有 event.target 是当前操作的元素时才触发事件
- .passive，事件的默认行为立即执行，无需等待事件回调执行完毕【一般使用在移动端开发中】
4、键盘事件
键盘上每个键都有自己的名字和编码
- @keyup.键盘别名：键盘触发事件
- @keydown.tab：Tab键按下触发
- 键盘的同时按下才触发
十、条件判断
1、v-if、v-else-if、v-else
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
1.1、简单的案例演示
1.2、v-if的原理
- v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染
- 也就是根本没有不会有对应的标签出现在DOM中
2、条件渲染案例
2.1、用户在登录时，可以切换用户的账号登录还是邮箱地址登录
2.2、案例中存在的问题
- 问题：在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前输入的内容
- 原因：因为 Vue 在进行 DOM 渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素
- 解决：为了解决出现类似重复利用的问题，可以给对应的 input 添加 key ，并且我们需要保证 key 的不同
3、v-show 与 v-if，均是决定一个元素是否渲染
v-if ：根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)，当条件为 false 时，包含 v-if 指令的元素，根本就不会在DOM中
v-show ：当条件为 false 时，v-show 只是给我们的元素添加了一个行内样式：display : none
开发中我们如何选择呢？
- 当需要在显示与隐藏之间切换很频繁时，使用 v-show
- 当只有一次切换时，通过使用 v-if
template只能配合v-if使用，template在页面渲染的时候会自动消失，而现实template内的内容十一、循环遍历
1、v-for遍历数组
- 使用场景：当我们有一组数据需要进行渲染时
- 格式：
v-for = "(item,index) in items" :key="index"其中 的index代表在原数组的索引值
2、v-for遍历对象
- 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是value
- 2、获取key和value方式：
v-for="(value,key) in info - 3、获取key、value和index：
v-for="(value,key,index) in info
3、key 作用与原理[面试集锦]
案例：index作为key，新增数据在旧数据之前添加，
.unshift()逆序添加【顺序添加两者绑定无区别】
3.1、index作为key[不绑定key值时，一般Vue默认index作为key]
3.2、id 作为key[效率高]
3.3、总结
react、Vue 中的 key 有什么作用（key的内部原理）
4、数组中哪些方法是响应式的——监测数组更新
阶段案例
案例一：点击列表中的哪一项，那么该项文字变为红色
案例二：图书购物车
十二、JavaScript高阶函数的使用
1、过滤器 filter 函数
注意：filter 中的回调函数有一个要求：必须返回一个 boolean 值
- 返回值为 true 时，函数内部会自动将这次回调的 n 加入到新的数组中
- 当返回 false 时，函数内部会过滤掉这次的 n
2、map 函数的使用
使用情况：对数组中的所有元素都进行变化时
3、reduce函数
作用： 对数组中所有的内容进行汇总var num = [1,2,3,4,5]; var res = num.reduce(function(total,num){ return total+num; //return total + Math.round(num);//对数组元素四舍五入并计算总和 },0); console.log(res)；//15 //num.reduce((total,num) => total += num, 0); //没有初始值initialValue（即上面例子中的0），当数组为0时会抛出异常提示reduce函数没有初始值，所以为兼容性一般加上initialValue4、案例：对nums数组中的小于100的每一项乘以二并取和【使用高阶函数实现 】
箭头函数写法：
点击跳转：下一篇：Vuejs进阶版
