vue基本使用、事件、computed、双向绑定

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. 按键修饰符 参考文档