Vue.js3开发基础与实战（微课版）课件全套 第1-12 章 初识Vue.js - -项目实战：电商后台管理系统

学习书籍的基础掌握前端基础技术，包括HTML、CSS和JavaScript；熟悉前端开发的基本概念和技术，例如DOM操作、浏览器事件、异步编程、ES6+语法等。熟练前端的常用工具，如开发工具VisualStudioCode（或WebStorm、HBuilderX）、浏览器开发者工具、CSS预处理（如：Sass、Less和Stylus）等。第一章初识Vue.js学习目标了解前端技术的发展和前端主流框架熟悉前端架构模式的发展熟悉Vue设计思想和特点以及Vue3的新特性掌握Vue的安装和使用前端技术作为互联网技术中重要组成部分，近些年正在不断的发展。前端开发所设计到的领域范围越来越广，已不仅仅局限于浏览器的呈现，还包括微信小程序、移动端App开发等。并且前端开发处理的业务也越来越多，网页也变得越来越丰富和动态化，这一切都离不开前端技术的核心JavaScript技术。JavaScript的出现使得网页变得更加的动态化和强大，但是现在开发模式中基本上都是前后端分离开发的，以前很多服务端代码的逻辑也放到了前端进行处理，这就导致了前端需要写大量的的JavaScript代码来操作HTML和CSS，如果没有一个标准的组织形式，那么开发一个前端网站是一件极其痛苦的事情。所以现在的前端开发者都会选择使用前端的各种JavaScript框架来实现简单、高效的开发，常见的框架有React、Angular等，而Vue.js也是最主流的框架之一，这也是本书详细讲解Vue.js的原因。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍前端技术的发展1、前端的起源自1946年世界上第一台计算机“ENIAC”诞生以来，标志着电脑时代的到来。在随后的几十年里，不断涌现出Unix、Linux、MacOS、Windows等操作系统，以及B语言、C语言、C++等编程语言。1989年，英国计算机科学家TimBerners-Lee（蒂姆·伯纳斯·李）在CERN(欧洲粒子物理实验室)为了方便科学家们之间看文档、传论文而发明了万维网（WorldWideWeb，简称WWW）。1990年，蒂姆·伯纳斯·李和同事发明了HTML语言，并使用HTML通过Internet实现了HTTP代理与服务器的第一次通讯，这也是世界上第一套具备前后端的web系统。1991年8月6日，世界上第一个站点info.cern.ch上网，该站点主要介绍万维网是什么、如何使用网页浏览器、如何如何建立一个网页服务器等。1994年10月蒂姆·伯纳斯·李在麻省理工学院成立了万维网联盟W3C，并开始制定web标准规范；同年美国Netscape网景公司推出了第一版Navigator，哈坤·利提出了CSS设计建议。前端技术的发展1995年Netscape的布兰登·艾奇发明了网页编程语言JavaScript，实现了对网页的动态交互和渲染，它的出现使得网页开始从静态页面向动态化发展。JavaScript发展初期并没有指定标准，所以当时除了Netscape的JavaScript外，还有微软的JScript和CEnvi的ScriptEase形成了三足鼎立局面。

1996年11月，Netscape决定将JavaScript提交给国际标准化组织ECMA（前身为欧洲计算机制造商协会）希望JavaScript能够成为国际标准。1997年，在ECMA的协调下，由Netscape、Sun、微软、Borland共同确定了一个统一标准：ECMA-262，规定了浏览器脚本语言的标准，并将这种标准称为ECMAScript。现在，完整的JavaScript实现由三个部分组成：ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）。随着时间的推移，HTML、CSS和ECMAScript标准得到了不断更新和改进。这三个技术已成为前端开发的核心技术，扮演着至关重要的角色。前端技术的发展2、从未分离的前后端开发到前后端分离开发前后端未分离时代：在互联网发展早期，HTML、CSS和JavaScript技术已经问世，但开发出的页面却依然是静态的，即页面中展示的数据都是固定的。如若想要实现动态网站，就需要借助服务器端技术，比如JSP、PHP、ASP等，来生成动态页面。那时候的前后端开发是紧密结合的，前端代码是后端代码的一部分。前端使用HTML、CSS和JavaScript技术编写静态模板，后端使用模板组装数据并将其返回给浏览器进行展示。这种做法的缺点在于，由于需要服务端返回整个页面内容，响应速度就较慢。而且，只要页面中有数据改变，就需要重新加载整个页面的内容。Ajax的诞生：2005年Ajax被JesseJamesGarrett正式提出，并且Ajax技术已经应用到了Google的Gmail、GoogleMap等应用中被引起广泛的重视。Ajax允许JavaScript脚本发送HTTP请求给服务端，并把服务端返回的数据使用JavaScript渲染更新页面，而不需要重载整个页面，这使得程序能够更快地回应用户的操作。前端技术的发展前后端分离时代：随着Ajax技术的问世，前端开始独立处理数据渲染逻辑，不再依赖于JSP等服务端动态页面技术，而后端只需要关注数据的提供。因此，前后端开始出现了明确的分工，前端开始独立进行开发、测试和部署，技术也得到了快速的发展。为了提高代码复用性、维护性和按需加载等，模块化开发应运而生。随后，随着前端实现的功能越来越复杂，大量采用MVC或MVVM架构模式的框架出现了。此外，前端也逐渐走向工程化阶段，从多页面网页应用到SPA单页面应用，再到服务端渲染技术SSR等技术层出不穷。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍前端主流框架介绍尽管使用HTML、CSS、JavaScript也能开发网站，但是大型商业应用的功能和代码量非常的庞大，其交互逻辑也十分复杂繁琐。因此，为了快速、高效地开发应用并提高其灵活性和可扩展性，采用前端优秀框架成为了不错的选择。由于不同用途需要，前端涌现出各种框架，而当前最主流的三大框架分别为Vue、React和AngularJS

。前端主流框架介绍1、AngularJSAngularJS诞生于2009年，，后为Google所收购。AngularJS是一个以JavaScript编写的应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了HTML，实现一套框架支持多种平台，适用于移动端和PC端。AngularJS有着诸多特性，最为核心的是：MVVM、自动化双向数据绑定、语义化标签等。Angular是AngularJS的重写，区别于AngularJS的是它使用的是TypeScript语言编写，它采用了现代化的架构模式，包括组件化、服务、依赖注入、模块化等，并且还提供了更好的性能和安全性，以及大量的工具和库来帮助开发人员更快地构建应用程序。前端主流框架介绍2、ReactReact是由Facebook开发和开源的一个可以简单快捷构建用户界面的前端框架，它使用JSX（JavaScriptXML，在JavaScript代码中写XML/HTML格式的代码）语法，主要用于单页面应用程序的开发，性能出众。React的核心概念是组件化，将复杂的UI分解成组件，并组合成树形结构通过构建虚拟的DOM对象，对多次DOM操作进行一次性更新以实现快速的渲染，并且组件也可以复用和嵌套使用；React具有非常好的灵活性，可以与已知的库或框架很好地配合。前端主流框架介绍3、VueVue.js是一款渐进式JavaScript框架，用于构建用户界面。它继承了Angular和React的许多特点（如VirtualDOM、双向数据绑定、响应式属性和组件化开发），并对其进行了改进和优化。Vue采用了自底向上增量开发的设计思路，使得开发人员可以根据需要逐步引入其功能和库。Vue的核心库只关注视图层，易于学习，同时也很容易与其它库或已有项目整合。除此之外，Vue的单文件组件和其生态系统支持库也可以用于开发复杂的单页应用。由于Vue具有轻量级、易用性和灵活性等特点，因此在前端开发中广受欢迎。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍前端架构模式随着前端业务需求的增多，软件的规模和复杂度也不断增加。在这种情况下，若没有一套完整的架构设计，开发难度将会极大。在开发中，我们一直遵循“高内聚低耦合”的原则。因此，在架构设计上，我们必须考虑解耦，将应用的数据、视图和逻辑进行分离，以提高代码的复用性、可读性和可维护性。下面我们介绍下前端开发的软件架构模式。前端架构模式1、MVC模式MVC是早期最常见的一种架构模式，很多的框架也是MVC架构的。最早是在前后端没有分离的时候，因为前端是属于后端的一部分，后端为了解耦分离而设计出了MVC的模式，之后前端借鉴后端也设计出了MVC的模式来用。MVC中，M指的是Model数据模型，V指的是View视图展示，C指的是Controller控制器。三者之间的交互方式如图1-1所示。在图中View接收到了用户行为然后传递给Controller控制器，控制器完成业务逻辑通知Model改变状态，Model会请求后端API返回数据然后将返回后的数据发送给View更新视图展示给用户。在MVC中Controller担任Model与View之间的桥梁，用于控制程序的逻辑流程。图1-1前端架构模式当然如果有用户操作了，那么MVC的交互方式也可能是如图1-2和图1-3所示。图1-3图1-2前端架构模式2、MVVM模式MVVM（Model-View-ViewModel）,用ViewModel代替了Controller，MVVM的核心思想是可以实现DOM的自动更新。它基于数据绑定，将视图与数据状态解耦。当View中数据变化时将自动反映到ViewModel上，ViewModel会把View的变化同步到Model中，反之，Model中数据变化也会通过ViewModel同步到View上显示出来，如图1-4所示。图1-4MVVM真正意义上的实现了View和Model层的解耦，使得视图的开发和数据状态改变进行解耦，让开发者更加专注于业务逻辑的实现，提高了代码的复用性、可读性和可维护性。同时，前端框架如Vue和React等的出现也为MVVM模式的实现提供了强有力的支持，让前端应用的开发更加高效和便捷。前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍Vue.js介绍1、Vue.js简介Vue.js（以下简称为Vue，读音为/vjuː/，类似view）官方定义为一个渐进式的用于构建用户界面的JavaScript框架，具有很强的可维护性和可测试性。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，开发者可以使用Vue完整框架加上第三方库进行灵活的开发，也可以在任何项目中把Vue部分功能作为WebComponents进行嵌入以带来更加丰富的交互体验。Vue的核心库及其生态系统完全能够为复杂的单页应用提供驱动，如使用VueRouter可以实现单页面路由、VueX或Pinia可以实现状态管理，使用完整的工具链可以让开发者简单快速的完成项目的构建和部署。Vue.js介绍Vue基于标准的HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以帮助开发者高效地开发用户界面。Vue的一些主要特点如下：简单易学：只要熟悉HTML、CSS、JavaScript知识，就可以快速上手Vue，学习成本低。双向数据绑定：Vue基于MVVM模式设计，这样不管是数据或者视图发生了改变都会同步到另一层进行改变，典型的就是表单数据绑定的使用。组件化：组件系统是vue中的一个重要概念，它允许我们使用小型、独立和通常可复用的组件构建大型应用；并且vue支持单文件组件每个vue文件都是一个独立组件，在文件内都包涵了属于组件自己的HTML、CSS（或SCSS）、JavaScript结构。声明式渲染：Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。响应式：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。指令化：Vue提供了很多的v-前缀的指令，当然开发者也可以自定义指令，这些指令都可以绑定到元素上给元素赋予不同的响应行为。插件化：Vue提供了对插件的支持，只要通过use方式安装了插件就可以全局使用，非常方便，例如：VueRouter、VueX、Axios插件等；Vue.js介绍2、Vue的发展史2013年的时候Google打造的AngularJS大概是成长速度最快的Javascript框架了，它具有基于MVVM模式、具备强大的数据绑定和依赖注入功能等特点，让其成为了构建前端大型应用的一个非常不错的选择。2013年，在Google工作的尤雨溪，受到Angular的启发，开发出了一款轻量级框架，并首次提交到GitHub上当时的名字叫Element后来更名为Seed.js。2013年12月7日，尤雨溪发布版本0.6.0并正式更名为Vue.js。2014年，Vue正式对外发布，并发布了版本号0.8.0、0.9.0，也有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。2015年6月，代号DragonBall的0.12.0版本在Laravel社区首次使用，从此Vue便在JS社区打响了知名度。 Vue.js介绍2015年10月26日，Vue发布了第一个里程碑版本号1.0.0Evangelion。同年VueRouter、Vuex、Vue-cli相继发布，标志着Vue从一个视图层库发展为一个渐进式框架。2016年10月1日，Vue.js发布2.0版本，它吸收了React的虚拟DOM方案，还支持服务端渲染。自从Vue2.0发布之后，Vue就成了前端领域的热门话题。2019年12年5日，在万众期待中，尤雨溪公布了Vue3源代码，此时的Vue3仍处于Alpha版本。2020年09月18日，Vue.js3.0正式发布。2022年2月7日，Vue3成为新的默认版本。 Vue.js介绍3、Vue3新特性Vue3的发布是对Vue框架的一次重大改造，当然在使用上大部分其实跟Vue2还是一致的，只是添加了部分新的支持或改变。主要改变如下：更好的Typescript支持，Vue3是基于TypeScipt编写的所以支持Typescript语法的使用；移除了一些不常用的API，如inline-template，filter过滤器；新增了一些基于函数的API；通过对虚拟DOM优化、编译模块的优化、SSR渲染的优化等使得Vue3的性能更高，运行速度更快；通过对Tree-Shaking的支持，让模块可以按需引入，项目打包体积更小；新增CompositionAPI（组合API）实现了逻辑的复用，并且更易维护；响应式系统的核心由defineProperty换成了Proxy代理对象；生命周期函数发生了改变，周期函数setup代替了beforeCreate和created，beforeDestroy改名为beforeUnmount、destoryed改名为unmounted，并添加了生命周期相关函数的组合式API；... Vue.js介绍同样Vue3的改变对于其工具链和第三方库的影响也是有的，之前很多对Vue2支持的各种插件也发生了一些改变，主要有以下几个：生态系统提供了新的项目构建工具Vite，Vue2版本的构建工具为Vue-CLI,当然Vue3项目依然可以使用Vue-CLI进行构建；Vue常用的UI框架Element发布了对于Vue3支持的ElementPlus；提供了新的状态管理工具Pinia，Vue2版本的状态管理工具为VueX，同样Vue3中依然可以使用VueX；... 前端技术的发展12前端主流框架介绍3前端架构模式4Vue.js的使用5Vue.js介绍Vue.js的使用1、开发工具的选择选择一个得心应手的开发工具可以大大提高我们的开发效率，前端的开发工具有很多，下面我们介绍几个主流的前端开发工具。WebStormWebStorm是JetBrains公司旗下一款JavaScript 开发工具,功能齐全,集成度高，内置服务器调试，ESlint，代码补全，Emmet语法,ECMAScript6(以下简称为ES6)语法支持等，但是WebStorm的正版是收费的，并且运行占用的内存比较的高。Vue.js的使用VisualStudioCode简称VSCode，是微软旗下的一款轻量级免费开源的开发工具，支持多个平台和多种语言的开发，体积小，占用内存小，功能齐全，页面简洁。并且VSCode也提供丰富的插件能够满足日常开发的需要，非常受开发的喜爱。HBuilderX

HBuilderX是一款Vue官方推荐的国内开发工具，具有编码速度快、强大的语法提示、专为vue打造、提供优秀的vue支持等优点。然而，目前HBuilderX的生态仍有待进一步发展。除此之外，还有一些其他的轻量好用的工具，如：SublimeText等，本书中将使用VSCode作为前端的开发工具。Vue.js的使用2、Vue.js的安装和引入Vue提供多种安装和引入方式，方便开发者在多页面应用的HTML中或单页应用中引入使用。<script>引入如果是在HTML页面中使用Vue，可以直接从Vue官网下载Vue.js的开发版本或生产版本（vue.min.js），并通过<script>标签进行引入。Vue.js的开发版本包含了调试信息和警告，可在开发环境中使用；而生产版本则剔除了调试信息和警告，文件体积更小，适合在生产环境中使用。也可以通过CDN的方式引入，这里我们使用unpkg提供的CDN地址。Vue.js的使用使用ES模块构建版本开发者也可以通过ES模块语法的import引入Vue。使用NPM安装在使用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。如果想要使用NPM安装Vue，需要准备Node.js环境（参考章节7.2）。此外，还可以利用Vue官方提供的构建工具，例如VueCLI和Vite，来构建项目。构建的项目已经自动安装和引入了Vue，可以直接使用。npminstallvueVue.js的使用3、第一个Vue应用—HelloWorld熟悉了Vue后，下面就来创建第一个Vue应用，步骤如下。①在VSCode中安装Vue插件。VSCode中提供了非常丰富的插件，比如我们可以安装“Chinese（Simplified）”插件进行汉化VSCode；安装“LiveServer”构建一个本地服务器来运行一个HTML文件等；这里我们安装一专门针对Vue3的插件Volar（针对Vue2的插件是Vetur），它除了支持快速生成Vue模板、Vue代码高亮、兼容Vue2和Vue3的语法提示等基本功能外，还提供了编辑器快捷分割和Vite预览功能。安装方式也非常的简单，在VSCode左侧的插件管理中输入“Volar”进行搜索后就可以找到相应插件，单击“安装”按钮即可进行安装，如图1-6所示；图1-6Vue.js的使用②在浏览器中安装VueDevtools插件。通过Vue提供的Devtools插件，开发者可以浏览一个Vue应用的组件树，查看各个组件的状态，追踪状态管理的事件，还可以进行组件性能分析等，这些对之后Vue的开发和学习都非常的有帮助。在Chrome插件商店或其他地方下载vue.jsdevtools插件包，解压插件包并获取到crx文件；然后在Chrome浏览器右上角点击按钮，选择“更多工具”→“扩展程序”，在扩展程序中打开开发者模式，如图1-7所示。图1-7最后直接拖动下载的解压的插件文件到扩展程序中即可安装，如图1-8所示。图1-8Vue.js的使用③编写HelloWorld应用。新建HelloWorld.html文件，创建并绑定Vue对象，如代码如下；

在上述代码中，我们需要定义一个id为“app”的div标签用来跟Vue进行绑定，只有绑定后才能够使用Vue。代码中Vue通过HTML模板语法“{{message}}”声明式的将“HelloWorld!”渲染到更新的DOM中从而展示到浏览器页面中。Vue.js的使用④运行Vue应用。在VSCode中按“Alt+B”组合键运行网页，运行效果如图1-9所示。图1-9感谢聆听！第二章Vue开发基础学习目标熟悉Vue实例定义熟悉Vue模板语法的使用掌握Vue的条件渲染、列表渲染、计算属性、侦听器和过滤器的使用掌握Vue的数据绑定掌握Vue的事件处理在上一章中我们了解了Vue的特点以及Vue的安装和使用方式。本章我们将学习Vue的基本使用，包括定义Vue实例、数据渲染、计算属性、侦听器、过滤器、数据绑定、事件处理等，通过这些学习，让我们对Vue的基础知识掌握更加牢固。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面Vue实例在Vue3中只需要通过Vue提供的createApp函数就可以创建一个应用实例，使用应用实例就可以完成获取根组件的挂载、声明数据、定义方法等操作。1．挂载应用createApp函数中传入的对象实际上是一个根组件，每个应用都需要一个“根组件”，其他组件将作为其子组件；就像HTML文件需要一个根标签<html>一样，在根标签中由很多的子标签组成比如<body>、<head>、<div>等。创建应用实例对象app后，需要通过调用app的mount()方法将应用挂载到页面上。只有在挂载后，根组件的内容才会被渲染在容器元素中。mount()方法的参数可以是DOM元素或是一个CSS选择器字符串。mount()方法应该始终在整个应用配置和资源注册完成后被调用,并且它的返回值是根组件实例而非应用实例。

Vue实例根组件的模板通常是组件本身的一部分，当根组件没有设置template选项时，Vue将自动使用容器的innerHTML作为模板。使用createAppAPI也支持创建和绑定多个应用实例，而且每个应用都拥有独立的用于配置和全局资源的作用域。

Vue实例2．data数据模型在Vue中，可以通过定义一个data函数来定义数据模型，该函数返回一个JavaScript的对象，用来定义整个组件页面中需要使用的响应式数据（状态）。这些响应式数据可以通过模板语法在标签中进行声明式渲染，也可以直接在根组件内被其他函数调用。当一个Vue实例被创建时，它将data函数返回对象中的属性都加入到Vue的响应式系统中，从而让JavaScript对象中的属性可以产生“响应”。当这些属性的值发生改变时，Vue就会匹配视图并更新为新的值，如图所示。运行HTML代码，可以查看到网页中显示的内容为“message数据更新”，即当message的值发生改变的时候也会响应式的更新视图上message的值。

Vue实例在上述代码中，其中vm为挂载后返回的根组件Vue实例对象。data返回对象定义的属性可以通过Vue实例对象直接调用，当然Vue对象本身也具有属性与方法。为了跟用户定义的属性方法区分开，Vue实例的属性方法都有$前缀，比如：vm.$data、vm.$props、vm.$watch()等。在应用实例中使用this.$data可以访问data函数中对象的变量，并且$data可以省略不写，即this.$data.message等同于this.message的使用。

温馨提示data函数中JavaScript对象属性的定义一定要遵循标准命名，尽量不要出现特殊符号。以_、$开头的命名方式，否则属性无法被访问。以_或$开头的属性将不会被组件实例代理（模板语法调用后网页会显示为空字符串），因为它们可能和Vue的内置属性、API方法冲突。如果使用了_或$开头命名，必须以this.$data._property的方式访问它们。Vue实例3．methods定义函数Vue中通过methods选项可以定义一些自定义函数，例如点击触发的事件函数等。methods中声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。在方法中可以通过this访问组件实例，调用实例的属性，因此methods中的方法避免使用箭头函数，因为定义为箭头函数就不能通过this访问组件实例。这里我们以点击触发函数为例，如下所示。

如果想要在元素中调用Vue实例中的方法，需要使用v-on指令进行绑定，v-on指令的使用会在后面的章节中详细介绍；如果在Vue实例中调用methods中定义的方法，可以直接使用this调用。但是需要注意，this的作用域可能会影响方法的调用结果。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面模板语法1．模板语法介绍模板语法最初是服务端用于实现动态HTML页面的，它通过简单的模板语法格式将后端数据传递到HTML页面中进行数据动态展示。随着前端技术的发展，前端也开始使用模板语法进行页面渲染，将模板和数据通过前端渲染为静态HTML页面。模板语法用于定义和生成文本、代码或其他数据的模板。它允许在模板中插入占位符或变量，并根据需要进行替换或填充内容。借助于模板语法可以实现变量的插值、使用循环结构来重复生成一段模板内容、使用条件语句根据条件的真假来生成不同的模板内容等功能。模板语法的具体细节取决于所使用的模板引擎或框架。不同的模板引擎可能有不同的语法和功能。常见的模板语法有：Mustache、Handlebars、Vue模板语法、React的JSX模板语法等。Mustache是一种简单且易于学习的模板语法，被广泛应用于前端开发。它使用双大括号{{}}来标记变量插值，例如：Hello,{{name}}!。在渲染模板时，这些标记会被实际的变量值替换。Handlebars是基于Mustache的模板引擎，提供了更多功能和灵活性。它支持使用{{}}进行变量插值，并提供了更复杂的语法，如条件语句和循环。例如，使用{{#ifcondition}}...{{else}}...{{/if}}来实现条件语句。模板语法Vue中使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例数据。Vue模板语法不仅支持{{}}进行变量插值，它还引入了指令，用于处理更复杂的逻辑。所有Vue的模板都是合法的HTML，能被所有遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数（在章节6.5中介绍）。结合它的响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少，大大提高了渲染的效率。Vue中的模板主要应用有模板插值、模板表达式和模板指令；

模板语法2．模板插值Vue模板中变量的插值方式支持文本插值、原始HTML插值和Attribute属性绑定；文本插值文本插值使用类似于Mustache”的语法({{}}),双大括号中可以直接绑定Vuedata函数中的变量，同时每次data对象中变量更改时它也会同步更新，从而实现数据的动态展示。如下图代码所示。

模板语法原始HTML插值双大括号会将数据解释为普通文本，而非HTML代码，有的时候需要把data中的数据解析为HTML代码显示，就需要使用v-html指令来完成，v-html可以直接当成标签的属性使用，使用v-html指令绑定带HTML标签的内容时不需要使用

{{}}，如下图代码所示。

模板语法Attribute属性绑定在Vue中，插值语法{{}}只能用于模板中的文本内容，不能直接作用于HTML标签属性上。如果想要让属性也像文本一样可以动态插值，可以使用指令v-bind。v-bind可以动态地绑定一个或多个attribute,其格式为“v-bind:属性”。当使用v-bind绑定一个属性时，可以使用冒号(:)代替缩写方式。

上述代码中，不管是v-bind:hidden还是:hidden,都可以绑定hidden属性可以实现标签的显示和隐藏的动态变化。如果属性要动态绑定多个值，那么v-bind不需要带参数直接绑定一个JSON对象即可。模板语法上述代码中，如果v-bind绑定的JSON对象值是null或者undefined，那么该attribute将会从渲染的元素上移除。模板语法3．模板表达式在Vue中，模板语法同样支持完整的JavaScript表达式的使用。可以在模板中使用算术运算符、三元运算符、以及有限的全局对象(如Math、String、Date等)的方法调用等。这些表达式可以在模板中直接使用，无需使用双大括号或v-bind指令来绑定它们。

代码中，`list-${id}`表示id为动态值拼接表达式，在表达式中如果要使用data的变量需要使用“${变量名}”的格式。模板语法值得注意的是，每个模板绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码，而不能像写JavaScript的函数一样写多段的处理并且函数的处理还不一定有值返回。如果需要对属性进行逻辑处理，模板中支持调用函数来进行处理。模板语法4．模板指令在Vue中，带有v-前缀的属性被称为指令（Directives）。指令用于为元素提供特殊的行为，例如控制元素的显示、隐藏、样式等。指令属性的值是一个表达式，可以是任意的JavaScript表达式或过滤器。当表达式的值发生变化时，指令会响应式地作用于DOM，从而使DOM的状态随之更新。如程序清单2-7中的<divv-bind:hidden="visible">就是通过控制表达式visible响应DOM来控制标签的显示和隐藏。Vue中定义了很多指令，每个指令都有其特殊含义。在前两个小节中，我们已经介绍了‘v-html’和‘v-bind’指令，它们分别用于插入HTML代码和属性的绑定。此外，Vue中的一些指令还可以接收一个“参数”，在指令名称之后以冒号表示。例如，‘v-bind:hidden’就是一个带有参数的指令。在后续章节中，我们将详细介绍更多的指令以及它们更详细的使用。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面条件渲染在日常开发中，我们经常会遇到需要按需加载DOM元素的情况。例如，在多个登录方式的页面中，如果选择了手机验证码登录，就会显示输入手机号码获取验证码的布局；而选择账号密码登录，则会显示账号密码输入框的布局等场景。在Vue中，可以使用v-if、v-else、v-else-if和v-show指令来实现这样的按条件渲染场景；接下来，我们将详细介绍这些指令的使用方法。1．v-if条件渲染

v-if

v-if指令可以对DOM进行条件性地渲染，指令的表达式返回true时元素才会被渲染。在代码中，v-if指令只有在isPhone为true时才会渲染id为phoneLogin的div元素。如果isPhone为false,则该元素不会被渲染显示。通过浏览器的开发者工具(按F12),我们可以在“Elements”标签下看到，当isPhone为false时，HTML源代码中并没有phoneLogin的div元素。条件渲染

v-else

Vue同样提供了v-else指令可以为v-if添加一个“else区块”，表示在v-if不成立的情况下需要渲染的元素。需要注意的是，v-else元素必须跟在一个v-if或者v-else-if元素后面才会有效,运行结果如图所示。条件渲染

v-else-if

如果我们需要根据多个条件按需加载DOM元素，可以使用v-else-if指令。该指令可以连续多次重复使用以实现多条件的按需渲染。在实际开发中，很多服务端返回的数据是数值类型，这时候需要根据数值判断要显示的内容。同样的v-else-if的元素也必须跟在一个v-if或一个v-else-if的后面。温馨提示在使用的时候，如果没有v-else元素也可以使用多个v-if来代替v-else-if，它们的不一样之处在于如果使用多个v-if即使第一个v-if符合条件后面的依然也需要进行判断，而v-else-if则不会。条件渲染2．v-show

除了v-if指令，还可以使用v-show指令来按条件显示DOM元素。其用法和v-if基本上一致。与v-if指令不同的是，v-show指令是控制元素的隐藏和显示，而不是将其从页面中删除或添加，v-show和v-if的具体区别如下：v-if是按照表达式结果真假是否选择渲染，而v-show不管表达式结果真假都进行渲染，然后通过CSSdisplay属性进行切换显示和隐藏。v-if是真正意义的按条件渲染，它在切换时，条件区块内的事件监听会正常执行，子组件也会被销毁与重建。从开销来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。如果需要频繁切换显示和隐藏，使用v-show较好；如果在运行时绑定条件很少改变，则v-if会更合适。v-if有更好的结构结合，支持与v-else-if和v-else结合,而v-show不支持。v-if支持在template标签上使用，v-show也不支持。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面列表渲染在网页开发中，我们经常需要展示一些列表结构，如商品列表、热门新闻列表、用户列表等。这些列表中的元素结构都是相同的，只是数据有所不同。Vue提供了v-for指令来实现列表数据的渲染。v-for指令表达式可以是一个Array数组、一个Object对象、一个number数字或一个String字符串。v-for通过对数组元素或对象属性进行遍历循环，然后将遍历的值渲染到元素结构上，v-for的语法格式如下所示：v-for=”(alias,index)initems”

其中items为循环的数组或对象，alias为循环数组迭代时的元素别名，index为迭代时的下标。如果迭代时不需要下标，则可以直接写成下面格式：

上述使用中，in关键字也可以使用of来替代。v-for=”aliasinitems”列表渲染1．遍历数组

v-for在开发中最常用的就是遍历数组渲染数据了，我们在data函数中定义一个数组对象bookList并使用v-for进行遍历显示。上述代码中，bookList为字符串数组，也可以是JSON对象数组。列表渲染列表渲染2．遍历对象

v-for也可以用来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用Object.keys()的返回值来决定，Object.keys()用于获取对象的所有可枚举属性的名称。v-for使用的三种格式如下：其中key为迭代对象的属性名，value为迭代的属性值，index为索引下标值。这里在data中定义一个图书对象book来进行遍历。v-for=”valueinobject”v-for=”(value,key)inobject”v-for=”(value,key,index)inobject”列表渲染3．使用范围值

v-for的表达式结果也可以是一个number整数值。当是整数值时，v-for会将该模板基于1...n的取值范围重复多次，相当于JavaScript代码中按照次数循环的结构。4．v-for和v-if同时使用问题

需要注意的是，v-for和v-if要避免一起使用在同一节点上。如果同时使用在同一节点上，v-if比v-for的优先级更高，这意味着v-if的条件将无法访问到v-for作用域内定义的变量别名就会报错“Cannotreadpropertiesofundefined”。列表渲染

如果想要解决这个问题，其实我们只需要在外包装一层<template>标签即可。在<template>上使用v-for指令，然后里层使用v-if按需渲染即可，这样也更加明显已读。列表渲染5．通过key管理状态

通过v-for渲染的元素列表，当数据项发生了变化，DOM元素也需要进行更新。Vue默认按照“就地更新”（in-placepatchstrategy）的策略来更新；就地更新策略是指在更新组件时，尽可能地复用已有的DOM元素，而不是替换整个DOM树，这个策略可以提高组件的渲染效率和性能。在使用v-for指令时，如果想要快速复用或重新排序现有元素，最好为每个元素对应的块提供一个唯一的key属性。这样Vue就可以通过这个key属性轻松地跟踪到每个节点。

key属性是通过v-bind:key进行绑定的，当然也可以使用v-bind的缩写方式“:key”,Vue中推荐我们在使用v-for的时候最好都添加一个key属性，key属性的值最好是一个基础类型，例如：字符串或number类型。列表渲染6．数组变化侦测

当我们使用v-for对数组对象进行列表渲染的时候，Vue除了可以绑定数组对象实现响应式渲染外，还可以侦听到响应式数组的变更方法，并在它们被调用时触发相关的更新。当然不是所有数组的方法都可以被侦听并更新的，支持变更方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。下面我们以sort排序方法为例来看下数组的变化更新。

代码中，sort方法中的函数为排序时元素的比较规则。通过运行代码，点击升序按钮，发现图书按照价格升序进行排列了，也就是说数组的sort函数会被Vue侦听到，并把排序后的数组元素响应到页面上。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面计算属性-computed通常情况下，data函数中的对象属性可以非常方便地进行声明式渲染，但有些情况下需要对属性进行处理才能进行渲染显示。虽然可以在模板中（双大括号中）编写一些逻辑来处理数据，但这样会导致模板变得臃肿，甚至需要多次重复处理相同的逻辑，降低性能且难以维护。针对这种情况，Vue提供了计算属性来解决问题。1．计算属性的基本使用

简单来说，如果数据变更的逻辑比较复杂，就应该将其放在计算属性中处理。这样可以避免在模板中使用复杂的条件语句和副作用函数，使代码更加简洁易懂。

想要使用计算属性，需要在应用实例中添加computed选项，然后在computed中定义属性计算的方法，这里我们以购物满200减30为例。计算属性-computed上述代码中，定义了一个计算属性discountPrice，当price属性改变后可以看到discountPrice也随之更新，并且计算属性discountPrice跟data中的属性在模板中的使用方式是一样的。计算属性-computed2．计算属性vs方法调用

对于之前的案例的效果同样也可以使用普通方法实现。在模板中使用changePrice方法也可以达到一样的效果。计算属性-computed计算属性和使用方法不同之处在于计算属性的值会基于其响应式依赖被缓存。这意味着使用计算属性discountPrice只要price没有发生变化，无论调用多少次discountPrice都会立即返回先前的计算结果，而不会重复执行getter函数进行重新计算。但是如果是调用的方法的话每次访问都会进行逻辑计算，这样就非常的消耗性能。计算属性-computed3．可写计算属性

计算属性默认是只读的，如果想要修改计算属性值就需要提供一个“可写”的属性。Vue中通过在computed中声明getter和setter方法来控制计算属性的读和写。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面侦听器-watch计算属性可以实现响应式属性逻辑处理后的结果。但是，如果我们需要监听一个属性的变化并执行其他的逻辑处理呢，例如检测文章中的不文明用语等场景，这时可以使用侦听器来实现。1．侦听器的基本使用

在Vue组件中，可以通过watch选项来监听特定属性的变化。当被监听的属性发生变化时，侦听器会被触发执行，从而可以执行一些逻辑或者发起请求等操作。这里以文章中不文明文字检测为例。

代码中，对content属性进行侦听，在watch中content函数的参数中，newValue表示要修改的新值，oldValue表示之前的值，通过对newValue内容的检测就可以达到不文明文字检测的目的。侦听器-watch2．深层侦听器和回调侦听器深层次侦听器

默认watch侦听的属性只有在重新赋值的时候才会被侦听到，如果侦听的属性是嵌套的属性如对象或者数组，则无法侦听到，所以默认watch被称为浅层次侦听器。如果想要侦听嵌套属性中内层属性的变化就需要使用深层次侦听器了，想使用深层次侦听器只需要在侦听的属性上添加deep属性为true即可。侦听器-watch回调侦听器

默认侦听器回调函数是在数据发生了变化之后才触发，也就是说赖侦听机制。那如果希望在创建侦听器的时候就立马执行呢，比如默认搜索的内容为空，当内容为空的时候希望加载初始的数据，这时就需要一个即时回调的侦听器。即时回调侦听器实现非常的简单，只需要在侦听的属性中跟添加deep一样添加一个immediate属性并设置其值为true，即可实现在创建侦听器的时候立马执行一次侦听。当更改了侦听的属性数据状态时，可能会同时触发Vue组件更新和侦听器回调，默认情况下侦听器会在Vue组件更新之前触发回调，这样在侦听器中只能获取到Vue更新之前的DOM状态，如果想要DOM更新同时侦听器被回调呢？在Vue3中watch中的每个属性提供了flush属性可以修改回调的触发时机，flush有三个取值如下：pre：默认值，在DOM更新前触发侦听器回调；pre的好处就是在DOM更新前数据也变化，然后把这些变化的数据和DOM一起更新，提高性能。post：在DOM更新后触发侦听器回调；如果需要在侦听器中获取更新的DOM进行操作，那么就选择post。sync：侦听器回调和DOM更新同时触发。侦听器-watch3．使用$watch()API创建侦听和停止监听在Vue中除了可以在组件内部声明watch属性实现侦听器外，还可以通过组件实例的$watch()方法来创建一个侦听器。默认用watch选项或者$watch()实例方法声明的侦听器，都会在宿主组件卸载时自动停止，但少数情况下也会主动停止侦听属性，这时候可以调用$watch()返回的函数即可停止侦听。代码中，在$watch()API中第一个参数是侦听的属性，第二参数是回调函数，第三个参数是侦听器的属性配置。侦听器-watch4．侦听器vs计算属性

侦听器和计算属性都可以实现观测到一个响应数据状态的变化，它们的不同之处有以下几点：计算属性是响应数据变化时执行操作，并计算出结果作为返回值更新DOM。而侦听器可以在DOM更新前后或者更新时都检测到变化进行响应其他的变化，不需要有返回值。计算属性中不能执行异步操作，而侦听器中可以执行异步操作。计算属性有响应式数据的缓存，当数据未发送变化时使用的是缓存数据不会重新计算。计算属性特别适合当多个数据发送变化而影响一个数据的场景；而侦听器比较适合的是当一个数据发送变化影响了其他数据变化的场景。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面数据绑定Vue中数据绑定是最常见的应用之一，它可以在模板中使用，也可以在Class属性绑定、CSS样式绑定和表单数据的双向绑定中使用。下面我们来看一下Vue中数据绑定的使用。1．Class属性绑定在Vue中，class属性的绑定可以帮助开发者实现元素样式的变换，例如选中样式和非选中样式切换、显示和隐藏切换等场景。属性的绑定可以使用v-bind指令或者其缩写形式":"来实现。在class属性绑定中，其绑定的值可以为普通值、JSON对象或JSON数组。这些绑定的值也可以是通过计算属性返回的结果。绑定普通值class属性可以直接绑定一个普通的字符串className变量，通过className值的改变从而达到改变样式等目的。数据绑定数据绑定绑定对象Vue支持动态绑定class属性，通过传递一个对象来实现动态切换class，其中对象的属性控制class是否绑定，属性值为true时绑定，false时不绑定。如果对象中有多个字段，只要该字段值为true就会绑定该字段对应的class。v-bind:class或

:class指令可以和一般的class属性共存。如果绑定对象的属性中带有特殊字符命名最好使用单引号括起来。数据绑定绑定数组Class动态多属性的绑定也可以通过绑定数组来实现，并且如果数组中的某个class元素是有条件的渲染，也可以使用三元表达式来渲染。数据绑定2．内联样式绑定内联样式绑定其实就是通过HTML元素的style属性进行绑定，使用v-bind:style或:style绑定，绑定的期望值是JavaScript对象或对象数组。对象中的属性推荐使用camelCase驼峰命名（如：fontSize），也支持kebab-cased形式的写法（如：font-size）；如果绑定的是数组，数组中对象会被合并后渲染到同一元素上。

当在:style中使用了需要浏览器特殊前缀的CSS属性时，例如：webkit-transition、-moz-transition等，Vue会根据检查当前使用浏览器的支持自动添加相应的前缀。数据绑定3．表单数据的双向绑定在前端开发中，表单元素是用户与网站进行数据交互最常见的元素之一。无论是各种输入框(文本、密码等)、单选和复选框、列表等，都可以通过Vue中的v-model指令实现数据双向绑定。这意味着，当用户通过输入内容更新DOM时，与之绑定的数据也会自动更新；反之，当绑定的数据发生变化时，这些表单元素也会自动更新。文本输入框和多行输入框当文本类型的<input>或<textarea>绑定时，v-model绑定的是value属性，并侦听其input输入事件，从而实现数据的双向绑定。数据绑定运行上述代码，当在文本框中输入内容后，可以看到userName和content属性值也及时得到了更新。通过vue实例或devtools工具修改userName属性也可以达到同样的效果。温馨提示在<textarea></textarea>标签中是不支持模板插值的，插值使用v-model绑定。数据绑定单选框和复选框对于checkbox和radio类型的表单元素，v-model绑定的是checked属性并侦听change事件。数据绑定选择器当绑定的是select选择器时，绑定的是value属性值并侦听change选中事件。select选择器因为支持单选和多选操作，所以v-model绑定的value值可以是单个值或者数组。数据绑定v-model修饰符v-model指令提供了三个修饰符以帮助开发者更好的使用表单绑定，修饰符及其说明如表所示。修饰符说明.lazy懒更新，默认v-model是在input事件触发就更新数据，.lazy修饰符可以改为在change事件触发的时候更新数据。.number将输入的内容转换为数字，内部使用parseFloat()进行转换，如果无法转换则返回原内容，如果是type="number"则自动启用该修饰符。.trim去除输入内容两端的空格。修饰符可以直接使用在v-model后面，如：v-model.number=“age”。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面事件处理在Vue中，页面中的大多数用户交互都需要使用操作事件进行处理，例如点击按钮、滑动内容、按回车键等。Vue不仅提供了简单灵活的事件绑定方式和处理机制，还扩展了事件修饰符和按键修饰符的使用，大大方便了用户交互的处理。1．事件的监听和处理Vue提供了v-on指令，可以简单地绑定DOM事件并在事件触发时执行对应的JavaScript代码操作。使用v-on指令时，可以直接在指令后面添加需要绑定的事件类型，如前面章节2.1中点击按钮实现数字的加减。v-on指令通常使用缩写形式‘@’来简化代码，例如：@click="check"等同于v-on:click="check"。事件的处理通常有两种方式：一种是在事件触发的时候直接执行简单的JavaScript代码。事件处理值得注意的是在事件中不能直接调用类似alert的代码，因为@click=""中的代码会默认是Vue实例对象的一个方法，会在js中寻找Vue实例的alert方法，显然并没有定义，因此会报错，如图所示。如果需要调用类似alert的代码可以将其放到自定义函数中再调用即可。事件处理

另一种处理方式是调用方法函数。可以直接使用方法名绑定处理，也可以通过调用方法并传递参数来处理。事件处理

如果方法调用的时候需要使用事件对象本身，那么在调用方法的时候直接传入$event即可传入事件对象使用。在Vue中也支持调用多个函数进行处理事件的使用。事件处理2．事件修饰符在处理事件时，经常需要解决一些除了必要处理代码逻辑以外的问题。例如，当点击子元素时，由于事件会向上冒泡传递，可能会导致父元素的事件也被触发；点击超链接时，除了触发点击事件外，还可能触发默认的链接跳转；有时还需要确保事件只触发一次等场景。虽然可以直接在调用的方法内执行一些JavaScript代码来解决上述问题，但如果事件处理的方法能够更专注于数据逻辑而不用去处理DOM事件的细节，那会更好。为了解决这个问题，Vue为v-on提供了事件修饰符,如表所示。修饰符说明.stop阻止事件的冒泡.prevent阻止事件的默认行为.self仅当event.target是元素本身时才会触发事件.capture事件的捕获，事件捕获的执行顺序是由父到子跟事件冒泡相反.once事件只触发一次.passive不阻止事件的默认行为，一般用于触摸事件的监听用来改善移动端设备的滚屏性能。事件处理

下面以stop、prevent为例来介绍下事件修饰符的使用。事件处理事件处理3．按键修饰符在Vue中除了提供事件绑定和事件修饰符外，还对键盘和鼠标事件提供了常用按键监听并提供了按键修饰符，以方便日常开发。常用的按键修饰符如表所示。修饰符说明.enter回车键.tabtab键.delete删除键，“Delete”和“Backspace”两个按键.esc取消键.space空格键.up上↑.down下↓.left左←.right右→

除了常用的按键修饰符外，Vue还提供了系统按键修饰符，如：.ctrl、.alt、.shift、.meta（Windows系统的Windows键

、Mac电脑上的Command键

）、.exact（仅当按下某个键位时才触发事件）。系统按键符通常会结合其他操作一起使用。Vue还提供了对鼠标按键的监听，包括.left鼠标左击、.right鼠标右击和.middle鼠标中间按键。事件处理Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面案例：图书管理页面在本章的最后一节，我们将尝试使用Vue的基础知识来完成一个图书管理系统，页面效果如图所示。通过图中可以看到，图书管理系统的主要功能有图书列表、图书排序、添加图书、删除图书等操作，下面让我们来完成这个图书管理页面。案例：图书管理页面1．图书管理页面布局在开始前，需要先进行页面的设计，包括页面的静态结构和样式的设计。这部分不仅是Vue项目开发的基础，也是开发其他Web应用的基础。在设计页面时需要注意页面的布局、排版、颜色搭配、响应式设计等方面。案例：图书管理页面案例：图书管理页面案例：图书管理页面2．图书列表渲染将静态页面效果准备好后，我们就可以使用Vue进行数据绑定和渲染。我们需要进行app的挂载，然后在Vue实例中声明需要的属性和自定义方法。案例：图书管理页面之后，需要把数据和方法绑定到页面上。把tbody中的行数据使用v-for进行渲染出来，在列表渲染过程中会根据图书的状态显示不同的样式，因此使用了v-if指令进行判断；对于图书的热销程度是根据图书销量来进行判定，这里使用了getHot函数进行处理；并且图书列表支持根据价格升序和降序排序，使用了sortBook函数实现。案例：图书管理页面3．添加和删除图书删除图书，因为数据是在data的bookList中，因此删除元素就是把数据从bookList中移除即可。可以通过在v-for列表渲染的时候得到图书的下标index，然后通过数组的splice函数删除元素。案例：图书管理页面添加图书，我们在data中设计一个book对象作为添加图书表单的双向绑定对象，在录入图书名字的时候通过computed计算属性完成对特殊字符的提醒功能；添加图书通过给按钮绑定click点击事件实现，并对表单form也添加了@keyup.enter，实现了在表单获取焦点的情况下按回车键也能够实现添加图书功能。案例：图书管理页面

至此，图书管理页面的各项操作已经完成。接下来，就可以运行网页查看页面效果了。当然，本案例中数据交互暂时仅在前端完成，例如列表数据、删除图书和添加图书等操作。在实际应用中，这些操作需要与服务端配合完成前后端交互。谢谢第三章Vue指令学习目标掌握Vue常用内置指令熟悉Vue如何进行自定义指令在上一章节中，我们学习了Vue的数据渲染、数据绑定和事件监听，这些功能都使用了Vue的模板指令。在本章中，我们将进一步介绍Vue中更多的内置指令的使用，并探讨如何实现自定义指令。Vue内置指令12自定义指令Vue内置指令Vue中提供了很多带v-前缀的特殊属性，这些属性就是指令（Directives）。比如在前两章中使用到的v-html、v-if、v-for、v-show、v-bind、v-model、v-on，这些指令都是Vue提供的内置指令。使用内置指令可以简化开发应用的难度，提高开发的效率。Vue的内置指令为绑定的元素提供了一些特殊功能。此外，指令还可以通过冒号添加参数进行扩展，例如：“v-on:click”等；Vue提供的内置指令及其说明如表所示。

指令说明v-text更新文本内容v-html更新包涵HTML代码的内容v-show控制元素是否可见v-if、v-else、v-else-if条件渲染v-for循环渲染v-on事件绑定v-bind绑定一个或多个属性。v-model表单输入元素或组件数据的双向绑定v-slot具名插槽或作用域插槽v-pre跳过该元素及其所有子元素的编译v-once只渲染一次，之后不会再更新v-memoVue3.2新增指令，表示缓存一个模板的子树v-cloak隐藏尚未完成编译的DOM模板Vue内置指令1．v-textv-text指令是通过修改元素的textContent内容来实现更新内容的，其等同于{{}}模板插值的效果。元素使用了v-text进行插值的话，之前元素的所有内容就会被覆盖掉。2．v-htmlv-html指令在第二章节中使用过，它可以插入带HTML标签的内容进行显示，如“<h1>标题</h1>”。v-html通过更新innerHTML来实现HTML代码的插值，但是一般不推荐使用v-html,因为如果将用户提供的内容作为HTML代码插值会导致注入恶意攻击的代码，从而引起XSS攻击等安全问题。

Vue内置指令3．v-bindVue的v-bind指令可以用来动态绑定一个或多个元素属性，也可以用来绑定组件的prop(组件属性)。其用法为“v-bind:属性”，通常喜欢使用简写方式“:属性”或“.属性”(用于组件prop的用法)。如果要同时绑定多个属性，可以使用对象来进行绑定。

Vue内置指令4．v-pre在Vue中，如果希望使用双花括号{{}}来显示普通文本内容，而不需要进行模板语法的解析，可以使用v-pre指令。该指令会告诉Vue跳过该元素及其所有子元素的编译，从而在该元素上使用双花括号来显示纯文本内容。使用v-pre指令的好处是可以提高应用的渲染性能，减少不必要的编译时间。运行代码可以看到网页中{{}}格式的内容当做了普通内容展示了出来，如图所示。

Vue内置指令5．v-once如果某些数据内容只需要在页面加载时显示一次，之后即使数据更新了也不需要重新渲染。这时可以使用Vue的v-once指令来解决这个问题。v-once指令表示元素或组件内只渲染一次，之后就可以当作静态内容对待了。运行代码即可得知，即使修改了content的内容页面中也没有刷新，利用v-once的特性可以用来优化更新时的性能。

Vue内置指令6．v-memov-memo是Vue3.2新增的指令，表示缓存一个模板的子树，可以使用到元素和组件上，指令的期望值是一个依赖数组。使用v-memo的元素或组件在进行数据渲染的时候，如果依赖数组的内容跟上一次渲染相同，那么元素或组件将会跳过更新不会重新渲染。

运行代码，发现页面中显示的内容仍然是初始定义的。这是因为v-memo指令依赖于数组中contentA的内容并没有被更新。如果v-memo传入空的数组(如：v-memo="[]")则效果与v-once等同。

虽然v-memo指令在性能优化方面具有一定的作用，但它在实际开发中的使用较少。通常，如果v-for指令渲染的列表数据量较大，当需要重新渲染指定选中行数据时，v-memo指令可以帮助提高列表交互时的渲染速度。Vue内置指令7．v-cloak在运行Vue页面时，由于Vue需要先编译模板才能渲染出数据，因此在页面起初会看到一些未编译的模板内容，这种短暂的现象被称为“模板闪烁”，如图所示。如果想要隐藏尚未完成编译的DOM模板，就可以使用v-cloak指令。使用v-cloak指令还需要设置下v-cloak属性的样式为隐藏，这样才能在网页中看不到未编译的模板。Vue内置指令12自定义指令Vue自定义指令Vue提供的内置指令可以完成大部分的基础核心场景，但在实际开发中难免会涉及到自己操作DOM的场景。为了重用涉及普通元素的底层DOM访问的逻辑，Vue同样支持自定义指令(CustomDirectives)。自定义指令可以根据业务功能需要，自定义处理DOM元素的行为和样式，从而提高开发效率。1．自定义指令的注册和使用在Vue中，自定义指令不必以v-为前缀命名，但使用自定义指令时需要在指令名前加上v-前缀。要使用自定义指令，首先需要注册自定义指令。Vue中自定义指令的注册方式有两种：全局注册和局部注册。这里以一个简单易懂的自动获取焦点案例来进行讲解。Vue自定义指令全局注册全局注册的自定义指令可以在所有组件中使用，全局注册使用app.directive进行注册，其中app为createApp返回的应用实例。

代码中，需要注意的是全局注册需要在挂载应用前注册不然无效；注册指令的对象中定义的mounted函数为绑定指令的元素在加载时执行的函数，mounted中的el表示绑定的元素。当运行上述代码后，发现进入页面<input>输入框就获取到了焦点。Vue自定义指令局部注册如果在应用中想要按需注册指令，就可以使用选项式的局部注册。局部注册可以在组件中的directives中声明注册。Vue自定义指令2．自定义指令钩子函数在注册自定义指令时，需要在对象中定义一个mounted函数并实现自定义DOM操作。这个mounted函数是自定义指令的钩子函数之一，通常用于初始化或更新指令的状态和属性。在Vue中钩子函数指的是一个Vue实例从创建到销毁的过程中会自动调用的函数；Vue中钩子函数常用的有三种分别为生命周期钩子函数、指令钩子函数和路由的钩子函数，本节中要介绍的就是指令的钩子函数了，也就是指令在实例创建过程中会自动执行的函数有哪些，如表所示。钩子函数说明created(el,binding,vnode,prevVnode)在绑定元素的属性前，或者事件监听器应用前调用beforeMount(el,binding,vnode,prevVnode)在元素被插入到DOM前调用mounted(el,binding,vnode,prevVnode)在绑定元素的父组件及其它的所有子节点都挂载完毕后调用beforeUpdate(el,binding,vnode,prevVno