目录：

1. Vue基本使用；

2. 语法；

3. v-for：渲染；

4. v-if

5. computed：计算属性；

6. v-model：双向绑定；

7. v-on:click：绑点击事件；

   
   

Vue介绍

1. 文档

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

1. 定位

渐进式 JavaScript 框架vue、@vue/cli、vue-router、vuex

1. 特点

数据驱动视图的思想  【思想转变成功，代表vue会了一半】

• Javascript   document.querySelector

• JQuery       封装方法，简化DOM操作代码 $('.cont')

• Vue          开发者只需要操作数据包，不需要操作DOM了，Vue帮我们操作DOM

1. 学习流程

钻牛角尖用  懂   改   造

1. 思想转变

• 找元素DOM

• 定义并操作数据包

Vue基本使用

• 下载

• 引入

• 准备容器

• 初始化Vue

Vue常用指令

1. {{}} 普通数据渲染

2. v-html   富文本渲染

3. v-bind:class   属性控制

4. v-if  v-show    条件渲染

5. v-on:click    事件绑定

菜单切换

1. 定义一个合理的数据包格式

2. 根据数据包（布尔值），控制li的active名称

3. 通过事件触发修改数据包，自动触发视图更新

4. 使用条件渲染，控制内容的显示

思考题

如何实现三个以上的菜单切换？提示: 在data中定义数字 (0,1,2....)

事件详解

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. 拓展案例

• 发送消息

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

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

• 渲染用户     v-for   v-if

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

• 删除所有    

• 学员筛选功能   computed