VUE

最新推荐文章于 2020-11-19 19:38:45 发布
最新推荐文章于 2020-11-19 19:38:45 发布
阅读量801 收藏 1
点赞数
分类专栏： JAVA 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51071144/article/details/109364367
版权
本文深入探讨了前端开发的知识体系，重点介绍了前端三要素：HTML、CSS和JavaScript。阐述了前端框架的发展历程，从后端为主的MVC时代到前端为主的MVVM模式，再到NodeJS带来的全栈时代。特别讲解了Vue.js框架，包括其在MVVM模式中的作用、优势以及如何使用。此外，还介绍了Vue CLI、Webpack、Vue Router、ElementUI的整合、路由的嵌套和参数传递等前端开发的关键技术和工具。最后，提到了Vuex状态管理，以及如何处理刷新后Vuex数据丢失问题和模块化的实现。
摘要由CSDN通过智能技术生成

前端知识体系

前端三要素

  • HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
  • CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
  • JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
结构层（HTML）

略

表现层（CSS）

CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

  • 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。

什么是 CSS 预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

常用的 CSS 预处理器有哪些

  • SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
  • LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。
行为层（JavaScript）

JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

Native 原生 JS 开发

原生 JS 开发，也就是让我们按照 【ECMAScript】 标准的开发方式，简称是 ES，特点是所有浏览器都支持。截止到目前，ES 标准已发布如下版本：

  • ES3
  • ES4（内部，未正式发布）
  • ES5（全浏览器支持）
  • ES6（常用，当前主流版本）
  • ES7
  • ES8
  • ES9（草案阶段）

区别就是逐步增加新特性。

TypeScript 微软的标准

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格（C#、Delphi、TypeScript 之父；.NET 创立者）主导。

该语言的特点就是除了具备 ES 的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持 TypeScript 语法，需要编译后（编译成 JS）才能被浏览器正确执行。

JavaScript 框架

  • jQuery：大家熟知的 JavaScript 框架，优点是简化了 DOM 操作，缺点是 DOM 操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容 IE6、7、8；
  • Angular：Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用 TypeScript 语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如：1代 -> 2代，除了名字，基本就是两个东西）
  • React：Facebook 出品，一款高性能的 JS 前端框架；特点是提出了新概念 【虚拟 DOM】 用于减少真实 DOM 操作，在内存中模拟 DOM 操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门 【JSX】 语言；
  • Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化） 和 React（虚拟 DOM） 的优点；
  • Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能；

UI 框架

  • Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
  • ElementUI：饿了么出品，基于 Vue 的 UI 框架
  • Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
  • AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架

JavaScript 构建工具

  • Babel：JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript
  • WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

前后分离的演变史

后端为主的 MVC 时代

为了降低开发的复杂度，以后端为出发点，比如：Struts2、SpringMVC 等框架的使用，就是后端的 MVC 时代;

以 SpringMVC 流程为例：

  • 发起请求到前端控制器(DispatcherServlet)
  • 前端控制器请求 HandlerMapping 查找 Handler，可以根据 xml 配置、注解进行查找
  • 处理器映射器 HandlerMapping 向前端控制器返回 Handler
  • 前端控制器调用处理器适配器去执行 Handler
  • 处理器适配器去执行 Handler
  • Handler 执行完成给适配器返回 ModelAndView
  • 处理器适配器向前端控制器返回 ModelAndView，ModelAndView 是 SpringMVC 框架的一个底层对象，包括 Model 和 View
  • 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图(JSP)
  • 视图解析器向前端控制器返回 View
  • 前端控制器进行视图渲染，视图渲染将模型数据(在 ModelAndView 对象中)填充到 request 域
  • 前端控制器向用户响应结果

优点

MVC 是一个非常好的协作模式，能够有效降低代码的耦合度，从架构上能够让开发者明白代码应该写在哪里。为了让 View 更纯粹，还可以使用 Thymeleaf、Freemarker 等模板引擎，使模板里无法写入 Java 代码，让前后端分工更加清晰。

缺点

  • 前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协作有两种模式：
    • 第一种是前端写 DEMO，写好后，让后端去套模板。好处是 DEMO 可以本地开发，很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大；
    • 另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发。好处是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。
  • 前后端职责纠缠不清：模板引擎功能强大，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是 Controller，页面路由等功能本应该是前端最关注的，但却是由后端来实现。 Controller 本身与 Model 往往也会纠缠不清，看了让人咬牙的业务代码经常会出现在 Controller 层。这些问题不能全归结于程序员的素养，否则 JSP 就够了。
  • 对前端发挥的局限性：性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作，但由于后端框架限制，我们很难使用 【Comet】、【BigPipe】 等技术方案来优化性能。
基于 AJAX 带来的 SPA 时代

时间回到 2005 年 AJAX（Asynchronous JavaScript And XML，异步 JavaScript 和 XML，老技术新用法） 被正式提出并开始使用 CDN 作为静态资源存储，于是出现了 JavaScript 王者归来（在这之前 JS 都是用来在网页上贴狗皮膏药广告的）的 SPA（Single Page Application）单页面应用时代。

优点

这种模式下，前后端的分工非常清晰，前后端的关键协作点是 AJAX 接口。看起来是如此美妙，但回过头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript，浏览器端变得很复杂。类似 Spring MVC，这个时代开始出现浏览器端的分层架构：

缺点

  • 前后端接口的约定： 如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦；不少团队也有类似尝试，通过接口规则、接口平台等方式来做。有了和后端一起沉淀的 接口规则 ，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。
  • 前端开发的复杂度控制： SPA 应用大多以功能交互型为主，JavaScript 代码过十万行很正常。大量 JS 代码的组织，与 View 层的绑定等，都不是容易的事情。
前端为主的 MV* 时代

此处的 MV* 模式如下：

  • MVC（同步通信为主）：Model、View、Controller
  • MVP（异步通信为主）：Model、View、Presenter
  • MVVM（异步通信为主）：Model、View、ViewModel

为了降低前端开发复杂度，涌现了大量的前端框架，比如：AngularJS、React、Vue.js、EmberJS 等，这些框架总的原则是先按类型分层，比如 Templates、Controllers、Models，然后再在层内做切分，如下图：

优点

  • 前后端职责很清晰： 前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发。后端则可以专注于业务逻辑的处理，输出 RESTful。
  • 前端开发的复杂度可控： 前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有很多很多讲究。并非越强大越好，限制什么，留下哪些自由，代码应该如何组织，所有这一切设计，得花一本书的厚度去说明。
  • 部署相对独立： 可以快速改进产品体验

缺点

  • 代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可以复用，那么后端的数据校验可以相对简单化。
  • 全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。
  • 性能并非最佳，特别是移动互联网环境下。
  • SPA 不能满足所有需求，依旧存在大量多页面应用。URL Design 需要后端配合，前端无法完全掌控。
NodeJS 带来的全栈时代

前端为主的 MV* 模式解决了很多很多问题，但如上所述，依旧存在不少不足之处。随着 NodeJS 的兴起，JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式：

在这种研发模式下，前后端的职责很清晰。对前端来说，两个 UI 层各司其职：

  • Front-end UI layer 处理浏览器层的展现逻辑。通过 CSS 渲染样式，通过 JavaScript 添加交互功能，HTML 的生成也可以放在这层，具体看应用场景。
  • Back-end UI layer 处理路由、模板、数据获取、Cookie 等。通过路由，前端终于可以自主把控 URL Design，这样无论是单页面应用还是多页面应用，前端都可以自由调控。后端也终于可以摆脱对展现的强关注，转而可以专心于业务逻辑层的开发。

通过 Node，Web Server 层也是 JavaScript 代码，这意味着部分代码可前后复用，需要 SEO 的场景可以在服务端同步渲染，由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式几乎都能完美解决掉。

与 JSP 模式相比，全栈模式看起来是一种回归，也的确是一种向原始开发模式的回归，不过是一种螺旋上升式的回归。

基于 NodeJS 的全栈模式，依旧面临很多挑战：

  • 需要前端对服务端编程有更进一步的认识。比如 TCP/IP 等网络知识的掌握。
  • NodeJS 层与 Java 层的高效通信。NodeJS 模式下，都在服务器端，RESTful HTTP 通信未必高效，通过 SOAP 等方式通信更高效。一切需要在验证中前行。
  • 对部署、运维层面的熟练了解，需要更多知识点和实操经验。
  • 大量历史遗留问题如何过渡。这可能是最大最大的阻力。

前端 MVVM 模式

什么是 MVVM

MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上运行的 WPF） 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的**事件驱动编程方式**。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表。

MVVM 源自于经典的 MVC（Model-View-Controller）模式（期间还演化出了 MVP（Model-View-Presenter） 模式）。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互

MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的 MVVM 框架有 Vue.js，AngularJS 等。

为什么要使用 MVVM

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

  • 低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
  • 可复用： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
  • 独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
  • 可测试： 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。
MVVM 的组成部分

View

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。

Model

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则

ViewModel

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的

  • 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）
  • 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）

视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。

MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现 事件驱动编程。

View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View层和 Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环`。

概述

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

MVVM 模式的实现者

我们知道 MVVM 表示如下：

  • Model：模型层，在这里表示 JavaScript 对象
  • View：视图层，在这里表示 DOM（HTML 操作的元素）
  • ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者

  • ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
  • ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定

其它 MVVM 实现者
  • AngularJS
  • ReactJS
  • 微信小程序

为什么要使用 Vue.js

  • 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 30多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
  • 移动优先。更适合移动端，比如移动端的 Touch 事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高

Vue.js 的两大核心要素

数据驱动

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

组件化
  • 页面上每个独立的可交互的区域视为一个组件
  • 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
  • 页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面

第一个 Vue 应用程序

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

下载地址

  • 开发版本

    • 包含完整的警告和调试模式
    • 删除了警告，30.96KB min + gzip

  • CDN

    • <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    • <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

第一个 Vue 应用程序

Vue.js 的核心是实现了 MVVM 模式，她扮演的角色就是 ViewModel 层，那么所谓的第一个应用程序就是展示她的 数据绑定 功能，操作流程如下：

创建一个 HTML 文件
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个Vue应用程序</title>
		<!-- vue核心库 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	
	</body>
</html>
引入 Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
创建一个 Vue 的实例
<script >
    <!-- 编写Vue组件 -->
        var app = new Vue({
    
            // element的简写	挂载元素
            el:'#app', 
            // 组件内部数据
            data:{
    
                message:'Hello Vue!'
            }
        })
</script>

说明

  • el:'#app'：绑定元素的 ID
  • data:{message:'Hello Vue!'}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!
将数据绑定到页面元素将数据绑定到页面元素
<div id="app">
    {
  {message}}
</div>

说明：只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果，是不是和 EL 表达式非常像？

#{message} => {
  {message}}
完整的 HTML
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个Vue应用程序</title>
		<!-- vue核心库 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 准备DOM结构 -->
		<div id="app">
			{
  {message}}
		</div>
		<script type="text/javascript">
			<!-- 编写Vue组件 -->
			var app = new Vue({
    
				// element的简写	挂在元素
				el:'#app', 
				// 组件内部数据
				data:{
    
					message:'Hello Vue!'
				}
			})
		</script>
	</body>
</html>

测试 Vue

为了能够更直观的体验 Vue 带来的数据绑定功能，我们需要在浏览器测试一番，操作流程如下：

  • 在 Chrome 浏览器上运行第一个 Vue 应用程序，并按 F12 进入 开发者工具

  • 在控制台输入 app.message = 'Hello World' ，然后 回车，你会发现浏览器中显示的内容会直接变成 Hello World

说明

在之前的代码中，我们创建了一个名为 app 的 Vue 实例

var app = new Vue({
   
    // element的简写	挂在元素
    el:'#app', 
    // 组件内部数据
    data:{
   
        message:'Hello Vue!'
    }
})

此时就可以在控制台直接输入 vm.message 来修改值，中间是可以省略 data 的，在这个操作中，我并没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的 数据绑定 功能实现的；MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。

Vue 实例的生命周期

什么是生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

钩子函数的触发时机

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

条件渲染

条件判断语句

  • v-if
  • v-else

什么是条件判断语句，就不需要我说明了吧，直接看语法上效果

HTML
<div id="app">
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
</div>
JavaScript
var app = new Vue({
   
    el:'#app',
    data:{
   
        awesome:true
    }
})
测试效果

  • 在 Chrome 浏览器上运行，并按 F12 进入 开发者工具

  • 在控制台输入 app.awesome = false ，然后 回车，你会发现浏览器中显示的内容会直接变成 Oh no

注：使用 v-* 属性绑定数据是不需要 双花括号 包裹的

完整的 HTML
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue语法</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="awesome">Vue is awesome!</h1>
			<h1 v-else>Oh no 😢</h1>
		</div>
		<script type="text/javascript">
			var app = new Vue({
    
				el:'#app',
				data:{
    
					awesome:true
				}
			})
		</script>
	</body>
</html>

连续的条件判断语句

  • v-if
  • v-else-if
  • v-else
HTML
<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>

注：=== 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）

JavaScript
<script type="text/javascript">
    var app = new Vue({
    
        el:'#app',
        data:{
    
            type: 'A'
        }
    })
</script>
测试效果

  • 在 Chrome 浏览器上运行，并按 F12 进入 开发者工具

  • 分别观察在控制台输入 app.type = 'B'、'C' 的变化

完整的 HTML
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue语法</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="type === 'A'">
				A
			</div>
			<div v-else-if="type === 'B'">
				B
			</div>
			<div v-else-if="type === 'C'">
				C
			</div>
			<div v-else>
				Not A/B/C
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
    
				el:'#app',
				data:{
    
					type: 'A'
				}
			})
		</script>
	</body>
</html>

列表渲染

循环遍历语句

  • v-for
HTML
<ul id="example">
    <li v-for="item in items">
        {
  {item.message}}
    </li>
</ul>

注：items 是源数据数组并且 item 是数组元素迭代的别名。是不是像极了 Thymeleaf

JavaScript
<script type="text/javascript">
    var example = new Vue({
    
        el:'#example',
        data:{
    
            items:[
                {
    message:'Foo'},
                {
    message:'Bar'},
            ]
        }
    })
最低0.47元/天 解锁文章
冰岛暖男的春天
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
人工智能--框架表示法
Meskjei的博客
03-27 2万+
文章目录框架理论框架的基本结构框架的表示实例框架框架系统框架之间的纵向联系框架之间的横向联系 框架理论 框架理论认为，我们对世间事物的认识都是以类似框架的结构存储在记忆中的。当遇到一个新事物就从记忆中找出一个合适的框架，并根据新的情况对齐细节加以修改、补充，从而形成对这个新事物的认识。 用以往经验来认识新事物使人们常用的方法，但是我们又不可能把过往发生过的所有经验都存在脑海中，而只能用一种通用的数...
如何构建前端日历组件
最新发布
DTCloud
06-16 567
在构建UI时，我们应该考虑到日历组件的交互性，包括用户能否正确导航和操作，并保证每个事件都能够正确展示。另外，我们需要确保组件可以处理不同的时间格式，并能够进行必要的计算。最后，当我们的日历组件具备以上特点时，我们就可以考虑添加一些附加功能了。总之，一个优秀的前端日历组件应该具有易用性、个性化定制、数据处理和丰富的功能。通过正确构建、设计和实现，您可以为您的用户提供一款高效、实用和美观的日历组件。前端日历组件是在网页中展示时间的重要组件之一，通常被应用于各种类别的网站和应用程序中。
JS实现日程安排 日程安排插件
weixin_33836874的博客
01-18 5269
代码： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmpWeekPlan.aspx.cs" Inherits="Aepri.InfoDev.DPP.Web.PlanManage.EmpWeekPlan" %> <!DOCTYPE html> <html xmlns=...
js循环动态绑定带参数函数遇到的问题及解决方案[转]
10-28
关于Javascript利用循环绑定事件的例子，需要的朋友可以参考下。
动态创建样式表在各浏览器中的差异测试代码
09-05
对于标准浏览器，直接使用css[removed]也可以修改HTMLStyleElement的css规则
vue2
02-21
武德莫项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
Vue
02-09
Vue
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
vue 项目源码
08-07
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。这个"vue 项目源码"很可能是某个公司在实际开发过程中创建的一个Vue项目实例，包含了完整的前端应用代码。在这个项目中，我们可以深入理解Vue的核心...
待办事项小项目-vue-js
02-20
vue-todos是 todomvc vue模块的升级版本,界面简约，功能丰富，知道点全面，能帮您快速上手vuejs.喜欢的请点心，关注，star ,fork,这些是我坚持下去的动力!!
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
12-12
前言 开发过程中遇到了一个需求，根据用户选择的联系方式，动态改变输入框的检验条件，并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的，所以要遍历生成； 2.联系方式(手机/座机)的切换，是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单，那我们的写法就要写成: 重点在prop属性 <template v-
jQuery相关面试题
weixin_34006965的博客
03-05 398
1 你在公司是怎么用jquery的？答：在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊，复选框啊，表单啊，ajax啊，事件等 配置Jquery环境 下载jquery类库 在jsp页面引用jquery类库即可 <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"/> 接下来通...
js技术积累--个人笔记（一）
万米高空的博客
04-19 671
前台js弱项，专门开一个学习贴
ToDoList——记录每天要做事情的一个APP
阿乐的专栏
03-21 1万+
ToDoList 发现自己有点拖延症，就写了个APP，记录每天要做的事情。 一、Gif试一试 二、界面一览 三、炫技了 整个程序没有使用任何第三方开源库，虽说不要重复造轮子，可也得是我自己研究透彻的啊。 程序中写了4个自定义View，CalendarView是日历，GraphView是图表，ClockView是时钟，还有WheelView是滚轮，时间选择控件。 之后会把几个自定义Vie...
一个简单的todolist，记录我的前端第一步
to_study的博客
05-26 1万+
啦啦啦效果如下地址：点击打开链接body { line-height: 1; font-family: "Lato", sans-serif; background-color: #EFF1F2; } .todo{ width: 70%; margin: 1em auto 3em; border: 1px solid #efefef; bac...
前端部分基础习题
热门推荐
GZHGK的博客
11-19 7万+
一.HTML 1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 !DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。 标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在
Web应用技术应用方式
m0_51071144的博客
10-09 2009
  在开发 Web 应用程序时，通常需要应用客户端和服务器端两方面的技术。其中，客户端应用的技术主要用于展现信息内容，而服务器端应用的技术，则主要用于进行业务逻辑的处理和与数据库的交互等。 FU 如需要跟多资料请点击下方图片⬇（扫码加好友→备注66，不备注拒绝添加哦） Web应用技术应用方式 客户端 服务器端 案例实操 1）客户端应用的技术   在进行 Web 应用开发时，离不开客户端技术的支持。目前，比较常用的客户端技术包括 HTML 语言、CSS、Flash 和客户端脚本技术。   ✓ HTML
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值