vue
文章平均质量分 54
阿Q--小黑
努力搬砖中...伺机转行中...
展开
-
vue动态渲染本地路径图片不显示的解决方案,v-fro 渲染本地图片路径不显示
如果直接使用本地路径渲染是渲染不出来的,因为这种情况下渲染时会发送网络请求加你的本地地址所以渲染不出来。此时后面的路径就不是本地图片的路径了。这样怎么能找到路径?来看一下我的图片存放文件。原创 2024-03-26 16:56:40 · 558 阅读 · 0 评论 -
element-ui tree树形结构全选、取消全选,展开收起
控制树形结构全选、取消全选,展开收起。原创 2024-01-17 11:04:17 · 1317 阅读 · 0 评论 -
ant-design-vue Message 用法以及内容为 html片段情况
【代码】ant-design-vue Message 用法以及内容为 html片段情况。原创 2023-12-21 14:52:45 · 1661 阅读 · 0 评论 -
vue--$nexttick,$set,$forceupdate的区别
想必很多小伙伴在使用vue时,都遇到过明明修改data里的数据了,但是视图却不更新的情况吧,这时候有经验的小伙伴,二话不说直接调用this.$forceupdate()强制更新页面,管他啥情况,刷就完事了,我属于是整个一个大无语。$nexttick并不是真正意义上的更新视图,而是等视图更新后再执行某些操作虽然 $ forceUpdate和$set都能起到更新视图的效果,但是前者并不推荐使用,一是,官方都说了,如果你都到了要用 $ forceupdate的地步了,那你十有八九是操作有问题;原创 2023-07-19 11:21:46 · 367 阅读 · 0 评论 -
vue--$nexttick,$set,$forceupdate--更新视图的区别
nexttick并不是真正意义上的更新视图,而是等视图更新后再执行某些操作虽然 $ forceUpdate和 $ set都能起到更新视图的效果,但是前者并不推荐使用,一是,官方都说了,如果你都到了要用 $ forceupdate的地步了,那你十有八九是操作有问题;二是能用 $ set解决的问题,为什么要用$forceupdate这种更消耗性能的方法呢,如果用了,估计是你偷懒!原创 2023-06-16 15:48:38 · 910 阅读 · 1 评论 -
vue2和vue3的区别
vue2中的diff算法。vue3中的diff算法。原创 2023-06-27 14:14:41 · 515 阅读 · 0 评论 -
vs-code快捷键页面设置
【代码】vs-code快捷键页面设置。原创 2023-06-13 11:09:46 · 162 阅读 · 0 评论 -
vue-cli antd 自定义主题
vue-cli antd 自定义主题原创 2023-02-22 19:59:16 · 309 阅读 · 0 评论 -
axios多次请求同一个api,只加载最后一次的请求
axios多次请求同一个api,只加载最后一次的请求原创 2022-07-15 10:19:52 · 1626 阅读 · 0 评论 -
vue强制刷新整个页面
方法一:在 app.vue 中定义 reload() 方法。<template> <div id="app"> <router-view v-if="isReload"/> </div></template> <script>export default { name: 'App', provide() { return { reload: this.reload }原创 2022-02-25 18:06:10 · 1967 阅读 · 0 评论 -
vue-router跳转时打开新页面的两种方法
1、标签实现新窗口打开官方文档中说 v-link 指令被 组件指令替代,且 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 < a > 标签,但事实上vue2版本的 是支持 target="_blank" 属性的(tag=“a”),如下:<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>2、编程式导航原创 2022-02-18 13:51:18 · 24652 阅读 · 0 评论 -
vue左右滑动
<template> <ul class="box"> <li class="left">左边</li> <li class="resize"></li> <li class="mid">右边</li> </ul></template> <script> export default { // name: 'Dashb原创 2022-01-10 11:32:14 · 1528 阅读 · 0 评论 -
vue2中v-if和v-for同时使用的问题
在官方文档中明确指出v-for和v-if不建议一起使用。原因:v-for比v-if优先级高,所以使用的话,每次v-for都会执行v-if,造成不必要的计算,影响性能,尤其是当之需要渲染很小一部分的时候。<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} </li></ul>如上述情况,即使有100个user中只有一个需要使用原创 2021-11-28 13:58:06 · 1344 阅读 · 0 评论 -
关于Vue v-for中的:key作用
项目功能:数据间有三层关系,通过3个 v-for实现,渲染页面元素的时候,出现错乱的情况,感觉和虚拟DOM有点关系。其实不只是vue、react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设原创 2021-11-28 13:45:37 · 109 阅读 · 0 评论 -
vue使用keep-alive缓存页面
目录标题概念作用原理参数(Props)对生命周期函数变化缓存整个项目使用新增属性include/exclude,缓存部分页面动态判断,使用v-bind:include使用beforeRouteLeave或者afterEach中进行拦截处理列表页回到上次浏览位置概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。作用原创 2021-11-28 11:16:02 · 404 阅读 · 0 评论 -
vue mixins 混入
1、mixins 含义mixins 就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改,mixins 是一种分发Vue组件中可复用功能的非常灵活的一种方式。一个混入对象可以包含任意组件选项。比如组件的生命周期,data() { return{} },methods 方法等,凡事能在组件上编写的都能在 mixins 中定义。2、什么时候使用Mixins页面的风格样式不同,但是执行的方法和需要的数据类似,这时候我们就可以把公共的方法提出来,然后在混入需要用到的组原创 2021-11-24 22:02:32 · 248 阅读 · 0 评论 -
vue双向绑定原理
view的变化能实时让model发生变化,而model的变化也能实时更新到view。vue采用数据劫持&发布-订阅模式的方式,通过es5提供Object.defineProperty()方法来劫持(监控)各属性的getter、setter,并在数据(对象)发生变动时通知订阅者,触发相应的监听回调。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。要实现vue中的双向数据绑定,大致可以划分三个模块:Observer、Compile、Watch.原创 2021-11-24 21:13:27 · 340 阅读 · 0 评论 -
vue router 路由,导航守卫
1. 全局前置守卫: beforeEach(to,from, next)2. 全局解析守卫: beforeResolve(to,from, next)3. 全局后置钩子: afterEach(to,from)4. 路由独享的守卫: beforeEnter(to,from, next)5. 组件内的守卫:beforeRouteEnter(to,from, next)beforeRouteUpdate(to,from, next)beforeRouteLeave(to,from, next)6. 完整的导航.原创 2021-08-24 22:42:17 · 711 阅读 · 0 评论 -
vue router 路由
嵌套路由嵌套路由这里App.vue的 < router-view > 是最顶层的出口,渲染最高级路由匹配到的组件,此处有一个< Tab >组件,在开发项目时请不要再此处放组件,我放在此处只是为了方便查看同样地,一个被渲染组件同样可以包含自己的嵌套 < router-view >。例如,在 router 组件的模板添加一个 < router-view >:要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置:.原创 2021-08-22 17:46:19 · 221 阅读 · 0 评论 -
vue 使用NProgress进行页面跳转的进度条
NProgress是页面跳转是出现在浏览器顶部的进度条官网:http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress如下图所示,绿色的进度条就是NProgress实现的效果1、安装$ npm install --save nprogress 或者 $ yarn add nprogress//用法NProgress.start();NProgress.done();2、使用router原创 2021-08-21 16:25:00 · 338 阅读 · 0 评论 -
vue v-slot 插槽: 后备内容、具名插槽、作用域插槽、解构插槽、动态插槽
目录标题具名插槽作用域插槽解构插槽动态插槽具名插槽作用域插槽解构插槽动态插槽原创 2021-08-15 20:03:53 · 571 阅读 · 0 评论 -
vue生命周期图片详解
vue2.X生命周期详解中文原创 2021-08-13 09:22:04 · 388 阅读 · 0 评论 -
vue 九种组件传值方式汇总
目录标题props和$emit(父子组件)$ attrs和$ listeners(跨级通信)$ parent和$ children(非常简洁)ref(获取子组件所有属性,事件等)v-model (特殊情景使用)provide和inject (成对出现,用于父向下传递数据)中央事件总线(同级组件通信)v-slot(插槽传值,灵活运用)vuex (集中的数据处理方式)props和$emit(父子组件)1,父组件向子组件传递数据是通过prop传递的:补充: props定义方式不同以及相关用法(类型检查,默原创 2021-08-08 15:40:42 · 524 阅读 · 0 评论 -
vue-vuex
在src目录下面新建一个文件store,在里面新建index.js文件,代码如下:import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({ // state 用于存储数据 state: { money: 100, }, // getters 用于获取state里面的数据,同时也可以进行一些简单的计算属性 getters:{ getM原创 2021-08-01 23:02:56 · 141 阅读 · 0 评论 -
vue 基础知识点(必看)
methods:用于写方法函数computed: 计算属性watch: 侦听属性data: 存储数据原创 2021-08-01 16:09:54 · 577 阅读 · 0 评论