Vue框架学习（一）

一、初识Vue

1、什么是Vue

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（来源：Vue 2.x 官方Guide文档）

1）工具链：是指在前端开发中用到的一系列工具，比如，使用脚手架工具（例如vue-cli、angular-cli、Yeoman等）来创建应用项目，使用依赖管理工具（例如npm、Bower等）来安装依赖包等。
2）渐进式框架的理解： “渐进式”，英文为Progressive，意为渐进的，逐步的。也就是说，可以根据需求选择性地使用其中的一部分组件，需要用到哪些组件，就使用哪一部分组件，并不强求一次性地使用它的全部功能组件。

2、Vue采用MVVM设计模式

MVVM，即Model-View-ViewModel，主要包含Model、View、ViewModel 3个部分。Model指的是数据部分，在此指的是JavaScript对象，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。ViewModel是连接视图与数据的视图模型，负责监听Model或者View的修改。

在MVVM中，Model和View是不能直接通信的，ViewModel就相当于一个Observer（观察者），监控着双方的动作，并及时通知双方进行相应操作。当Model发生变化时，ViewModel能够监听到这种变化，并及时通知View做出相应的修改；当View发生变化时，ViewModel也能监听到这种变化，并及时通知Model进行修改，实现了View和Model的互相解耦。

3、Vue的优势

1、轻量级，体积小

2、上手容易，代码简洁

3、秉承了Angular和React框架两者的优势，并且拥有自己独特的功能

4、双向数据绑定

5、一切都是组件，组件之间可以实现嵌套

 

二、Vue的下载和引入

1、下载地址

Vue 2.x 的官网下载地址：Vue 2.x 下载

初学者建议下载开发版本，即Vue.js，因为开发版本包含完整的警告和调试模式，更利于学习。

2、引入Vue

1、本地引入
当在HTML网页中使用Vue时，使用<script>标签引入vue.js 即可，示例如下：

<!-- 引入本地下载的vue -->
<script src="vue.js"></script>

2、CDN引入

<!-- 引入CDN加速的vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>