动态组件与v-once指令初步了解

最新推荐文章于 2022-10-25 00:11:08 发布
最新推荐文章于 2022-10-25 00:11:08 发布
阅读量124 收藏
点赞数
分类专栏： vue 学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaonanhaijing/article/details/109357518
版权

首先创建两个组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child-one></child-one>
        <child-two></child-two>

    </div>

    <script>
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div>child-two</div>'
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

然后我们看运行效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child-one v-if="type ==='child-one'"></child-one>
        <child-two v-if="type ==='child-two'"></child-two>
        <button @click="handleBtnClick">change</button>
    </div>



    <script>
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
                }
            }
        })
    </script>

</body>

</html>

运行效果图
在这里插入图片描述
我们还可以换一种方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <!-- 这个就是动态组件 -->
        <component :is="type"></component>
        <!-- <child-one v-if="type ==='child-one'"></child-one>
        <child-two v-if="type ==='child-two'"></child-two> -->
        <button @click="handleBtnClick">change</button>
    </div>



    <script>
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
                }
            }
        })
    </script>

</body>

</html>

在这里插入图片描述
动态组件 会根据is的变化 自动的加载不同的组件

v-once的意思就是只渲染一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root" v-once>
        <!-- 这个就是动态组件 -->
        <!-- <component :is="type"></component> -->
        <child-one v-if="type ==='child-one'"></child-one>
        <child-two v-if="type ==='child-two'"></child-two>
        <button @click="handleBtnClick">change</button>
    </div>



    <script>
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
                }
            }
        })
    </script>

</body>

</html>

在这里插入图片描述

我们还有另外一个例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <!-- 这个就是动态组件 -->
        <!-- <component :is="type"></component> -->

    </div>



    <script>
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            template: `
            <div>
             <child-one v-if="type ==='child-one'" />
              <child-two v-if="type ==='child-two'" />
             <button @click="handleBtnClick">change</button>
             </div>
            
            `


                methods: {
                handleBtnClick: function() {
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
                }
            }
        })
    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <!-- 这个就是动态组件 -->
        <!-- <component :is="type"></component> -->

    </div>



    <script>
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            template: `
            <div>
             <child-one v-if="type ==='child-one'" />
              <child-two v-if="type ==='child-two'" />
             <button @click="handleBtnClick">change</button>
             </div>
            
            `,


            methods: {
                handleBtnClick: function() {
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
                }
            }
        })
    </script>

</body>

</html>

运行效果

在这里插入图片描述

同理 v-once也可以在这里使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <!-- 这个就是动态组件 -->
        <!-- <component :is="type"></component> -->

    </div>



    <script>
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            template: `
            <div v-once>
             <child-one v-if="type ==='child-one'" />
              <child-two v-if="type ==='child-two'" />
             <button @click="handleBtnClick">change</button>
             </div>
            
            `,


            methods: {
                handleBtnClick: function() {
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
                }
            }
        })
    </script>

</body>

</html>
西门吃雪……
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态组件和v-once指令——一个点击切换的按钮效果
weixin_44561961的博客
06-05 127
文章目录前言一、v-once和动态组件二、使用步骤1.引入库总结 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、v-once和动态组件 v-once属性可以把数据放到内存而不是销毁，需要用到再拿出来，优化性能 vue自带的指的就是动态标签，会根据is里面数据的变化自动加载不同数据 二、使用步骤 1.引入库 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
Vue 动态组件与 v-once 指令的实现
10-17
主要介绍了Vue 动态组件与 v-once 指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
动态组件与 v-once 指令
07-11 89
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></sc...
Vue的常用指令3（v-once和v-cloak）
lihui61357457的博客
12-01 297
详情可见 v-once <!-- 1.什么是指令? 指令就是Vue内部提供的一些自定义属性, 这些属性中封装好了Vue内部实现的一些功能 只要使用这些指令就可以使用Vue中实现的这些功能 2.Vue数据绑定的特点 只要数据发生变化, 界面就会跟着变化 3.v-once指令: 让界面不要跟着数据变化, 只渲染一次 --> <!--这里就是MVVM中的View--> <div id="app"> <p v-once>原始数据: {{ name }}&
动态组件，插槽语法，自定义命令的使用
qq_59076775的博客
10-29 384
一.我们一般用动态组件来干什么？ 1.多个组件使用同一个挂载点，并动态切换，这就是动态组件 2.语法: <component :is="变量"></component> 变量一般关联着要显示的组件， 3.<keep-alive> </keep-alive> 的作用 在做动态切换的时候进行缓存，减轻浏览器的压力,不加的时候在页面中来回创建和销毁。 当加了<keep-alive> </ke...
Vue动态组件和v-once指令
qq_21987433的博客
12-20 226
1.Vue中使用动态组件 实例：实现使用一个按钮切换2个组件 【1】一般实现方法 <div id="root"> <child-one v-if="type=='child-one'"></child-one> <child-two v-if="type=='child-two'"></child-...
vue学习笔记之动态组件和v-once指令简单示例
09-17
在 Vue 中，动态组件和`v-once`指令是两种非常实用的功能，它们可以帮助我们优化性能和提高用户体验。让我们深入了解一下这两个概念。 动态组件是Vue中的一种机制，允许我们根据应用程序的状态在不同组件之间进行...
Vue 动态组件components和v-once指令的实现
10-16
在本文中，我们将探讨Vue的两个重要特性：动态组件（components）和`v-once`指令，并通过示例代码来理解它们的实现和应用。 一、动态组件（components） 动态组件是Vue.js中用于在同一个挂载点上动态渲染不同组件...
v-once是什么
我的博客
02-26 1723
v-once 能够让标签的内容，也就是{{str}}中，data里面的某个数据例如str，保持在vue的data初始化之后，str的第一个值。 具体情况是有次项目，要求显示上次表单填报过的内容，后台传过来的显示字段和我双向数据绑定的，后边要上传的接口字段是同一个（而且这个表单是根据后端传来的数组动态显示的，所以绑定的数据也是动态的）。 所以用下面的写法 <div v-once>{{str}} </div> <el-input v-model="str"></el-i
16 Vue 中动态组件与 v-once 指令实践
最新发布
野路子云遇见不同的自己
10-25 659
16 Vue 中动态组件与 v-once 指令实践
v-once
弱智de克星
11-08 2560
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：<html> <head> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p>可以改变：{
Vue(10)v-once修饰符
大连赵哥的博客
06-17 179
Vue(10)v-once修饰符
vue 动态组件与 v-once 指令
Jinmy的博客
09-15 209
实现一个功能，点击按钮，实现两个标签的切换显示隐藏： 代码一： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue v-once 指令&lt;/title&gt; &lt;script src="./vue.j
[Vue] 动态组件以及v-once的使用
BnuzLeon的博客
02-15 446
PROPS 例子 动态组件：code v-once指令： code 实现功能： 点击Change按钮，切换child-one和child-two组件。 动态组件 实现 1. 创建组件 Vue.component('child-one',{ template: '&lt;div&gt;child-one&lt;/div&gt;' }) Vue.component('child-two'...
VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on
weixin_41040445的博客
12-11 505
1、v-html、v-text、{{}} 上面三种都是渲染文本的方法，使用场景的区别 v-text和{{}}渲染结果类似，都是以文本类型进行渲染 区别： 1、{{}}在渲染结果之前，会有编译之前的文本显示，v-text没有这种现象 2、{{}}更加灵活，中间是可以添加内容的，v-text只能渲染data中的数据，中间不允许插入内容 <h1 v-text = "a">数值不显示</h1> <h1 >数值是{{a}}---</h1>
动态组件与v-once指令
Akita·Wang's Semantic Segmentation
07-05 151
&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&gt; &lt;script src="vue.js"&gt;&am
基本指令v-once
atu1111的博客
08-16 7913
基本指令v-once   v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容   下面示例，原本是每一秒展示动态随机数，但是因为使用v-once 首次渲染后，就不在改变数字了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
vue中v-once
cmolong的博客
03-08 2708
v-once 作用： 执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v...
vue指令中的v-once
热门推荐
A31208的博客
05-05 2万+
v-once在日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。常见用法如下：当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的&lt;div id="app"&gt; &lt;p v-once&gt;{{msg}}&lt;/p&gt; //msg不...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值