计算机系统应用教程网站

网站首页 > 技术文章 正文

第1章 Vue初识 vue从入门到实战

btikc 2024-12-17 11:34:26 技术文章 14 ℃ 0 评论

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

图1-1 本章核心内容

1.1 Vue.js介绍

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

1.1.1 什么是Vue

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

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

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

1.1.2 渐进式

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

图1-2 什么是渐进式

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

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

1.1.3 Vue的优点

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

表1-1 Vue优点说明

优点

说 明

易用

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

灵活

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

高效

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

1.1.4 Vue特点

2013年7月28日，尤雨溪，英文名叫Evan 首次提交到GitHub上，当时的名字叫Element 后来更名Seed.js。

2013年12月7日 尤雨溪发布版本0.6.0 正式更名为Vue.js，图标是代表勃勃生机的绿色。

2014年2月1日 尤雨溪发布Vue0.8到国外的Hacker News网站。

2015年10月26日 Vue.js发布1.0.0第一个里程碑版本，同年，Vue-router、Vuex、Vue-cli相继发布，标志着Vue从一个视图层库发展为一个渐进式框架。

2016年10月1日 Vue.js发布2.0版本，是第二个重要的里程碑，其吸收了React的虚拟DOM方案，还支持服务端渲染，自2.0之后，Vue在前端领域占据了举足轻重的地位。

2020年9月18日，发布了Vue3.0正式版本，提升了虚拟DOm算法的效率，对开发者也提供了支持TypeScript的开发。


1.2 MVVM

1.1节中提到，Vue是一个基于WVVM思想的框架，那么到底什么是MVVM，本节会为大家揭晓答案。简单的说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的名词解释，接下来将要分别探讨什么是MVC、MVP、MVVM。

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所示。

图1-4 MVVM模型示意图

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

1.3 Vue起步

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

起步案例中为了能够快速上手，这里使用CDN方式，CDN全程是Content Dilivery Network，即内容分发网络，CDN是建立在现有网络基础上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发等功能，使用户就近获取所需内容。

1.3.1 使用CDN

从官网（https://cn.vuejs.org）直接引入Vue.js链接的CDN服务商即可。具体流程如图1-5所示。

图1-5 vue.js的链接

接下来，在页面中引入<script>标签引入。代码如下所示。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="hello">
  6. <title>hello</title>
  7. <!--引入vue.js-->
  8. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  9. </head>
  10. <body>
  11. ...
  12. </body>
  13. </html>

1.3.2 第一个案例

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

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

例1-1 index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="hello">
  6. <title>hello</title>
  7. <!--引入vue.js-->
  8. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  9. </head>
  10. <body>
  11. <!--模板，双大括号里是属性名，名称与js代码中vue实例data属性中的属性相同，表示数据绑定-->
  12. <div id="app">{{msg}}</div>
  13. <script>
  14. const vm = Vue.createApp({
  15. data() {
  16. return {
  17. msg: 'Hello Vue!'
  18. }
  19. }
  20. }).mount('#app')
  21. </script>
  22. </body>
  23. </html>

例1-1是一个基本入门案例。vue的使用基本步骤分为三个部分，分别是：

（1）引入Vue环境，代码如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

（2）在挂载点（vue和div的绑定关系）中编写模板（绑定的标签里面的内容），{{msg}}是模板语法，外层的双大括号为固定，括号内的msg表示变量名，与js中数据属性名保持一致。代码如下：

<div id="app">{{msg}}</div>

（3）js中声明的实例（实例就是vue实例，将模板的内容交给vue来管）并且为模板中的属性赋值。js声明实例，在js中初始化了一个Vue实例，并且指定了选项属性，这些属性用于Vue的初始化。其中el的值通过选择器语法绑定模板语法出现在的div。data中定义属性名和属性值，data中定义的属性可以在模板语法中通过属性名取得值。代码如下：

const vm = Vue.createApp({

data() {

return {

msg: 'Hello Vue!'

}

}

}).mount('#app')

1.2.3 运行结果

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

图1-6 运行结果


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

1.2.4 应用程序实例

在一个使用Vue.js框架的页面程序中，需要创建一个应用程序实例，该实例提供程序上下文，其加载的整个组件树将共享相同的上下文。在Vue3.0中引入createApp()全局API，用来接受一个根组件选项对象作为参数，然后返回应用程序实例自身。

在组件选项对象中的data选项是一个函数，Vue在创建组件实例时会调用该函数，由于data()函数会返回一个数据对象，Vue将该对象包装到它的响应式系统中，即转换为一个代理对象，使Vue可以在访问或修改属性时执行依赖跟踪和更改通知，从而自动重新渲染DOM。

实例创建完毕后，可以调用mount()方法，上述代码将返回的根组件实例赋值给了变量vm，实际开发中对此没有严格要求，此处是为了方便后面内容讲解。

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，进行演示模板语法以及插值表达式，注意查看案例1-2中的注释对应的写法，以及运行效果。

例1-2 index2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="hello">
  6. <title>hello</title>
  7. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <!-- 字符串 -->
  12. <p>{{ str }}</p> <!--页面展示：hello-->
  13. <p>{{ num}}</p><!--页面展示：88-->
  14. <p>{{ str.length }}</p> <!--页面展示：3-->

  16. <!-- 数值 -->
  17. <p>{{ num }}</p> <!--页面展示：1-->
  18. <p>{{ num+num1 }}</p> <!--页面展示：101-->
  19. <p>{{ num > num1 }}</p> <!--页面展示：false-->
  20. <p>{{ num.toFixed(2) }}</p> <!--页面展示：1.00-->

  22. <!-- boolean -->
  23. <p>{{ flag }}</p> <!--页面展示：true-->

  25. <!-- 数组 -->
  26. <p>{{ arr }}</p> <!--页面展示：[1,2,3,4]-->
  27. <p>{{ arr[3] }}</p> <!--页面展示：4-->
  28. <!-- 对象 -->
  29. <p>{{ obj }}</p> <!--页面展示：{ "name": "aaa", "age": 20 }-->
  30. <p>{{ obj.name }}</p> <!--页面展示：aaa-->

  32. <!-- 三目运算符 -->
  33. <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否-->
  34. </div>
  35. <script>
  36. new Vue({
  37. el:"#app",
  38. data:{
  39. str: 'hello',
  40. num: 88,
  41. num1:100,
  42. flag: true,
  43. arr: [1,2,3,4],
  44. obj:{
  45. name:'aaa',
  46. age:20
  47. },
  48. param1: null,
  49. Param2: undefined,
  50. Param3: NaN
  51. }
  52. })
  53. </script>
  54. </script>
  55. </body>
  56. </html>

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

  1. 字符串操作

代码如下：

<p>{{ str }}</p>

<p>{{ num +’Number’}}</p>

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

运行效果如下：

欢迎学习前端技术

88Number

8

代码解释：

{{str}}是模板语法的最基本使用，获取vue实例中data里str属性的值,也就是“欢迎学习前端技术”并且渲染到html展示中。

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

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

  1. 数值操作

代码如下：

<p>{{ num }}</p>

<p>{{ num+num1 }}</p>

<p>{{ num > num1 }}</p>

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

运行效果如下：

88

188

false

88.00

代码解释：

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

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

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

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

  1. 布尔操作

代码如下：

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

运行效果如下：

true

代码解释：

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

  1. 数组操作

代码如下：

<p>{{ arr }}</p>

<p>{{ arr[3] }}</p>

运行效果如下：

[ 1, 2, 3, 4 ]

4

代码解释：

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

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

  1. 对象操作

代码如下：

<p>{{ obj }}</p>

<p>{{ obj.name }}</p>

运行效果如下：

{ "name": "张三", "age": 20 }

张三

代码解释：

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

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

  1. 三目表达式操作

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

代码如下：

<p>{{ num > num1 ? "是" : "否" }}</p>

运行效果如下：

否

代码解释：

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

1.5 Vue-devtools

为了更好的开发vue应用，我们需要调试用的工具，可以在工具中可视图化的查看vue对象的信息等，那么接下来我们就学习这么一个工具的安装和使用，工具的名字叫做vue-devtools。vue-devtools是一款基于chrome游览器的插件，所以我们需要提前安装好chrome浏览器。

1.5.1 安装使用

  • 第一步：下载压缩包资源文件。github主页地址：“https://github.com/arcliang/Vue-Devtools-”，打开页面点击code,然后点击Downloadzip将压缩包下载到本地然后解压缩即可。
  • 第二步：下下来之后打开google浏览器，输入地址chrome://extensions/ ，选中开发者模式，点击加载已解压的扩展程序。此步骤效果如图所示1-7所示

图1-7 扩展程序

  • 第三步：选中第一个步骤中压缩文件文件所在的目录，选中chrome文件夹。这里就将Vue-Devtools进行了安装。
  • 第四步：安装完成之后在扩展程序中可以找到Vue.js devtools，如图1-8所示。此时证明已经成功，谷歌浏览器打开任意一个vue应用，进入调试界面就可以找到Vue选项，如图1-9所示。

图1-8 安装成功

图1-9 vue调试选项。

1.6 小结

（1）Vue （读音 /vju?/，类似于 view）是一套用于构建用户界面的渐进式框架。

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

（3）MVC表示“模型-视图-控制器”，MVP表示“模型-视图-演示者”，MVVM表示“模型-视图-视图模型”。

（4）使用双大括号来包裹 js 代码构成插值表达式，用于将双大括号中的数据替换成对应属性值进行展示，插值表达式中可以写入JSON数字，字符串，数字，js表达式。

（5）遇到复杂逻辑时建议使用Vue特带的计算属性computed来进行处理，在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果。

（6）侦听器用于当数据发生变化时，及时做出响应处理，当需要在数据变化时执行异步或开销较大的操作时。

1.7 理论习题与实践练

1.思考题

（1） 请简述vue的优点。

（2）请简述vue和jQuery的区别。

（3）请简述vue起步的操作流程。

（4） 请简述什么是MVC，MVVM？

2.编程题

  • 回顾Vue起步的操作流程，独自完成Vue文件引用，并要求练习使用到插值，属性计算以及侦听器。

修改体例结构中，发现其它问题，列举如下：

  1. Vue以及其他字母的大小写，上下文注意统一。

图表的顺序建议改成 图1-1，图1-2，表1-1，表1-2等。

书中的所有图表均要在正文的相应处进行引出。关于图和表的引出可以采用的方式有“如图1-1所示”“（见图1-1）”“图1-1所示为”“见表1-1”“如表1-1所列”“表1-1列举了”。

  1. 图1-5中建议不使用这种箭头，改为在图上相应步骤旁边标注①②③等。
  2. 项目符号改为（1）（2）（3）等等。

对于案例，全书设计为一种体例格式。正文中引出格式统一为 如例1-1所示。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表