Vue学习笔记01

vm 框架 ViewModel

View 模板
Model 数据

vue的工作就是把提供给它的数据和模板渲染出来

mvvm 框架

1.m Model
2.v View
3.vm ViewModel

1. 简化项目
2. 方便维护
3. 考虑数据

用框架的好处

1. 代码量少了
2. 维护方便了
3. 业务逻辑更清晰了

vue组成

1. 指令 编写模板规则
2. (渲染模板)实例
3. (模板复用)组件
4. (管理页面跳转的)vue-router路由
5. (全局数据管理)vuex

学习vue

1. 如何编写模板
2. 如何管理数据

vue指令

1. 双向绑定 和 单向绑定

1. v-model 双向绑定指令（用它绑定的变量 既可以展示那个变量 也可以改变那个变量）
2. { {}} 插值表达式（它只是用来输出展示的 单向绑定）
3. v-bind: 单向绑定 （可以绑定到html的任意一个属性上）
4. v-html 绑定html 元素
5. v-text 绑定文本

2. 列表渲染

1. v-for=“循环表达式”

<div v-for="循环的项目 in 要循环的数组或对象"></div>

可以循环 对象 或者数组
如果要获取到 数组的下标 或者对象key

<div v-for="(对应的内容, 下标或者对象的key) in 要循环的数组或对象"></div>

如果循环的是数组 没有第三个参数
如果循环的是一个对象 第三个参数是下标 对象的下标 vue生成的第三个参数

<div v-for="(对应的内容, key, 下标) in 对象"></div>

3. 条件渲染

1. v-show (显示和隐藏)
   style display: block; display:none;
2. v-if (存在或不存在)
   html元素要不要存在dom里

<div v-show="true">box