事件详解、computed计算属性、v-model双向绑定

菜单切换

事件详解

1. 掌握 5 种写法

2. 事件修饰符
   参考文档

列表渲染

渲染一组数据
注意 v-for 嵌套

v-for="(item,index) in 数据包"
注意：
item  是遍历数据包中的每一条数据，格式不确定（对象、数组、字符串）
index  遍历时的序号

computed 计算属性

计算 宏观计算（对于数据的所有操作都可以称为一种计算）
属性 会返回新的运算结果给我们直接渲染
使用 computed 的优势

• 降低代码冗余度
• 逻辑代码的拓展性较强
• 提高渲染性能
• 能够根据 data 的变化，自动触发重新运算

1. 字符串翻转操作
   Hello —-> olleH

2. 按成绩筛选学员的功能

数据双向绑定

针对表单元素

1. 单向绑定

2. 双向绑定

3. 按键修饰符
   参考文档

4. 拓展练习

   • Enter 发送
   • Ctrl+Enter 发送

任务

1. 熟练掌握课堂案例

2. 拓展案例

   • 发送消息

3. 综合拓展案例【用户信息录入】

   • 录入功能 v-model v-on:click
   • 渲染用户 v-for v-if
   • 删除用户 Array.splice(index,1)
   • 删除所有
   • 学员筛选功能 computed