一、Vue简介

• Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。
• Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架，它在架构设计上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一个Vue的实例，而这个实例又作用域页面上的某个HTML元素。
• 其核心在于通过数据驱动界面的更新和展示而非JS中通过操作DOM来改变页面的显示。

image image

   上图的DOM Listeners和Data Bindings是数据驱动中实现数据双向绑定的关键，实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters; 这也是Vue.js事件驱动的原理所在。

    对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦有变化，Model中的数据也会发生改变；

   对于Model而言，当我们操纵Model中的数据时，Data Bindings工具会帮助我们更改View中的DOM元素。

image

   此外，页面组件化也是Vue.js的核心，它提供了一种抽象，让我们可以用独立可服用的小组件来构建大型应用。

image

   所以，我们搭建的任何一个界面你可以把其抽象成为一个组件树，充分的去复用它。

思考： Vue.js和React、Angularjs、Knockout、AvalonJS的区别在哪？

Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。

Vue：是最近几年出来的一个开源Javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。

AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。

React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。

Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。

补充：MVC和MVVM的区别？

1) MVC

image

M(Model)是指业务模型，V(View)是指用户界面，C(controller)则是控制器。MVC架构主要用于后台管理系统等中大型项目的分层开发 。

M既数据模型；V即View视图, 视图层, 是指用户看到并与之交互的界面。比如由html元素组成的网页界面，或者软件的客户端界面。C即controller控制器, 控制器层，它是 Model 和 View 之间的胶水或者说是中间人。

运作流程

Model和View是完全隔离的，由C作为中间人来负责二者的交互； 同时三者是独立分开的。这样可以保证M和V的可测试性和复用性，但是一般由于C都是为特别的应用场景下的M和V做中介者，所以很难复用。

优缺点

优点：耦合性低、重用性高、部署快，生命周期成本低、可维护性高；

缺点：不适合小型，中等规模的应用程序，视图与控制器间的过于紧密的连接并且降低了视图对模型数据的访问。

2) MVVM

image

Model既每个页面的单独数据，View既每个页面中的HTML结构，VM既调度者；相比于MVC主要做了如下图示的调整：

image

优缺点

优点：数据驱动，调度均匀；缺点：不适合大型项目的架构设计。

二、Vue快速入门

2.1 Hello，拇指哥

代码如下：

image

    在上面代码中，我们通过new Vue()构建了一个Vue的实例。

    在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如：挂载元素（el）和数据（data），我们可以操纵数据改变视图。

   el表示Vue要操作哪一个元素下面的区域，比如：#app则表示操作id为app的元素下面的区域；

   data表示Vue实例的数据对象，data的属性能够响应数据的变化；每个 Vue 实例都会代理其 data 对象里所有的属性。

    我们打开浏览器的控制台输入 app.message = '大家好，我是旋之华！'，你会发现对应的HTML已经发生了改变，如下图所示：

image

    用 MVVM 的角度，来从新看待这个问题，我们会发现: Model就是data变量，ViewModel就是这里的new Vue()得到的对象。 

2.2 Vue中双向数据绑定

    MVVM模式其自身是实现了数据的双向绑定的，在Vue.js中我们可以通过指令v-model来实现数据双向绑定。

代码如下：

image

运行结果：

image

    新东西v-model，在Vue中这被称为指令，指令带有前缀v-表示它们是Vue.js提供的特殊属性。它们会在渲染过的DOM上应用特殊的响应式行为。当然，我们就把这指令当做是特殊的HTML特性(attribute)。

三、Vue中常用的指令(Directives)

带特殊前缀的 HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。比如：<div v-text="message"></div>；这里的 div 元素有一个 v-text 指令，其值为 message；Vue.js 会让该 div 的文本内容与 Vue 实例中的 message 属性值保持一致。

Directives 可以封装任何 DOM 操作。比如 v-attr 会操作一个元素的特性；v-repeat 会基于数组来复制一个元素；v-on会绑定事件等。

Vue.js提供了不少常用的内置指令，接下来我们快速搞定它们，这对我们接下来的开发帮助很大。主要有：

v-once指令

v-if指令

v-show指令

v-else指令

v-for指令

v-on指令

v-bind指令

v-text指令

v-html指令

如果需要了解其它指令，可以进入官网: https://cn.vuejs.org/v2/api/#v-text

3.1 v-once指令

执行一次性地插值，当数据改变时，插值处的内容不会更新。

image

3.2 v-if指令

条件渲染指令，根据表达式的真假来添加或删除元素。其语法结构是：v-if="expression"，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。

代码如下：

image

我们也可以打开控制台，做出如下输入，进一步体会数据驱动思想：

在上述案例中，Vue.js进行数据绑定也完全支持JavaScript表达式支持，这些表达式会在Vue实例的数据作用域下作为JavaScript被解析。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

   有个限制就是，每个绑定都只能包含单个表达式，以下则不会生效：

{{ var a = 1 }}

{{ if (ok) { return message } }}

3.3 v-show指令

也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

代码如下：

image

元素渲染情况：

image

v-show和v-if的区别：

• v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。
• v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

3.4 v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

代码如下：

（1）v-if和v-else结合

image

（2）v-else-if 和 v-else 结合

image

3.5 v-for指令

• 基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。
• 该指令之值，必须使用特定的语法(item, index) in items, 为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令

代码如下：

image image image

运行结果如下：

image

另外v-for也可以为数组索引指定别名（或者用于对象的键）：

<div v-for="(item, index) in items"></div>

<div v-for="(val, key) in object"></div>

<div v-for="(val, key, index) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:

   <div v-for="item in items" :key="item.id">
          {{ item.text }}
   </div>

3.5-1 v-text,v-html

动态添加
区别：

• {{message}}：将数据解析为纯文本，不能输出真正的html，在页面加载时显示{{}}，所以通常使用v-html和v-text代替，且花括号方式在以后可能被取消
• v-html="html"：输出真正的html
• v-text="text"：将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示{{}}

3.6 v-bind指令

动态地绑定一个或多个特性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc"

:class="{ red: isRed }" 或 :class="[classA, classB]" ...

:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...

绑定一个有属性的对象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"

...

语法结构：v-bind:argument="expression"

因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

案例实操：让HTML5学院在各大学院中处于选中状态

image image

运行结果

image

3.7 v-on指令

动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：

.stop - 调用 event.stopPropagation()；停止冒泡。

.prevent - 调用 event.preventDefault(); 停止监听原生事件。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.once - 触发一次。

使用手法：

<button v-on:click="doThis"></button>

<button v-on:click="doThat('hello', $event)"></button>

<button @click="doThis"></button>

<button @click.stop="doThis"></button>

<button @click.prevent="doThis"></button>

<form @submit.prevent></form>

<button @click.stop.prevent="doThis"></button>

<input @keyup.enter="onEnter">

<input @keyup.13="onEnter">

<button v-on:click.once="doThis"></button>

案例实操：

image

运行结果:

image

我们在上面案例中接触到了新的methods方法，通过这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例。这在后面的章节中我们还会介绍。

四、Vue指令篇—综合演练

结合上述指令，完成小码哥学生信息录入。主要功能有动态添加学生信息，动态删除学生信息，空值校验。

案例效果图如下：

image

案例代码如下：

image image image image

4.1 数据持久化

在开发中, 数据持久化主要是两种方式: 本地存储和网络存储，我们先来看下本地存储，主要sessionStorage和 localStorage两种方式。此处我们先用后者：

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

常用API

1）localStorage.setItem("key","value");

以“key”为名称存储一个值“value”

2）localStorage.getItem("key");

获取名称为“key”的值

3）localStorage.removeItem("key");

删除名称为“key”的信息

4）localStorage.clear()

清空localStorage中所有信息

核心代码：

image