零基础学VUE前端第一章 vue初识

JAVA架构前端技术 07-06 322

前言：

当前咱们对“jquery 加法”都比较关注，我们都需要剖析一些“jquery 加法”的相关文章。那么小编在网上收集了一些关于“jquery 加法””的相关内容，希望朋友们能喜欢，各位老铁们一起来学习一下吧！

vue是当前前端知识体系中炙手可热的技术，无论是企业级开发还是面试过程中vue都尤为重要。本章节作为vue的入门，通过本章节的学习，我们可以了解到什么是vue，什么是mvvm模式，并且可以开始使用代码完成第一个vue的案例，从中体会vue的特点与优点，掌握vue最基本的语法习惯，比如插值，属性计算，侦听器等。

1.1 vue.js介绍

在学习vue如何使用之前，我们需要需要知道什么是vue，vue有什么优势，以及它的优缺点是什么，通过本小结的学习我们可以对Vue有一个大概的认识。

1.1.1 什么是Vue

首先我们来看一下官方对自己的介绍：

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

官方介绍已经很详细了，简单来说Vue适合一个前端框架，使用场景类似JQuery，但是它与传统的JQuery的语法习惯和思想有所不同，具体有哪些不同，通过本书接下来的学习相信大家会有一个深刻的理解。

1.1.2 渐进式

vue官方介绍言简意赅，其中有一个名词叫做渐进式框架，这里我们解释下什么是渐进式。如图1.2所示，描述了渐进式的含义：开发者可以根据实际需求，逐渐递增所要的方式，但每个方式之间并没有特别强的依赖性。

图1.2 什么是渐进式

上图中也列举了Vue的提供功能模板，从左到右的顺序也是本书的一个大致学习路线，分别是Vue核心声明式渲染，为了实现代码重复而提供的组件，方便单页面构建的路由模块，状态管理模块，以及快速搭建Vue项目的脚手架工具。

在学习和使用Vue时我们可以只使用vue提供的声明式渲染这一个单独的功能，后续根据需求逐步引入和使用更多的技术到自己的项目中，而不是一次性强制要求使用到所有功能模块。

1.1.3 Vue的优点

Vue作为当前如此火热的前端框架，之所以这么受欢迎证明其拥有众多的优点，其具有的优点有易用，灵活，高效的特点，这里提供一个表格，列举了Vue的优点。

表1.1 vue优点说明

优点

说明

易用

掌握了html,css和javascript的知识后，配合文档的说明可以快速上手vue。

灵活

开发者可以选择使用vue作为项目的框架完成大部分功能，也可以将vue作为某个模块的工具库进行使用，可以和其他框架和库配合使用。

高效

小巧的体积，快速的虚拟dom操作

1.1.4 Vue特点

作为了解过前端开发的开发者来说，jquery是再熟悉不过的前端框架，jquery被大量的项目使用，jquery拥有和原生js类似的dom操作思想。Vue可以实现和jquery相同的功能，但是Vue的思想具有独特性，所有这里我们需要将vue和jquery进行区别对比，来快速了解vue的特点。

jQuery操作dom的思想：jQuery是使用选择器（$）选取DOM对象，然后通过对应的函数对其进行赋值、取值、事件绑定等操作。与原生的js操作思想是一样的，都是数据和标签在代码编写上在一起的，比如需要获取label标签的内容：$("selector").action();。

Vue操作dom的思想：Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

1.2 MVVM

上一小节中我们提到，Vue是一个基于WVVM思想的框架，那么到底什么是WVVM，本小节会为大家揭晓答案。简单的说MVVM是一种设计模式，是对 MVC和 MVP的进一步改进，所以学习MVVM之前我们需要介绍一些基本概念。

1.2.1 MVVM MVC MVP的区别

MVVM MVC MVP分别是三种模式，也可以说是三种思想，他们的目的都是为了将业务逻辑和页面展示分离，这样有利于开发中的分工，并且有利于代码的重用。

三种模式的区别：MVC表示模型-视图-控制器，MVP表示模型-视图-演示者，MVVM表示模型-视图-视图模型；MVP、MVVM都是由MVC衍生出的。MVC中，View会直接从Model中读取数据；MVP中，View并不直接使用Model。

当然以上只是简单的介绍MVVM，MVC，MVP的名词解释，接下来我们要分别探讨什么是MVVM，MVC，MVP。

1.2.2 MVC

MVC最初生根于服务器端的Web开发，后来渐渐能够胜任客户端Web开发，MVC模式将应用程序划分为三个部分：View,Controller,Model,他们的关系如图1.2所示。

图1.2 MVC模型示意图

MVC模式的特点在于实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。在客户端web开发中，就是将模型(M-数据、操作数据)、视图(V-显示数据的HTML元素)之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

1.2.3 MVP

MVP和MVC很类似，本质上是在MVC基础上的一次进化，也是为了实现业务逻辑和展示的分离。只不过MVP和MVC的区别在于MVP是把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离方向。如图1.3所示。

图1.3 MVP模型示意图

MVP特点在于　M、V、P之间双向通信，View 与 Model之间不通信，都通过 Presenter 传递。Presenter完全把Model和View进行了分离，主要的程序逻辑在Presenter里实现。

1.2.4 MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。MVVM示意图如图1.4所示。

Vue就是MVVM 模式的前端框架，数据双向绑定，减少了 DOM 操作，将更多精力放在数据和业务逻辑上。所以学习Vue需要先掌握MVVM思想模式。

图1.4 MVVM模型示意图

1.3 Vue起步

我们已经对Vue有了一个基本的了解，并且学习了WVVM模式，我们还了解到Vue可以类似Jquery实现对dom操作，也就是完成模型和dom元素的动态绑定，并且Vue的语法习惯区别与传统的JQuery，那么Vue应用如何编写呢？本小节我们开始着手完成第一个vue案例，了解vue的语法习惯。建议在代码编写过程中提柜Vue的特点以及优点。

起步案例中为了能够快速上手，这里并不使用vue-cli工具。

1.3.1 安装

从官网()下载vue.js,我们这里使用开发版，包含完整的警告和调试模式。下载流程如图1.5所示。

图1.5 vue.js下载

Vue.js文件下载完成之后，开始我们的项目。

本身中我们使用Visual Studio Code作为我们的开发工具，准备工作操作步骤如下：

首先在计算机本地文件夹中新建一个文件夹作为我们第一个案例的项目，取名为demo1。在demo1目录下创建index.html文件，用于第一个应用的代码编写。在demo1目录下新建js文件夹，专门用于保存js文件。将刚刚下载完成的vue.js文件赋值到js文件夹下。然后使用Vscode打开本地的demo1文件夹。

vscode打开本地文件夹之后的效果如图1.6所示：

图1.6 vscode打开本地文件夹

1.3.2 第一个案例

我们在第一个案例很简单，html页面中有一个div标签，我们要实现使用Vue对div标签中的文字进行动态绑定，也就是使用Vue为元素的内容赋值，实现对里div内容动态绑定数据模型的效果。

编辑index.html文件，内容如1-1所示：

例1-1 index.html

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="hello"><title>hello</title><script src="../vue.js"></script></head><body><div id="app">{{msg}}</div><script>Var app = new Vue({el: "#app",data: {msg: "hello world" //将data属性找那个msg属性的值绑定渲染到html中{{msg}}位置}})</script></body></html>

例5-1是一个基本入门案例。vue的使用基本步骤分为三个部分，分别是1.引入vue环境，2.在挂载点（vue和div的绑定关系）中编写模板(绑定的标签里面的内容)，3以及js中声明的实例(实例就是vue实例，将模板的内容交给vue来管)并且为模板中的属性赋值。

1.引入Vue环境

在挂载点编写模板，{{msg}}是模板语法，外层的双大括号为固定，括号内的msg表示变量名，与js中数据属性名保持一致。

js声明实例，在js中初始化了一个Vue实例，并且指定了选项属性，这些属性用于Vue的初始化。其中el的值通过选择器语法绑定模板语法出现在的div。data中定义属性名和属性值，data中定义的属性可以在模板语法中通过属性名取得值。

Var app = new Vue({

el: "#app",

data: {

msg: "hello world" //将data属性找那个msg属性的值绑定渲染到html中{{msg}}位置

}

})

1.2.3 运行结果

在浏览器运行index.html，在浏览器窗口中显示文字“hello world”。运行结果如图1.7所示。

图1.7 运行结果

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作，随着后续的学习，我们可以了解更多。

1.2.4 代码解释

Vue和JQuery语法习惯的最大区别在于Vue的初始化，每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的，语法如下：

var vm = new Vue({// 选项

3 el: "#app",

4 data: {

5 msg: "hello world" //将data属性找那个msg属性的值绑定渲染到html中{{msg}}位置

6 }

8 })

其中的选项也就是vue实例的属性，比如我们目前已经了解过的el和data,当创建一个 Vue 实例时，你可以传入一个选项对象，这些选项来创建你想要的行为，比如el是element的缩写，表示html中的挂载点的id，data中的属性用于为模板中的同名属性赋值，除以以外还有多种选项属性，后续我们会继续学习。

1.4 插值概述

第一个Vue案例中使用到了{{msg}}语法，我们了解到msg是取得Vue实例中data选项的msg属性的值，大括号中除了可以写属性名以外还有其他写法吗，本小节我们将学习模板语法已经插值概述，对应的就是大括号已经大括号内部的语法。

1.4.1 模板语法

模板语法也叫双大括号语法，Mustache语法，Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。简单的说{{msg}}就是模板，在模板中书写的语法叫做模板语法，模板的目的用于将数据模型和dom元素进行绑定。

1.4.2 插值表达式

{{msg}}实现了读取data中msg属性的值，有些场景下我们需要对数据进行额外的计算，而不是直接使用原本的值，这个时候我们就可以使用插值表达式。使用双大括号来包裹 js 代码构成插值表达式，用于将双大括号中的数据替换成对应属性值进行展示，插值表达式中可以写入JSON数字，字符串，数字，js表达式。比如{{msg+’你好’}}，表示取得msg的值之后再与/你好’字符串进行拼接展。

1.4.3 案例

接下来我们使用一个案例来列举插值表达式中都可以使用什么样的语法。其中包含了字符串的拼接，数值的计算，对象和数组的操作已经三木表达式的使用。创建index2.html，进行演示模板语法以及插值表达式，注意查看案例5-2中的注释对应的写法，以及运行效果。

例1-2 index2.html

1<!DOCTYPE html>

2<html lang="en">

<head><meta charset="utf-8"><meta name="hello"><title>hello</title><script src="../vue.js"></script></head><body><div id="app"><p>{{ str }}</p> <p>{{ num + 'aaa'}}</p><p>{{ str.length }}</p>

<p>{{ num }}</p> <p>{{ num+num1 }}</p> <p>{{ num > num1 }}</p> <p>{{ num.toFixed(2) }}</p>

<p>{{ flag }}</p>

<p>{{ arr }}</p> <p>{{ arr[3] }}</p> <p>{{ obj }}</p> <p>{{ obj.name }}</p>

<p>{{ arg1 }}</p> <p>{{ arg2 }}</p> <p>{{ arg3 }}</p> <p>{{ num > num1 ? "是" : "否" }}</p> </div><script>new Vue({el:"#app",data:{str: 'hello',num: 1,num1:100,flag: true,arr: [1,2,3,4],obj:{name:'aaa',age:20},param1: null,Param2: undefined,Param3: NaN}})</script></script></body></html>

接下来我们通过各个数据类型的操作插值表达式以及对应的运行效果来学习其用法。

字符串操作

代码：

<p>{{ str.length }}</p>

运行效果：

hello

1aaa

代码解释：

{{str}}是模板语法的最基本使用，获取vue实例中data里str属性的值,也就是”hello”并且渲染到html展示中。

{ num + 'aaa'}表示模板语法中数字和字符之间的使用“+”运算符表示数值转成字符串再与字符串拼接得到新的字符串渲染到html页面中。

{{ str.length }}表明模板语法中针对字符串类型的数据可以使用字符串函数属性，length返回字符串的长度的数值。

数值操作

代码：

<p>{{ num.toFixed(2) }}</p>

运行效果：

101

false

1.00

代码解释：

{{ num }}获取data里num属性的值,也就是数字1并且渲染到html展示中。

{{num+num1}}表示模板语法中数字和数字之间的使用“+”运算符表示数值进行加法的数学运算得到新的数值渲染到html页面中。

{{ num > num1}}表明模板语法中对两个数值进行大小的比较，返回布尔值并且渲染在页面中。

{{ num.toFixed(2) }}表示模板表达式中的数值支持使用js提供的数学函数，期中toFixed表示方法可把 num四舍五入为指定2位小数位数的数字。

布尔操作

代码：

运行效果：

true

代码解释：

{{ flag}}获取data里flag属性的值,也就是布尔值true并且渲染到html展示中。

数组操作

代码：

运行效果：

[ 1, 2, 3, 4 ]

代码解释：

{{ arr}}获取data里arr属性的值，arr是一个数组，js中中括号表示数组，并且将数组的值[ 1, 2, 3, 4 ]渲染到html展示中。

{{arr[3]}}表示模板语法中针对数组类型的数据获取其下标为3的数值并渲染到html页面中。

对象操作

代码：

运行效果：

{ "name": "aaa", "age": 20 }

aaa

代码解释：

{{ obj}}获取data里obj属性的值，obj是一个对象，并且将数组的值{ "name": "aaa", "age": 20 }渲染到html展示中。

{{obj.name]}}表示模板语法中针对对象类型的数据获取其指定的name属性的值并渲染到html页面中。

空数据操作

js中有三种类型比较特殊，null表示空，undefined表示未定义，Nan表示非数字。那么如果data选项里的某个属性的值是这三种类型中的一个时，页面如何渲染呢？

代码：

<p>{{ param1 }}</p>

<p>{{ param2 }}</p>

<p>{{ param3 }}</p>

运行效果：注意前两行为空字符串

NaN

代码解释：

{{ param1 }}获取data里param1属性的值，值为null,如果值为null时vue会渲染空字符串到html展示中。

{{ param2}}获取data里param2属性的值，值为undefined,如果值为undefined时vue会渲染空字符串到html展示中。

{{param3]}}获取data里para32属性的值，值为Nan,如果值为NaN时vue会渲染字符串“NaN”到html展示中。

三目表达式操作

模板表达式中不支持直接使用if等分支语句，如果想要根据判断显示不同的数据时可以采用三目表达式语法。

代码：

运行效果：

否

代码解释：

{{ num > num1 ? "是" : "否"}}先进行num和num1的大小判断，判断结果为false，根据三目表达式语法，当条件判断为false时取冒号之前的值也就是”否”并且渲染到html展示中。

1.5 属性计算

上一小结我们学习了插值表达式，语法允许在模板中使用模表达式，这样非常便利。但是同时也具有一定的局限性。设计它们的初衷是用于简单运算的。但是在模板中放入太多的逻辑会让模板过重且难以维护。例如以下代码：

<div id="example">{{ msg.split('').reverse().join('') }}</div>class Dog{

其中这里的表达式包含3个链式操作，并不是很清晰，此时遇到复杂逻辑时建议使用Vue特带的计算属性computed来进行处理，在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果。

接下来我们就一起来探究computed的使用。需求，将以上直接使用插值表达式的写法使用属性计算进行重写，代码如1-3所示。

例1-3 index3.html

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="hello"><title>hello</title><script src="../vue.js"></script></head><body><div id="app">{{reversedmsg}}</div><script>var app = new Vue({el: "#app",data: {msg: "hello world"},computed: {// 计算属性的 getterreversedmsg: function () {// `this` 指向 app 实例return this.msg.split(' ').reverse().join('')}}})</script></body></html>

最终的运行效果，在浏览器中展示：

worldhello

以上案例实现了使用属性计算完成对数据的计算，注意体会使用属性计算之后代码上比直接使用插入表达式更加精简，并且业务逻辑和数据展示进一步实现了分离，因为涉及到对字符串操作时不再需要修改模板语法，而是修改业务逻辑中的属性计算函数。

1.6 侦听器

在vue实例选项中，有一个属性叫做watch，也就是侦听器的意思，就像起名字的意思一样，侦听器用于当数据发生变化时，及时做出响应处理，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，比如需求要检测某个data中数据的值发生了改变，代码如1-4所示。

例1-4 index4.html

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="hello"><title>hello</title><script src="../vue.js"></script></head><body>

<div id="app"><input type="text" v-model="msg"><h2>状态：{{ state }}</h2></div>

watch: {//监听属性

// 绑定监听数据,表示对msg数据变化进行监听msg: function (e){// 当数据修改时做出响应(处理函数)this.state = '修改后'}}})</script></body></html>

打开浏览器访问index4.html，输入框显示默认文字，状态显示“修改前”，运行结果如图1.8所示

图1.8 修改前运行结果

当修改了输入框中的内容后，状态文字从“修改前”变成了“修改后”，证明侦听器生效，检测到了data中msg数据的变化，接着修改了state的值。修改后运行结果如图1.9

图19. 修改后运行结果

我们发现通过修改文本输入框的内容，从而改变了状态文字，其运行流程就是侦听器对文本数据框中的内容进行了监听，大概文字发生改变之后执行了侦听器，改变了state 的值，最终改变了浏览器窗口显示的文字。

1.7 本章小结Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。MVC表示“模型-视图-控制器”，MVP表示“模型-视图-演示者”，MVVM表示“模型-视图-视图模型”。使用双大括号来包裹 js 代码构成插值表达式，用于将双大括号中的数据替换成对应属性值进行展示，插值表达式中可以写入JSON数字，字符串，数字，js表达式。遇到复杂逻辑时建议使用Vue特带的计算属性computed来进行处理，在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果。侦听器用于当数据发生变化时，及时做出响应处理，当需要在数据变化时执行异步或开销较大的操作时1.8 理论习题与实践练1.思考题

1.1 请简述vue的优点。

1.2 请简述vue和jQuery的区别。

1.3 请简述vue起步的操作流程。

1.4 请简述什么是MVC，MVVM？

2.编程题2.1 回顾vue起步的操作流程，独自完成vue环境搭建，并要求练习使用到插值，属性计算以及侦听器。

本文地址：http://www.longkongtuishu.com/ca1caBAVsBlYBClQ.html

标签： #jquery 加法