一、背景在开发项目的过程中,有时修改后台的数据变化可能不会及时更新到页面上,此时就需要我们刷新页面更新数据,但是直接调用刷新window.location.reload()可能对操作的体验不是很好,所以就需要下面的方法。列举个场景,比如修改主体content内容,我想要刷新主体部分的组件,但是不刷新title和aside组件,怎么实现呢?实现方法就是在想要刷新的组件中封装一个方法,当需要刷新页面时
最近vue项目要实现打印网页中局部区域的要求,但是用下列方式的时候显得样式全部都没有作用上 printConte
原创
2022-07-22 09:33:27
838阅读
Vue 中组件的局部css样式配置:scoped样式1:说明:<!-- ## scoped样式 1.
原创
2022-12-10 15:40:54
458阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="ap
转载
2021-07-05 17:10:00
144阅读
2评论
前言做过安卓开发的都知道点九图,我们在一张图片的上边框、左边框用鼠标拖动一下,就能决定某一张图片哪些区域可以被拉伸,如下图: 上图中红色区域是可以被拉伸的,四个角落的白色区域是不会被拉伸的。比较典型的一个应用场景是聊天界面中的气泡,由于每次打的字内容长度都不一样,所以聊天气泡需要被拉伸以便能刚好容纳大家发送的内容。但是,如果随意拉伸,很可能就会出现下图的效果(图片摘自郭霖的《第一行代码》): 如果
转载
2023-09-03 14:36:50
354阅读
// 局部组件命名规范 1文件名大驼峰 MyLocalBtn.vue 2 使用的时候 将驼峰转化为横杠 <my-local-btn></my-local-btn> MyLocalBtn.vue局部组件 <template> <div> <div>我输局部组件 {{valuea}}</div> </d
原创
2022-09-01 17:50:35
273阅读
'total' is assigned a value but never used no-unused-vars 当页面报这种错误就很烦,明明定义了,也用了,却提示没有被用,出现这种原因是,创建项目的时候选择了Eslint,语法检验。此时我们在声明的地方使用//eslint-disable-line no-unused-vars即可解决!var total = 0; //e
原创
2023-09-08 14:30:01
106阅读
什么是CSS-in-JS?顾名思义,CSS-in-JS就是可以使用JS来编写CSS样式,那么为什么要用JS来编写CSS呢?我写CSS写的好好的,干嘛非给自己找不自在呢?相信以前大家都听说过这么一个词:关注点分离,就算没听过这个词那么你肯定至少也听说过这么一句话:要把HTML、CSS和JS分开编写,不要写在一起形成耦合,不要写行内样式和行内脚本等,比如像这样?CSS-in-JS但是React的出现打
Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染):Demo访问时路径:http://IP:端口/#/routers/image.png1.建立案例文件夹 page/routers/image.png1 routers/index.vue<template>
<div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="ap
转载
2021-07-05 18:39:00
133阅读
2评论
vue全局路由守卫,一般用在登录token进行判断,这个场景比较常见,就不再记录 现在有一个场景就是移动端导航栏进入到另一个界面再返回到导航栏的界面,会重定向到首页。 比如这个界面进入到岗位信息/我的收藏/我的发布/意见反馈界面再按返回(这里我没有进入的界面的路由嵌套在导航栏里),这个会返回到首页界 ...
转载
2021-07-29 11:28:00
337阅读
2评论
<body> <div id="app"> <component1></component1> <component1></component1> <component2></component2>
原创
2022-06-27 11:15:34
464阅读
使用场景点击按钮(或某变量改变时),在不刷新整个页面的情况下,局部刷新(重绘)图表,或者重新加载子组件。实现方案1. 在需要局部刷
原创
2022-07-12 16:13:09
1640阅读
一、element-plus官方文档1.安装npm install element-plus --save2.全局引入全部组件全局引入很简单,但影响我们首屏的加载速度,要求加载的东西越少越好,所以前期我们就先全部引入,后期我们再修改成按需引入import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import
首先看代码:<!DOCTYPE html><html lang=en><head> <meta charset="utf-8" /> <title>Hello world</title> <script src="vue.js">&
原创
2022-10-25 01:16:28
13阅读
vue 插槽 slot 的用法一、简单定义、使用 slot二、slot 变量传值三、跨组件传递 slot方法1: 多定义一个中间插槽方法2:使用 scopedSlots 字段 传递作用域插槽方法3:动态组件渲染[TODO]方法4:Provide/Inject 将Slot主动传递给子节点 [TODO]附加 一、简单定义、使用 slot新建 child 子组件,定义 container 插槽。<