一 Vue简介

Vue是一个渐进式的前端框架，什么是渐进式的呢？

 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex+axios，也可以满足你各种各样的需求。Vue的特点和Web开发中常见的高级功能：

 1、解耦视图和数据

 2、双向数据绑定

 3、可复用的组件

 4、前端路由技术

 5、状态管理

 6、虚拟DOM

二 Vue 安装使用

方式一：直接CDN引入

 开发环境版本，包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本，优化了尺寸和速度 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js

 生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

三 体验Vue

先看js代码，会发现创建了一个Vue对象

创建Vue对象的时候，传入了一个对象：{}

大括号{}中的el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里挂载到了id为app的元素上。

大括号{}中包含了data属性：该属性中通常会存储一些数据，好像上面例子中的str1就是直接定义出来的数据

四、Vue常见的语法格式

4.1、模板语法的初步认识

4.2、v-bind控制标签属性

4.3、v-on事件格式

4.4、定义Vue对象基本格式总结

五、vue控制类名和style样式(动态控制类名)

六、选项卡案例

七、v-if和v-show指令

v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。

点击收藏按钮案例：

八、列表和对象的渲染(初步使用)

九、表单数据绑定(双向数据绑定)

v-model的值是，vue接收表单元素的值的变量名， 即v1的值就是用户填写的内容(甚至可以在data中设置v1的值，从而设置表单元素的默认值)

十、Vue中的MVVM

什么是MVVM?

1,View层：视图层，在前端里就是我们常说的DOM层，主要作用是给用户展示各种信息；

2,Model层：数据层，数据可能是我们自定定义的数据，或者是从网络请求下来的数据；

3,ViewModel层：视图模型层，是View层和Model层沟通的桥梁；一方面它实现了数据绑定（Data Binding），将Model的改变实时反应到View中；另一方面它实现了DOM监听，当DOM发生改变可以对应改变数据（Data）