循环（列表）渲染

• 如何遍历对象？—— 也可以使用 v-for
• key很重要。key不能乱写（如random或者index）

• v-for 和 v-if 不能一起使用（不建议一起使用）

  • vue是先用v-for循环，然后又每次循环又判断

    <template>
    <div>
    <p>遍历数组</p>
    <ul>
     <li
       v-for="(item, index) in listArr"
       :key="item.id"
     >
       {{index}}-{{item.id}}-{{item.title}}
     </li>
    </ul>
    <p>遍历对象</p>
    <ul>
     <li
       v-for="(val, key, index) in listObj"
       :key="key"
     >
       {{index}}-{{key}}-{{val.title}}
     </li>
    </ul>
    </div>
    </template>

    事件

• event 参数，自定义参数

• 事件修饰符，按键修饰符
• 【观察】事件被绑定到哪里？ ```vue

![截屏2020-10-15 上午11.52.57.png](https://cdn.nlark.com/yuque/0/2020/png/1670861/1602734022290-4438da4d-adcb-4947-8e06-9bde40a2843d.png#crop=0&crop=0&crop=1&crop=1&height=1474&id=RsX7W&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2020-10-15%20%E4%B8%8A%E5%8D%8811.52.57.png&originHeight=1474&originWidth=2410&originalType=binary&ratio=1&rotation=0&showTitle=false&size=585382&status=done&style=none&title=&width=2410)<br />![截屏2020-10-15 上午11.53.15.png](https://cdn.nlark.com/yuque/0/2020/png/1670861/1602734027788-158a2d71-872e-41ab-b914-58293a13fe69.png#crop=0&crop=0&crop=1&crop=1&height=288&id=PJxz8&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2020-10-15%20%E4%B8%8A%E5%8D%8811.53.15.png&originHeight=288&originWidth=920&originalType=binary&ratio=1&rotation=0&showTitle=false&size=49650&status=done&style=none&title=&width=920)

可以看出 

1. **event 就是原生的那个 event**
1. **事件是被挂载到当前元素的**

<br />
<a name="2JRac"></a>
# 事件修饰符
```html
<!-- 阻止单机事件继续传播 -->
<a @:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<from v-on:submit.prevent></from>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在event.target是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

<!-- 只要Ctrl按下就触发，即使同时按下了Alt 或 Shift -->
<button @:click.ctrl="onClick">W</button>

<!-- 只有ctrl被按下才触发 -->
<button v-on:click.ctrl.exact="onClick">W</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">W</button>

表单

• v-model
• 常见表单项 textare checkbox radio select
• 修饰符 lazy number trim ```html 去除前后空格

类似于防抖的功能，输入完成了，数据才变化

转换为数字

单复选框 check是一个布尔值

多复选框 checkedNames是一个数组 [‘Jack’, ‘Mike’]

单选按钮 picked是一个值

下拉列表 也是一个值

请选择 A B C ```