动态组件于v-once指令

最新推荐文章于 2020-02-20 12:41:32 发布
原创 最新推荐文章于 2020-02-20 12:41:32 发布 · 299 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用Vue的动态组件特性实现子组件切换，并利用v-once指令提升性能，避免不必要的组件重建。

先看两个子组件

现在想要实现一个按钮每一次点击之后，child-two和child-one交替出现

那么现在我们也可以通过动态组件来实现这个功能

发现效果完全一样，这是因为component是Vue里面的动态标签，它能够自动根据is里的内容，选择不同的子组件

------------------------------------------------------------------------------------

我们在跳出child-one和child-two的时候，Vue其实是销毁一个然后再从新建立另一个，一直重复这个过程，这样子比较废性能，因为child-one我们并没有发生改变，如果能存储到内存就好了，每次只要调用就可以

v-once指令就是用来干这种事情的

页面刚加载的时候v-once会把child-one存到内存中，

当我们点击change之后，又把child-two存到内存中，以后再点击就不需要重新销毁再重建了

vue--动态组件与v-once指令
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-04 301
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态组件与v-once指令</title> <script src="./vue.js"></script> </head> <body> ...
Vue 动态组件与 v-once 指令的实现
10-17
Vue动态组件与v-once指令的实现知识点主要涵盖了Vue框架中的动态组件的概念、v-if和v-show指令的用法、以及v-once指令的特性与优化效果。下面将详细阐述这些知识点： 首先，动态组件的概念是指在Vue应用中，可以...
初识 Vue（21）---（Vue中的动态组件与v-once指令）
姜皓的博客
07-29 386
Vue中的动态组件与v-once指令 案例：点击按钮，child-one 变成 child-two；child-two 变成 child-one &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue中的动态组件与v-
Vue_动态组件与v-once指令
大脸猫~
06-30 501
一.component动态组件 动态组件是根据判断值决定是否显示该组件&amp;lt;component&amp;gt; 根据is的值来显示相应的组件是否应该显示 使用的方法： &amp;lt;component :is='changeConponents'&amp;gt;&amp;lt;/component&amp;gt; &amp;lt;button @click=&quot;changeclick&quot;&amp
动态组件和v-once指令
zl13015214442的博客
02-24 203
1、动态组件 我们首先看一个例子，首先定义两个子组件，要实现的功能是点击change按钮，进行两个组件的切换： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态组件与v-once指令&lt;/title&
Vue动态组件、v-if+v-once、v-show的区分使用
卓越无关环境，保持空杯心态——靡不有初，鲜克有终
02-20 3773
当我们想做出一个toggle的效果，比如点击一下显示文字1，再点击显示文字2，再点击显示文字1....这样交替进行的时候，大家是怎么做的呢？ ...
Vue：动态组件与v-once指令
Boxbiu的博客
11-23 281
通过组件实现一个简单的点击切换功能 <div id="app"> <child-one v-if="type === 'child-one' "></child-one> <child-two v-if="type === 'child-two' "></child-two> <button @click="...
Vue 动态组件 和 v-once 指令
可控的事情要谨慎，不可控的事情要乐观。
10-11 235
<body> <div id='root'> <!-- 动态组件:它会根据is里面数据type的变化,自动的加载不同的组件 --> <component :is="type"></component> <!-- <child-one v-if="type ...
Vue动态组件与v-once指令
A cold winter的博客
12-02 176
动态组件会根据is属性数据的变化动态自动加载不同的组件，下面这段代码就是通过动态组件实现了一个toggle的功能 <body> <div id="root"> <component :is="type"></component> <button @click="handleClick">change</button&...
vue学习笔记之动态组件和v-once指令简单示例
09-17
动态组件和v-once指令 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <component :is="type"></component> <button @click="handleBtnClick">change Vue.component('child-one'...
Vue 动态组件components和v-once指令的实现
12-29
一、实现两个组件间互相展示、互相隐藏 ...动态组件</title> [removed][removed] </head> <body> <child v-if=type content=child-one> <child v-if=type content=child-two><
移动端一倍图，二倍图，三倍图尺寸的问题
热门推荐
VVVZCS的博客
09-07 1万+
1 rem = html font-size = 50px 在reset.css文件中 假如一个二倍图的div高度是86px 那么对应的我们应该填43px 移动端一般用rem表示宽高 所以这里我们应该填写0.86rem 如果一个一倍图的高度是23px 那么我们应该填写0.46rem 同理3倍图...
window.addEventListener('scroll', yourFunction)的问题
VVVZCS的博客
09-10 1万+
假如我们在一个页面中设置了window.addEventListener('scroll', this.handleScroll)，那么当我们使用路由跳转到其他页面的时候，可能就会仍停留在原来的位置，什么意思呢， 就是我们在A页面中滑动到比如距离Top500px的距离，这个时候在A页面的500px地方有一个路由可以跳转到B页面，B页面设置了window.addEventListener('scr...
vuex模块中使用namespaced之后的引用方法
VVVZCS的博客
11-15 1万+
store-&gt;index.js export default new Vuex.Store({   state,   mutations,   actions,   modules: {     user   } })   user.js const state = {   userName: 'ReSword' } const mutations = {   // } const a...
Vue项目前后端接口的联调
VVVZCS的博客
09-10 1万+
我们在之前的项目中，使用的都是本地的JSON数据文件，那么在实际项目开发过程中，肯定是不能用本地的JSON文件的，所以我们需要把JSON文件放在服务器上，我们使用的是Apache2.4本地服务器 1，下载压缩包 http://httpd.apache.org/download.cgi 2，下载完之后，解压到自己定义的目录 D:\DevelopTools\Apache 然后更改...
解决keep-live使用之后的问题
VVVZCS的博客
09-10 5686
keep-aliv能够帮助我们实现页面ajax请求只被请求一次，在你跳转页面的时候，也不会被请求多次，可是比如在旅游页面中，当我们在城市选择页面重新选择城市，这个时候就需要重新发送一个ajax请求，来显示对应城市的推荐内容 解决方法1： 使keep-alive新增的一个生命周期函数activated（实际上还有一个对应的deactivated函数），这个函数和mounted相比，mounted...
Vue当中子组件无法获取父组件值的情况
VVVZCS的博客
10-17 5507
parent.vue &lt;template&gt; &lt;div&gt; &lt;roles :roleData="item" v-for="item of roleData"&gt;&lt;/roles&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Roles
Vue指令v-pre、v-once、v-cloak使用实例解析
v-once指令用于确保元素或组件只渲染一次，即使后面数据发生变化，也不会再次进行渲染。这有助于提升性能，特别是当你不需要数据动态更新时。 **用法示例：** ```html <span v-once>{{ message }} ``` 在这个例子...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值