一、背景在开发项目的过程中,有时修改后台的数据变化可能不会及时更新到页面上,此时就需要我们刷新页面更新数据,但是直接调用刷新window.location.reload()可能对操作的体验不是很好,所以就需要下面的方法。列举个场景,比如修改主体content内容,我想要刷新主体部分的组件,但是不刷新title和aside组件,怎么实现呢?实现方法就是在想要刷新的组件中封装一个方法,当需要刷新页面时
转载
2023-11-24 21:30:55
185阅读
<!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
153阅读
2评论
// 局部组件命名规范 1文件名大驼峰 MyLocalBtn.vue 2 使用的时候 将驼峰转化为横杠 <my-local-btn></my-local-btn> MyLocalBtn.vue局部组件 <template> <div> <div>我输局部组件 {{valuea}}</div> </d
原创
2022-09-01 17:50:35
308阅读
'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
112阅读
Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染):Demo访问时路径:http://IP:端口/#/routers/image.png1.建立案例文件夹 page/routers/image.png1 routers/index.vue<template>
<div>
转载
2024-02-02 09:54:40
23阅读
<!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
139阅读
2评论
vue全局路由守卫,一般用在登录token进行判断,这个场景比较常见,就不再记录 现在有一个场景就是移动端导航栏进入到另一个界面再返回到导航栏的界面,会重定向到首页。 比如这个界面进入到岗位信息/我的收藏/我的发布/意见反馈界面再按返回(这里我没有进入的界面的路由嵌套在导航栏里),这个会返回到首页界 ...
转载
2021-07-29 11:28:00
353阅读
2评论
<body> <div id="app"> <component1></component1> <component1></component1> <component2></component2>
原创
2022-06-27 11:15:34
481阅读
使用场景点击按钮(或某变量改变时),在不刷新整个页面的情况下,局部刷新(重绘)图表,或者重新加载子组件。实现方案1. 在需要局部刷
原创
2022-07-12 16:13:09
1720阅读
一、element-plus官方文档1.安装npm install element-plus --save2.全局引入全部组件全局引入很简单,但影响我们首屏的加载速度,要求加载的东西越少越好,所以前期我们就先全部引入,后期我们再修改成按需引入import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import
转载
2024-09-13 00:26:02
117阅读
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的。根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
例如:<p v-if="seen">现在你看到我了</p>如上所示:其中,v-是Vue的标识,if是指令ID,yes是expression。yes是MVVM中
首先看代码:<!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 插槽。<
文章目录前言目标关键字一、定义全局组件局部组件二、使用及场景总结前言根据场景函数等不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板全局组件定义完毕,任何vue实例都可以直接在HTML
原创
2023-06-05 11:07:22
143阅读
# Vue 3 和 TypeScript 的局部注册
近年来,Vue.js 作为一种流行的前端框架,受到了广泛的关注。随着Vue 3的发布,许多开发者开始转向这个版本,并且TypeScript的使用也越来越普及。本文将介绍在Vue 3中如何使用TypeScript进行组件的局部注册,并提供一些实际的代码示例。
## 什么是局部注册?
在Vue中,组件可以通过两种方式进行注册:全局注册和局部注
P12vue组件的局部注册 https://www.bilibili.com/video/av91679349?p=12
原创
2021-07-07 10:51:35
127阅读