vue中动态组件与v-once指令，简单小示例

最新推荐文章于 2021-03-30 20:05:23 发布
最新推荐文章于 2021-03-30 20:05:23 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端学习 文章标签： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Uookic/article/details/80267221
版权 
 <body>
    <div id="root"> 
        <component :is="type"></component> <!-- 等同于下面注释掉的部分 -->
         <!-- <child1 v-if="type==child1"></child1>
        <child2 v-if="type==child2"></child2>  -->
        <button @click="btnclick">toggle</button> 
    </div>
    <script>
         let child1 = {//v-once会把组件缓存，提高静态组件的效率 
          template : `<div v-once>child-one</div>` 
         }

        let child2 = { 
            template : `<div v-once>child-two</div>` 
        }

       var vm = new Vue({
          el:'#root',
          data:{
              type:"child1"
          },
          methods:{
            btnclick:function(){
              this.type = (this.type === "child1" ? "child2": "child1")
            }
          },
          components:{
              child1,
              child2
          } 
      })
    </script>
</body>
Qin__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态添加 HTML元素
06-13
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
vue的指令
weixin_30377461的博客
06-29 716
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" ...
vue学习20-21：动态组件和v-once指令
simoon's的博客
05-07 183
v-once指令2、动态组件
Vue 中的动态组件与 v-once 指令
purple_lumpy的博客
10-16 207
toggle 两个组件的功能，代码如下。 &lt;div id="root"&gt; &lt;child-one v-if="type === 'child-one'"&gt;&lt;/child-one&gt; &lt;child-two v-if="type === 'child-two'"&gt;&lt;/child-two&gt; &l
动态组件和v-once指令
学会改变的博客
07-03 188
可以通过component标签对组件进行动态加载 通过is属性来确认加载哪个属性 动态加载的组件最好加上v-once，因为component在进行组件切换显示的时候会销毁组件，而组件加上v-once属性之后，不显示的组件会加载在内存里面，提高显示的性能 示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态组件和v-onc.
Vue 动态组件与 v-once 指令的实现
10-17
主要介绍了Vue 动态组件与 v-once 指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue学习笔记之动态组件和v-once指令简单示例
09-17
主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
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><
十一、动态组件与v-once指令
manba
04-09 144
本篇想分享两个东西 一、动态组件 动态组件的格式：就像规定的作用域插槽一样，特定的格式 <component :is='type'></component> 其中的 :is 用来指明是哪一个组件，如果是就会创建该组件，不是就会销毁该组件 不管是 动态组件还是 if 组件每次都是在反复创建 和 销毁，这样对性能有一定的影响 二、v-once指令 v-o...
vue中动态指令参数
前端精髓
11-22 5684
vue 在 2.6.0 版本的时候新增了动态参数，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数： <a v-bind:[attributeName]="url"> ... </a> 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。 export default { data () { return { attributeName: "href" } } } 例如，
动态组件和v-once指令使用例子详解
qq_36958916的博客
11-12 136
动态组件 <div id="root"> <component :is="type"></component>//动态组件 <button @click="change">切换组件</button> </div> <script> var vm =new Vue({ el:"#root", data:{ type:'child-one' }
Vue——v-once指令的用法——2020.11.14
weixin_43402353的博客
11-14 612
一丶v-once 该指令后面不需要跟任何表达式 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变 二丶实战代码 <!--作者：key--> <!--浏览工具：Chrome--> <!--开发工具：WebStorm--> <!--开发时间：2020/11/14 9:17--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
Vue指令v-once
cattleya_ada的博客
09-28 186
正常情况下，如果改变data里面的属性值，属性值会发生统一改变。代码如下：    &lt;div id="app"&gt;    &lt;h1&gt;{{name}}&lt;/h1&gt;    &lt;p&gt;{{sayName()}}&lt;/p&gt;    &lt;/div&gt;        &lt;script&gt;       
Vue v-bind动态绑定及内部指令
javascipt____的博客
07-13 859
v-bind动态绑定 v-bind基本用法及语法糖，主要用于动态更新HTML 元素属性，接下来简单回顾下。 v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改 变任一方数据后都会实时更新。 对象语法格式 数组语法格式”绑定类名” 除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。例如： class-数组语法-普...
Vue中v-once使用
m0_46694056的博客
03-15 1624
1、先看代码 当我们打开浏览器是如下： 如果在控制台中设置mes的值的话，页面的内容也会跟着改变，如下： 这就说明vue是通过数据驱动来实现页面渲染的，如果我们加上v-once属性，这就意味着vue会跳过编译，只会渲染一次，后续就不会再去监听这个数据变量了，这也就能起到一个提高性能的作用，如：当用用户登录之后，用户的头像、昵称基本不会变，vue也就会跳过它，从而提高了性能。 ...
Vue v-once
热门推荐
秋殇阁
07-18 1万+
v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。 下面我们看个例子，我们先不使用v-once指令： &lt;!--v-once示例--&gt; &lt;template&gt; &lt;div&gt; &lt;div&g...
添加新的动态指令功能
weixin_34342992的博客
04-20 189
添加g新的动态指令功能。程序实比例如以下：动态条件道指令5 //sdhfsd {/*jhdifsdji*/ maifgn()() ｛ [start1]-&gt;[test1,test2]; [test1,test2]-&gt;([test3,test4]-&gt;[test5,test6])[test3,test4]; [test5,test6]-&gt;[结束,显示结果,成功]; } }...
v-once(一次)
zhangyiyang111的博客
03-30 126
v-once(一次) 1.v-once:没有表达式 2.使用了v-once指令所在直接元素以及他下面的所有子元素,页面一旦渲染成功时候,所有数据将不再发生改变.简言之:v-once所在元素称之为静态内容. 案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
Vue2 指令v-bind v-pre v-cloak v-once
xuanwuziyou的专栏
08-27 1890
1.属性绑定指令 v-bind style> article{padding:20px;border:4px solid #ccc} .redColor{color:red} .blueColor{color:blue} .narrow{width:50%} .head{text-decoration:underline} style>
vue router-view组件的v-slot指令
最新发布
05-16
`<router-view>` 是 Vue Router 提供的组件，用于渲染匹配到...在上面的例子中，我们使用 `v-slot` 指令来接收 `<router-view>` 组件传递的 `props` 数据，并将其传递给 `<my-component>` 组件的 `data` 属性进行渲染。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值