Vue 从入门到进阶之路（十三）
之前的文章我们介绍了一下 vue 中的作用域插槽，本章我们来看一下动态组件与 v-once 指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<p @click="handleClick">clickMe</p>
</div>
<script>
Vue.component("child-one", {
template: `<p>我是第一个子组件</p>`
});
Vue.component("child-two", {
template: `<p>我是第二个子组件</p>`
});
var app = new Vue({
el: '#app',
data: {
type: "child-one"
},
methods: {
handleClick() {
console.log("type 数据更改前", this.type);
this.type = this.type === "child-one" ? "child-two" : "child-one";
console.log("type 数据更改后", this.type)
}
}
})
</script>
</body>
</html>
上面的代码中，我们定义了两个子组件 child-one 和 child-two，并且我们在父组件中定义了一个 handleClick() 方法，当点击时我们通过父组件中 type 的值来使两个子组件进行显隐，结果如下：
当点击 clickMe 时显示结果符合我们的预期，其实上面的代码可以改成如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<component :is="type"></component>
<p @click="handleClick">clickMe</p>
</div>
<script>
Vue.component("child-one", {
template: `<p>我是第一个子组件</p>`
});
Vue.component("child-two", {
template: `<p>我是第二个子组件</p>`
});
var app = new Vue({
el: '#app',
data: {
type: "child-one"
},
methods: {
handleClick() {
console.log("type 数据更改前", this.type);
this.type = this.type === "child-one" ? "child-two" : "child-one";
console.log("type 数据更改后", this.type)
}
}
})
</script>
</body>
</html>
我们将 <child-one> <child-two> 标签删除掉，改为 <component> 标签内，并在标签内写上 :is="type"，<component> 标签是一个动态标签的意思，我们也可以将它写成 <p> 或者 <h1> 都行，:is="type" ，根据父组件 type 数据的值和 handleClick() 方法对 type 数据改变来确定 :is="type" 内 type 的值是 child-one 还是 child-two，这样就能动态地改变时显示 child-one 组件还是 child-two 组件，结果如下：
运行结果和上面是一样的。
接下来我们来看一下 v-once 指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<p @click="handleClick">clickMe</p>
</div>
<script>
Vue.component("child-one", {
template: `<p v-once>我是第一个子组件</p>`
});
Vue.component("child-two", {
template: `<p v-once>我是第二个子组件</p>`
});
var app = new Vue({
el: '#app',
data: {
type: "child-one"
},
methods: {
handleClick() {
console.log("type 数据更改前", this.type);
this.type = this.type === "child-one" ? "child-two" : "child-one";
console.log("type 数据更改后", this.type)
}
}
})
</script>
</body>
</html>
上面的代码中我们在每一个子组件的 template 模板中的 <p> 表内都加了一个 v-once 属性，如果不加这个指令的话我们每次通过 handleClick() 方法来判断 type 时，子组件就会进行一个销毁，另一个重新挂载，就会消耗不必要的内存。加上 v-once 时，当第一次挂载时需要渲染一次，当销毁时并不是彻底删除掉，而是留在了内存中，当需要重新挂载时就不需要重新渲染，而是直接去内存中拿，这样就能减少不必要的内存消耗。
Vue 从入门到进阶之路（十三）的更多相关文章
- Vue 从入门到进阶之路（十四）
之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...
- Vue 从入门到进阶之路（十二）
之前的文章我们介绍了一下 vue 中插槽的使用,本章我们接着介绍一下 vue 中的作用域插槽. <!DOCTYPE html> <html lang="en"&g ...
- Vue 从入门到进阶之路（十一）
之前的文章我们说了一下 vue 中组件的原生事件绑定,本章我们来所以下 vue 中的插槽使用. <!DOCTYPE html> <html lang="en"&g ...
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Python 爬虫从入门到进阶之路（十三）
之前的文章我们介绍了一下 BeautifulSoup4 模块,接下来我们就利用 BeautifulSoup4 模块爬取<糗事百科>的糗事. 之前我们已经分别利用 re 模块和 Xpath ...
- Java 从入门到进阶之路（十三）
在之前的文章我们介绍了一下 Java 类的 private,static,final,本章我们来看一下 Java 中的抽象类和抽象方法. 我们先来看下面一段代码: // 根据周长求面积 class S ...
- Java 从入门到进阶之路（二十三）
在之前的文章我们介绍了一下 Java 中的 集合框架中的Collection 的迭代器 Iterator,本章我们来看一下 Java 集合框架中的Collection 的泛型. 在讲泛型之前我们先来 ...
- vue从入门到进阶：vue-router路由功能（九）
基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...
- vue从入门到进阶：Vuex状态管理（十）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
随机推荐
- php与Redis实现一个100万用户的投票项目，如何实现实时查看投票情况？
好了,什么是冷热数据交换呢? 很土的解释一下,冷数据就是之前使用的数据,有种过去式的感觉,而热数据就是当前的数据,理解为现在进行时吧.如何交换呢?就是将Redis的数据周期存储到mysql中! 整体的 ...
- Django项目BBS博客论坛
BBS 项目开发逻辑梳理 第一步:先进行数据库设计 数据库设计规则是: 1.先创建基表:用户表.站点表.文章表.标签表.分类表.文章2标签第三张关系表.点赞点踩表.评论表 2.书写表中的基本含有的字段 ...
- Instrument API介绍
1. Instrumentation介绍 JVMTI(JVM Tool Interface)是 Java 虚拟机所提供的 native 编程接口,是 JVMPI(Java Virtual Machi ...
- Delphi解析修改Json文件，基于superobject.pas（ISuperObject）
在经过一系列的波折后,还是觉得delphi读取并修改json文件来的方便: 在网络上找到一个delphi的三方库ISuperObject,添加到项目后直接引用就行: 下载地址 ISuperObject ...
- 软件开发工具（第11章：Eclipse CDT开发常用功能)
一.自定义编辑器 C/C++首选项设置(重点.记忆.应用) 单击菜单栏中的窗口(Window)菜单, 选择首选项(Preferences)选项,在 弹出的对话框左侧部分,展开C/C++树 形菜单. 外 ...
- 一 、爬虫的认识与http
一 .爬虫的认识与http 互联网应用架构 一般采用c/s架构,b/s架构或者m/s架构 c/s 即 client server 客户端 服务端 b/s 即 browser server 浏览器 服 ...
- WinCC的电子签名与审计追踪
如何写入审计追踪记录 用脚本向Audit中添加记录有两种方法,一种方法是用InserAuditEntryNew函数写入,另一种方法是生成属于“操作员输入消息”类型的报警消息,该报警消息会记录到Audi ...
- React劲爆新特性Hooks 重构去哪儿网火车票PWA
React劲爆新特性Hooks 重构去哪儿网火车票PWA 获取课程资料链接:点击这里获取 本课程先带你细数最近一年来React的新特性,如Hooks.Redux API,让你从头理解Hooks对传统R ...
- jimdb压测踩坑记
本文记录在jimdb压测过程中遇到的各种小坑,望能够抛砖引玉. 1.压测流量起来后,过了5分钟左右,发现ops突降,大概降了三分之一,然后稳定了下来 大概原因:此种情况,jimdb极有可能某个分片的连 ...
- golang的make
golang 分配内存主要有内置函数new和make,今天我们来探究一下make有哪些玩法. map只能为slice, map, channel分配内存,并返回一个初始化的值.首先来看下make有以下 ...