（一）Vue.js简介与安装

Unit 1 Vue.js简介与安装

一、Vue概述

1. Vue是一个用来开发Web界面的前端框架，是个轻量级的工具，它提供了现代Web开发中常见的高级功能（eg: 逻辑视图与数据、可复用的组件、前端路由、状态管理、虚拟DOM等）。
2. MVVM模式： 简称“模型-视图-视图模型（Model-View-ViewModel）”：

• 模型： 指后端传递的数据；（eg: 对象、数组等）

• 视图： 指HTML页面；（eg: 页面视图）

• 视图模型： 是MVVM模式的核心，是连接View和Model的桥梁。（eg: Vue实例化对象）

MVVM有两个方向：
(一)是将“模型”转化成“视图”：即将后端传递的数据转化成所看到的页面，实现方式——数据绑定；
（二)是将“视图”转化为“模型”：即将所看到的页面转化成后端的数据，实现方式——DOM事件监听；
如果这两个方向都实现，称之为“数据的双向绑定”。

3. 在MVVM的框架中，视图和模型是不能直接通信的，它们通过ViewModel来通信，流程图如下：
   
   
   

二、Vue的定义

1. Vue是一款“友好的、多用途且高性能”的JavaScript框架，它能够帮助你创建“可维护性”和“可测试性更强”的代码库。

Vue是一个渐进式的JavaScript框架，渐进式的意义及体现如下：
(1)用户可以一步一步、有阶段性地来使用Vue；


(2)若已有一个现成的服务端应用，可将Vue作为该应用的一部分嵌入其中，进而使交互体验更丰富；


（3）如果希望将更多业务逻辑放在前端来实现，则Vue的核心库和其生态系统可满足用户的各种需求；（eg: Vue允许用户将一个网分割成可复用的组件，且每个组件都可以通过样式来渲染网页的各个部分。）


（4）若用户构建一个大型的应用，可能需要将东西分割成各自的组件和文件，Vue有一个命令行工具，可简化一个快速初始化真实的工程。

2. Vue本身具有响应式编程和组件化的特点：

（1）响应式：即“为保持状态和视图的同步”，又称为“数据绑定”，在声明实例new Vue({data:data})后自动对data里面的数据进行了视图上的绑定，修改data的数据，视图中对应数据也会随之更改。


（2）组件化：Vue组件化的理念——“一切都是组件”，Vue可以将任意封装好的代码注册成标签（eg:Vue.component(‘example’,Example),可以在模块中以的形式调用），如果组件设计合理，在很大程度上能减少重复开发，而且配合Vue的插件vue-loader
，可以将一个组件的CSS、HTML和JavaScript都写在一个文件里，做到模块化开发。（当Vue和vue-router和vue-resourse插件配合使用，满足开发单页面应用的基本条件，可"支持路由和异步请求"。）

3. Vue.js的开发模式

• Vue是基于MVVM模式实现的一套框架，MVVM模式分离视图和数据，通过自动化脚本实现自动化关联，ViewModel搭起了视图与数据的桥梁，同时在ViewModel里进行交互及逻辑处理。

MVVM模式的优势，如下：
（1）低耦合。将View和Model分离，当两者其中一个发生变更时，另外一个不会受到影响。


（2）重用性。View、ViewModel和Model三者都可以进行重用，可提高开发效率。


（3）HTML模块化。修改模板不影响逻辑和数据，模板可直接调试。


（4）数据自动处理。Model实现了标准的数据处理封装（eg:筛选、排序等）。


（5）双向绑定。通过DOM和Model双向绑定使数据更新自动化，可缩短开发时间。

三、安装Vue

1. 直接使用script标签引用的两种方式：

• 可以通过官网https://cn,vuejs.org/下载最新的稳定版本，下载完成后，直接引用下面script语句，引入到页面后，Vue就会被注册成一个全局变量：

<script src="vue.js"></script>

• 使用CDN方式，可直接使用最新版本的Vue,在页面中添加下面的script语句：

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

或者使用指定的版本号，eg:使用2.6.10版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>