vue2（四）

最新推荐文章于 2023-01-02 17:20:26 发布
最新推荐文章于 2023-01-02 17:20:26 发布
阅读量287 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67398884/article/details/125892629
版权

一、动态组件

1.1 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染？

1.1.1 component标签基础用法

vue 提供了一个内置的 < component > 组件，专门用来实现动态组件的渲染。示例代码如下
在这里插入图片描述
component组件用法，如果要在APP组件上渲染left组件，除了像之前一样最后一步用标签left来渲染之外，还可以在原来标签的地方放一个component组件占位，如果要渲染哪个组件就用component里面的is属性赋值这个组件的名字。
在这里插入图片描述
或者可以和上图一样，在data中定义一个变量，值为要渲染的组件名字，然后给is属性动态绑定这个变量，注意是动态绑定，所以要用v-bind或者：来绑定。

点击按钮切换渲染组件的案例
在这里插入图片描述

1.1.2 使用keep-alive保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。
在这里插入图片描述
left组件的数据在切换到right之后再切换回来会重新归零，原因是切换right组件时left组件已被销毁，而新的left是新创建的一个实例对象，和之前的没有关系了。如果想要离开left组件切换到right组件时不被销毁，使用keep-alive保持状态。如下图只需要用keep-alive组件包住需要动态创建和销毁的地方。
在这里插入图片描述
这个时候left切换到right时left未被销毁而是被缓存，这时候切换回left时left重新被激活而right被缓存。

keep-alive 对应的生命周期函数
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动

最低0.47元/天 解锁文章
counting stars240
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.x 常用自定义指令，项目常用自定义指令
csl125的博客
07-08 957
directives.js import Vue from 'vue' /** * 点击元素外 触发事件 * */ Vue.directive('clickoutside', { bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false }
vue中自定义指令directive
WhyBecause的博客
03-15 362
一、 什么是自定义指令 我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令 指令使用的几种方式： //会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中 `v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"`
Vue.directive指令(自定义指令) 生命周期
qq_37899792的博客
03-10 7667
自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。 inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中) update: 被绑定与元素所在模板更新时调用...
vue directives bind 参数中的el binding
xtaydwxf1988的专栏
04-11 2321
当前只针对vue2 directives: {             loadMore: {                 bind: (el, binding) => {                         binding.value()//这里是指调用在method里的loadMore方法                 }             }      
vue自定义指令相关
qq_34093387的博客
07-01 247
指令定义函数提供了几个钩子函数（可选）：: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 重点: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。重点: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详 细的钩子函数参数见下）。重点: 被绑定元素所在模板完成一次更新周期时调用。了解: 只调用一次， 指令与元素解绑时调用。了解钩子函数的参数有：el: 指令所绑定的
前端vue2源码梳理文档
07-31
前端 Vue2 源码梳理文档 一、Vue2 框架 Vue2 是一个前端框架，使用 MVVM 模式，即 Model-View-ViewModel。其中，Model 代表数据，View 代表视图，ViewModel 代表视图模型。ViewModel 负责监听 Model 的变化，并...
vue、四级联动（省市区街道）
01-07
2、引入： import Vue from 'vue'; import { pcaa } from 'area-data-vue'; import 'area-linkage-vue/dist/index.css'; import AreaLinkageVue from 'area-linkage-vue'; Vue.prototype.$pcaa = pcaa; Vue....
vue2+vue3笔记
07-14
Vue2+Vue3 笔记 一、mounted 和 updated 的区别 mounted是在页面初次加载时调用，而updated是在数据改变并且要在页面重新渲染完成之后触发的，但如果只是改变数据的值，而没有重新渲染该值，那么updated方法不会被...
Vue2 模板template的四种写法总结
08-27
下面小编就为大家分享一篇Vue2 模板template的四种写法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2-landing-page
03-17
vue2登陆页面项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
vue directives自定义指令的使用
xiaoxiaoluckylucky的博客
03-10 5317
directiveCom.vue： <template> <div> 数量: <input :value="myNum" v-check-num="{key:'myNum',maxval:'1000',minval:'100'}" /> <div v-show="show">测试指令</div> <button @click="toggle">切换一下show</button> &
vue中如何自定义指令directive
田兴的博客
12-18 8110
vue除了内置指令（v-model,v-for,v-bind…）,vue 也允许注册自定义指令. 注册自定义指令分为全局注册与局部注册两种： 注册 注册一个使元素自动获取焦点的指令 全局注册 使用Vue.diretive()来全局注册指令。 // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted...
vue.directive
lala_likesun的博客
12-15 2万+
vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作 1、vue.directive 有两个参数：id（string）和[definition](function|object) 2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind 2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的.
Day_06 Vue学习
qq_43209850的博客
01-26 745
1.自定义指令 1.1函数式 指令与元素成功绑定时（一上来） 指令所在的模板被重新解析时 <body> <div id="root"> <h2>当前的n值是： <span v-text="n"></span> </h2> <h2>放大10倍后的n值是： <span v-big="n"></span&g
VUE动态组件,插槽和自定义指令
weixin_68658847的博客
01-02 1839
VUE动态组件,插槽和自定义指令
vue中directives的用法
热门推荐
请叫我李先生
06-26 8万+
vue中directives的用法 关于 vue 中 directives 的用法问题，详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用，directives做权限按钮的功能 1. directives 怎么用 directives 在生命周期内用 export default { data() { ret...
vue.js 自定义指令directives，Vue.directive使用
蕃薯耀的博客
12-06 1033
ml&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue.js 自定义指令directives&lt;/title&gt; &lt;style type="text/css"&gt; [v-cloak]{ display: none; } &lt;/style&gt; &a
vue ---- 动态组件
weixin_44235759的博客
11-22 1948
动态切换组件的显示隐藏 component 如何实现动态组件渲染 vue提供了一个内置的<component>,专门用来实现动态组件的渲染。 这个标签就相当于一个占位符，需要使用is属性指定绑定的组件 <button @click="comName = 'Left'">展示Left</button> <button @click="comName = 'Right'">展示Right</button> <div class="box"&gt
vue2 使用G2Plot
最新发布
10-19
Vue2可以使用G2Plot进行数据可视化。G2Plot是一个基于G2的可视化库，它提供了多种图表类型，包括柱状图、折线图、饼图等等。使用G2Plot可以方便地实现数据可视化，同时也可以自定义图表样式和交互效果。在Vue2中使用G2Plot需要先安装G2Plot和G2，然后在Vue组件中引入相关的模块即可。下面是一个使用G2Plot绘制饼图的示例代码： ``` <template> <div id="pie"></div> </template> <script> import { defineComponent } from 'vue'; import { Pie } from '@antv/g2plot'; export default defineComponent({ mounted() { const pieData = [ { type: '分类一', value: 27 }, { type: '分类二', value: 25 }, { type: '分类三', value: 18 }, { type: '分类四', value: 15 }, { type: '分类五', value: 10 }, { type: '其他', value: 5 } ]; const piePlot = new Pie('pie', { appendPadding: 10, data: pieData, angleField: 'value', colorField: 'type', radius: 1, innerRadius: 0, label: { type: 'inner', offset: '-30%', content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, style: { fontSize: 14, textAlign: 'center' } }, interactions: [{ type: 'element-active' }] }); piePlot.render(); } }); </script> ``` 在这个示例中，我们使用了G2Plot的Pie模块来绘制饼图。首先定义了一个id为pie的div元素作为图表容器，然后在mounted钩子函数中创建了一个Pie实例，并传入了相关的配置项和数据源。最后调用render方法将图表渲染到页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值