1. Vue是什么？
一套用于构建用户界面的渐进式JavaScript框架
构建用户界面：数据转界面 渐进式：简单应用小的核心库，复杂的用插件
2. Vue的特点
- 采用组件化模式，提高代码复用率、且让代码更好维护
- 组件化：不同模块分成不同的 .vue文件，这样可在不同界面引入使用
- 维护：单个组件修改不会影响其他的部分，也方便修改
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率
- 命令式编程：一步步实现
- 声明式编程：数据来渲染界面，操作数据而不是DOM
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
- 上图对比可以看出虚拟DOM可以让DOM节点复用
3. 搭建Vue开发环境
这样的提示是说目前是开发版本，发布不能用
- 方法一：在界面中
- 方法二：（在源码中设置）
- 显示没安装vue开发工具：
-
点击详情，选中
-
下图为一个简单案例，但是运用了vue语法：
总结：
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
- root容器里的代码被称为【vue】模板
- 容器（上面的）与vue实例一一对应
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}}中的内容要是js表达式（产生一个值），且可以自动读取到data的所有属性
- 一旦data中数据发生改变，那么页面中用到该数据的地方也会自动更新
4. 模板语法
- 插值语法：
- 功能: 用于解析标签体内容
- 写法：{{xxx}},xxx是js表达式，且可以直接读取到data的所有属性
- 指令语法：
- 功能： 用于解析标签（包括：标签属性、标签体内容、绑定事件……）
- 举例： v-bind：href="xxx" 或 简写为:href="xxx" xxx是js表达式，且可以直接读取到data的所有属性
5. 数据绑定
- 单向绑定： v-bind，只能通过数据改变界面
- 双向绑定：v-model,页面改变影响数据，数据改变影响界面（只能应用在表单类元素，输入的）。v-model是v-model:value的简写
6. el和data的两种写法
el
- new Vue时配置el属性
2. 先创建Vue实例，随后通过vm.$mount('#root')指定el的值
data
- 对象式：
- 函数式：
7. MVVM模型
- M（Model）:对应data中的数据
- V(View)：模板
- VM(ViewModel):Vue实例对象
总结
- data中所有的属性，最后都出现在vm身上
- vm身上的所有属性及Vue原型上所有属性，在Vue模板中都可以直接使用（$.. 或 _..）
8.数据代理
Object.defineProperty(添加属性的xx对象，'添加的属性名'，{ 配置项（value:18） enumerable:true // 开启遍历 wirtable: true // 控制属性可以被修改 configurable:true // 控制数据项能被删除 })
object.key(对象)得到该对象的所有属性名
- 更方便的修改属性的数值与赋值
数据代理概括：
- 通过一个对象代理对另一个对象中属性的操作（读/写）
- 更加方便的操作data中的数据
- 通过object。defineProperty()把data对象中所有的属性添加vm上。为每一个添加到vm上的属性，都在指定一个getter/setter，并且通过这两个函数操作data中对应的属性
- 开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情
