渲染、事件处理器和class绑定_03章

1、列表渲染

①   v-for  — 根据一组数组的选项列表进行渲染；

语法： value,key in items

           value,key of items

如：v-for =  “item in items”     items指源数据数组； item指数组元素的每一项

②   变异方法 — vue提供了一组方法对数组进行操作时候会触发视图更新

push（）；                                splice（）；

shift（）；                                 sort（）；

unshift（）；                            reverse（）；

2、事件处理器

1、v-on — 用来监听DOM事件触发代码；

语法：v-on：eventName=“eventHandle”；

事件处理函数写在methods中统一管理；

事件对象（$event）在事件处理函数中获取，内联事件处理函数执行传入事件对象；

注意：

① 当 v-on：eventName=“eventHandle（abc）”；函数名加括号传参时，如 eventHandle（ev）{}，ev不是事件对象而是传入的参数；如果还需要事件对象需要手动添加，如v-on：eventName=“eventHandle（abc，$event）eventHandle（message,ev）{}

② 事件处理函数中的this指向的是当前这个根实例；

3、事件修饰符

事件处理函数只是纯粹的逻辑判断，不处理DOM事件的细节，例如阻止冒泡、取消默认行为、判断按键等

① 修饰符的位置  v-on：eventName.修饰符   通过由点（.）表示的指令后缀来调用修饰符；

② 修饰符

.shop    // 阻止冒泡                                   .prevent       // 取消默认行为

.capture                                                   .self

.once   // 执行一次

按键修饰符

.space                                                       .up

.down                                                        .left

.right                                                         .esc

.enter       //回车                                        .tab

.delete                                                       .alt

.shift                                                          .meta

.键位

4、条件渲染

v-show 指令 — 根据表达式的值，用来显示和隐藏元素；

语法：v-show=“表达式”；

元素会被渲染在页面中，中根据表达式的值进行css的切换；

5、动态class（动态绑定class）

class为元素的属性，也可以使用v-bind：class

语法:  : class=“{className：表达式}”；

注意：表达式的值为true，添加className；表达式的值为false，不添加className；

：class=“[className,classname]”;