学习vue之前需要拥有的基础
- 熟悉HTML、CSS、JavaScript前端三大件基础知识
- 掌握一些ES6的新语法
- 初步掌握JSON，闭包，AJAX…等JavaScript技术
介绍
Vue.js是一套用于构建用户界面的 ‘ 渐进式框架 ’。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官网：Vue.js (vuejs.org)
特点
采用组件化模式，提高代码复用率，而且让代码更好维护
声明式编码，让程序员不需要直接操作DOM，提高开发效率
初始化Vue
1、想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象
2、容器中的代码被称为Vue模板
3、容器和Vue实例是一对一的关系，一个Vue实例只能控制一个容器，一个容器只能被一个实例控制
4、在真实开发中只有一个Vue实例，并且会配合组件一起使用
5、{{xxx}}中的xxx需要写js表达式，并且xxx可以自动读取到配置对象中data属性中的所有属性
6、一旦data中的数据发生改变，那么在页面中用到这个数据的地方也会自动更新
Vue中的MVVM模型
M：模型（Model）：对应data中的数据
V：视图（View）：模板
VM：视图模型（ViewModel）：Vue实例对象
tips
data中的所有属性，最后都出现在了vm身上
vm身上所有的属性以及Vue原型上所有的属性，在Vue模板中都可以直接使用
模板语法
插值语法
功能：用于解析标签体的内容
写法：{{ js表达式 }}，并且可以直接读取到data中的属性
指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）
例如：v-bind:href="js表达式"或简写为 :href="js表达式"，并且可以直接读取到data中的属性
tips
Vue中有许多的指令，且形式都是v-xxx
数据绑定
单向绑定(v-bind)
数据只能从data传递向页面，页面不能传递到data的属性中
双向绑定(v-model)
数据不仅能从data传递到页面，还能从页面传递到data
tips
双向数据绑定只能用在表单类元素上，如input、select等
v-model:可以简写成v-model，因为v-model默认收集的就是表单的value值
Vue中的数据代理
Vue中的数据代理是通过vm对象来代理data对象中属性的操作，好处是更加方便操作data中的数据
原理
通过Object.defineProperty()把data对象中所有属性添加到vm上，给每一个添加到vm上的属性，都指定一个get和set方法，在get和set内部去操作data中对应的数据
