一、Vuejs学习导图
二、邂逅Vuejs
2.1.认识Vuejs
在这之前 我们先看下Vue岗位的职业要求
渐进式框架
1.渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
2.或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
3.比如Core+Vue-router+Vuex，也可以满足你各种各样的需求
Vue特点和Web开发中常见的高级功能
1.解耦视图和数据
2.可复用的组件
3.前端路由技术
4.状态管理
5.虚拟DOM
学习Vue前提
1.从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
2.但是你需要具备一定的HTML、CSS、JavaScript基础。
2.2.Vue.js安装
方式一：直接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安装
通过webpack和CLI的使用，我们使用该方式
2.3.Vuejs初体验
我们来做我们的第一个Vue程序，体验一下Vue的响应式
创建Vue对象的时候，传入了一些options：{}
1.{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
2.{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。
浏览器执行代码的流程：
1.执行到10~13行代码显然出对应的HTML
2.执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。
并且，目前我们的代码是可以做到响应式的
Vue列表显示
现在，我们来展示一个更加复杂的数据：数据列表。
比如我们现在从服务器请求过来一个列表 希望展示到HTML中
当我们数组中的数据发生改变时，界面会自动改变
2.4.案例：计数器
点击 + 计数器+1
点击 - 计数器 -1
methods，该属性用于在Vue对象中定义方法。
@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)
2.5.Vue中的MVVM
什么是MVVM呢？
通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)
https://zh.wikipedia.org/wiki/MVVM
维基百科的官方解释，我们这里不再赘述
我们直接来看Vue的MVVM
View层：
1.视图层
2.在我们前端开发中，通常就是DOM层。
3.主要的作用是给用户展示各种信息。
Model层：
1.数据层
2.数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
3.在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
1.视图模型层
2.视图模型层是View和Model沟通的桥梁。
3.一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
4.另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
2.6.Vue的生命周期
