Vue
文章平均质量分 78
一起来看烟花吧
这个作者很懒,什么都没留下…
展开
-
[Vue脚手架项目] 通过ProvidePlugin实现loadash的全局按需导入
项目背景vue脚手架项目,vue-cli4需求需要用到lodash中的一些方法,如cloneDeep函数,所以适合按需导入而且在项目的多个文件中都会用到这个方法,所以希望能全局导入,而不是在每个用到的模块中去引入。方案step1: 通过npm下载loadash包step2:新建src/plugins/lodash.js文件,来引入需要的函数。import { cloneDeep, merge } from 'lodash'export { cloneDeep, merge,}原创 2021-11-24 20:33:18 · 719 阅读 · 0 评论 -
[Vue] 父组件明明按照正确的绑定方式更新了传递给子组件的prop属性 子组件却没有及时更新。解决方案:key值 nextTick watch监听。
prop介绍prop是单向数据流,父组件传递给子组件的数据发生改变,而子组件的页面中引用了该prop,那么按理说子组件会重新渲染,将最新的prop渲染到页面上。能正常更新的案例在父组件中启动定时器,每隔1s对状态数据parentNum进行加一操作。父组件中引用子组件时将parentNum作为属性传入。下面的例子实现的效果是子组件每隔一秒都会更新。从0开始每隔一秒加1并更新在页面上。<!--父组件--><template> <div class="parentC原创 2021-07-20 22:42:44 · 4698 阅读 · 1 评论 -
[Vue源码] 图解Vue源码 DOM-diff算法中的子节点更新策略
介绍Vue是数据驱动视图的,数据发生变化视图就要随之更新,在更新视图的时候难免要操作DOM,而操作真实DOM非常耗费性能。Vue通过JS模拟出一个称为虚拟DOM节点来代表一个真实的DOM节点。当数据发生变化时,我们对比变化前后的虚拟DOM节点,通过DOM-Diff算法计算出需要更新的地方,然后去更新需要更新的视图。本文主要介绍DOM-diff算法中的子节点更新策略。首先看下面的流程图的位置A,当我们发现新旧的虚拟DOM节点是同一个节点时(key值相同),我们会对这两个节点进行精细化比较。然后进入原创 2021-04-15 22:01:17 · 695 阅读 · 0 评论 -
Vue组件通信-在父组件中触发子组件中的函数 在子组件中将函数执行结果返回给父组件
在父组件中触发子组件中的函数,子组件将函数执行的结果返回给父组件ref参考官网:https://cn.vuejs.org/v2/api/#refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向子组件实例。<!-- `vm.$refs.p` will be the DOM node --><p ref="p">hello</p>原创 2020-12-12 17:46:12 · 1100 阅读 · 0 评论 -
二次封装elementUI的时间选择器,可以选择以日月年为单位
目录标题elementUI封装的时间选择器二次封装成一个组件效果如下子组件全局注册自定义组件父组件中使用二次封装的时间选择器通信方式参考elementUI封装的时间选择器element-UI的时间选择器如下图所示,通过type属性可以设置日期选择器的时间单位,可以以日、周、月、年为单位。这里二次封装时间选择器,让一个时间选择器可以选择以日,月,年为单位。<div class="container"> <div class="block"> <span c原创 2020-12-08 10:43:59 · 1566 阅读 · 0 评论 -
element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题 高宽设置)
element-ui的官网页面使用的这个滚动条,但是在官网文档中没有介绍这个组件。在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。在项目中使用这个组件时由于各层的样式没有设置好,可能会显示出原生的滚动条,特此记录。搭建脚手架项目,安装element-ui插件按需引入需要的组件import Vue from 'vue'import { Scrollbar} from 'element-ui'Vue.use(Scrollbar)使用<原创 2020-10-20 20:59:31 · 14666 阅读 · 3 评论 -
Vuex状态管理-mapState的基本用法详细介绍
使用vuex集中管理状态Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化// store.js/*vuex的核心管理对象模块:store */import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 状态对象const state = { // 初始化状态 这里放置的状态可以被多个组件共享 count: 1,原创 2020-09-30 11:54:02 · 42741 阅读 · 14 评论