Vue.js

课程介绍

内容概述

◼ 认识 Vuejs

◼ 为什么学习 Vuejs

◼ 简单认识一下 Vuejs

◼ Vuejs 安装方式

◼ CDN 引入

◼ 下载和引入

◼ NPM 安装管理

◼ Vuejs 初体验

◼ Hello Vuejs

◼ Vue 列表展示

◼ 案例：计数器

◼ Vuejs 的 MVVM

◼ Vue 中的 MVVM

 

为什么学习Vuejs？

我相信每个人学习 Vue 的目的是各不相同的。

◼ 可能你的公司正要将原有的项目使用 Vue 进行重构。

◼ 也可能是你的公司新项目决定使用 Vue 的技术栈。

◼ 当然，如果你现在正在换工作，你会发现招聘前端的需求中， 10 个有 8 个都对 Vue 有或多或少的要求。

◼ 当然，作为学习者我们知道 Vuejs 目前非常火，可以说是前端必备的一个技能。

 

简单认识Vuejs

◼ Vue ( 读音 /vjuː/ ，类似于 view) ，不要读错。

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

◼ 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验。

◼ 或者如果你希望将更多的业务逻辑使用 Vue 实现，那么 Vue 的核心库以及其生态系统。

◼ 比如 Core+Vue-router+Vuex ，也可以满足你各种各样的需求。

◼ Vue 有很多特点和 Web 开发中常见的高级功能

◼ 解耦视图和数据

◼ 可复用的组件

◼ 前端路由技术

◼ 状态管理

◼ 虚拟 DOM

◼ 这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行

讲解。

◼ 学习 Vuejs 的前提？

◼ 从零学习 Vue 开发，并不需要你具备其他类似于 Angular 、 React ，甚至是 jQuery 的经验。

◼ 但是你需要具备一定的 HTML 、 CSS 、 JavaScript 基础。

 

Vue.js安装

◼ 使用一个框架，我们第一步要做什么呢？安装下载它

◼ 安装 Vue 的方式有很多：

◼ 方式一：直接 CDN 引入

◼ 你可以选择引入开发环境版本还是生产环境版本

◼

方式二：下载和引入

◼

方式三： NPM 安装

◼ 后续通过 webpack 和 CLI 的使用，我们使用该方式

 

 

Hello Vuejs

我们来做我们的第一个 Vue 程序，体验一下 Vue 的响应式

◼

代码做了什么事情？

◼

我们来阅读 JavaScript 代码，会发现创建了一个 Vue 对象。

◼

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

◼

{} 中包含了 el 属性：该属性决定了这个 Vue 对象挂载到哪一个元

素上，很明显，我们这里是挂载到了 id 为 app 的元素上

◼

{} 中包含了 data 属性：该属性中通常会存储一些数据

◼

这些数据可以是我们直接定义出来的，比如像上面这样。

◼

也可能是来自网络，从服务器加载的。

◼

浏览器执行代码的流程：

◼

执行到 10~13 行代码显然出对应的 HTML

◼

执行第 16 行代码创建 Vue 对象，并且对原 HTML 进行解析和修改。

◼

并且，目前我们的代码是可以做到响应式的。

 

 

Vue列表显示

 

 

现在，我们来展示一个更加复杂的数据：数据列表。

◼

比如我们现在从服务器请求过来一个列表

◼

希望展示到 HTML 中。

◼

HTML 代码中，使用 v-for 指令

◼ 该指令我们后面会详细讲解，这里先学会使用。

◼

是不是变得 So Easy ，我们再也不需要在 JavaScript 代码中完成

DOM 的拼接相关操作了

◼

而且，更重要的是，它还是响应式的。

◼

也就是说，当我们数组中的数据发生改变时，界面会自

动改变。

◼

依然让我们打开开发者模式的 console ，来试一下

 

 

案例：计数器

◼

现在，我们来实现一个小的计数器

◼

点击 + 计数器 +1

◼

点击 - 计数器 -1

◼

这里，我们又要使用新的指令和属性了

◼

新的属性： methods ，该属性用于在 Vue 对象中定义方

法（函数）。

◼

新的指令： @click, 该指令用于监听某个元素的点击事

件，并且需要指定当发生点击时，执行的方法 ( 方法通

常是 methods 中定义的方法 )

◼

你可能会疑惑？

◼

这些 @click 是什么东西？

◼

Vue 对象中又是定义 el/data/methods ，到底都有哪些

东西可以定义，以及它们的作用是什么？

◼

这些疑惑在后续学习中都会一一解开。

 

 

Vue中的MVVM

什么是 MVVM 呢？

◼ 通常我们学习一个概念，最好的方式是去看维基百科 ( 对，千万别看成了百度百科 )

◼ https://zh.wikipedia.org/wiki/MVVM

◼ 维基百科的官方解释，我们这里不再赘述

◼ 我们直接来看 Vue 的 MVVM

 

 

View 层：视图层

➢

在我们前端开发中，通常就是 DOM 层。

➢

主要的作用是给用户展示各种信息。

 

Model 层：数据层

➢

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

➢

在我们计数器的案例中，就是后面抽取出来的 data ，当然，里面的数据可能没有这么简

单。

 

ViewModel 层：视图模型层

➢

视图模型层是 View 和 Model 沟通的桥梁。

➢

一方面它实现了 Data Binding ，也就是数据绑定，将 Model 的改变实时的反应到 View 中

➢

另一方面它实现了 DOM Listener ，也就是 DOM 监听，当 DOM 发生一些事件 ( 点击、滚动、

touch 等 ) 时，可以监听到，并在需要的情况下改变对应的 Data 。

 

计数器的MVVM

计数器的 MVVM

 

我们的计数器中就有严格的 MVVM 思想

 

View 依然是我们的 DOM

 

Model 就是我们我们抽离出来的 data

 

ViewModel 就是我们创建的 Vue 对象实例

 

它们之间如何工作呢？

 

首先 ViewModel 通过 Data Binding 让 obj 中的数据实时的在 DOM 中显示。

 

其次 ViewModel 通过 DOM Listener 来监听 DOM 事件，并且通过 methods 中的操作，来改变 data 中的数据。

 

有了 Vue 帮助我们完成 ViewModel 层的任务，在后续的开发，我们就可以专注于数据的处理，以及 DOM 的编写工作了。

 

创建Vue实例传入的options

 

你会发现，我们在创建 Vue 实例的时候，传入了一个对象 options 。

这个 options 中可以包含哪些选项呢？

详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

目前掌握这些选项：

el:

类型： string | HTMLElement

作用：决定之后 Vue 实例会管理哪一个 DOM 。

data:

类型： Object | Function （组件当中 data 必须是一个函数）

作用： Vue 实例对应的数据对象。

methods:

类型： { [key: string]: Function }

作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用。

 

 

模板语法

内容概述

插值操作

 

绑定属性

 

计算属性

 

事件监听

 

条件判断

 

循环遍历

 

阶段案例

 

v-model

 

 

Mustache

 

如何将 data 中的文本数据，插入到 HTML 中呢？

我们已经学习过了，可以通过 Mustache 语法 ( 也就是 双大括号 ) 。

Mustache: 胡子 / 胡须 .

我们可以像下面这样来使用，并且数据是响应式的

 

 

v-once

但是，在某些情况下，我们可能不希望界面随意的跟随改变

这个时候，我们就可以使用一个 Vue 的指令

v-once:

该指令后面不需要跟任何表达式 ( 比如之前的 v-for 后面是由跟表达式的 )

该指令表示元素和组件 ( 组件后面才会学习 ) 只渲染一次，不会随着数据的改变而改变。

代码如下：

 

 

v-html

某些情况下，我们从服务器请求到的数据本身就是一个 HTML 代码

 

如果我们直接通过 {{}} 来输出，会将 HTML 代码也一起输出。

 

但是我们可能希望的是按照 HTML 格式进行解析，并且显示对应的内容。

 

如果我们希望解析出 HTML 展示

  可以使用 v-html 指令

 

该指令后面往往会跟上一个 string 类型

 

会将 string 的 html 解析出来并且进行渲染

 

 

v-text

v-text 作用和 Mustache 比较相似：都是用于将数据显示在界面中

 

v-text 通常情况下，接受一个 string 类型

 

 

 

v-pre

v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法。

 

比如下面的代码：

 

第一个 h2 元素中的内容会被编译解析出来对应的内容

 

第二个 h2 元素中会直接显示 {{message}}

 

v-cloak

 

在某些情况下，我们浏览器可能会直接显然出未编译的 Mustache 标签。

 

cloak: 斗篷

 

前面我们学习的指令主要作用是将值插入到我们 模板的内容 当中。

 

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

 

比如动态绑定 a 元素的 href 属性

 

比如动态绑定 img 元素的 src 属性

 

这个时候，我们可以使用 v-bind 指令：

 

作用 ：动态绑定属性

 

缩写 ： :

 

预期 ： any (with argument) | Object (without argument)

 

参数 ： attrOrProp (optional)

 

下面，我们就具体来学习 v-bind 的使用。

 

v-bind基础

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值 ( 这个学到组件时再介绍 )

 

在开发中，有哪些属性需要动态进行绑定呢？

  还是有很多的，比如图片的链接 src 、网站的链接 href 、动态绑定一些类、样式等等

 

比如通过 Vue 实例中的 data 绑定元素的 src 和 href ，代码如下：

 

 

v-bind语法糖 

v-bind 有一个对应的语法糖，也就是简写方式

 在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。

 

简写方式如下：