Vue 理论周 day1

Vue介绍

1. 文档

把官方文档当作小说看 官方文档

2. 定位

渐进式 JavaScript 框架

3. 特点

数据驱动视图

• Javascript 通过DOM操作,实现网页交互 API名称太长了
• JQuery 通过DOM操作,实现网页交互 缩短API名称
• Vue 开发者不需要进行DOM操作了，只需要操作数据包，Vue会自动更新DOM

4. 学习流程

用 懂 改 造

5. 思想转变

从找DOM，切换为，如何定义要给合理的数据包格式来控制

Vue基本使用

1. 下载
2. 引入初始化
3. 根节点
4. 数据渲染、交互实现

Vue常用指令

菜单切换

事件详解

1. 掌握5中写法

2. 事件修饰符 参考文档

列表渲染

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

v-for="(item,index) in 数据包"

item  是遍历数据包中的每一条数据，格式不确定（对象、数组、字符串）
index  遍历时的序号

computed 计算属性

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

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

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

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

当某个数据包需要处理（翻转、过滤）后再渲染，请想起computed

记忆宫殿 --- 将抽象的东西转为形象的图形，存放到脑袋里面

数据双向绑定

1. 单向绑定

2. 双向绑定

3. 按键修饰符 参考文档

4. 拓展练习

• Enter发送
• Ctrl+Enter发送

任务

1. 熟练掌握课堂案例

2. 拓展案例

• 发送消息

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

• 录入功能 v-model v-on:click

• 渲染用户 v-for v-if

• 删除用户 Array.splice(index,1)

• 删除所有

• 学员筛选功能 computed