样式 组件scoped vue

Vue自定义创建项目

基于VueCli 自定义创建项目 顺序: 安装脚手架 vue create 项目名 选择自定义 Babel/Router/CSS/Linter Vue2.x VueRouter hash模式 CSS预处理 ESlint:Standard & Lint on Save 配置文件 dedicated c ......
项目 Vue

第六章、Vue3高级

目录二十四、项目实战细节(二)1、组件设置name属性 二十四、项目实战细节(二) 1、组件设置name属性 <script setup> // Vue3.3后支持 defineOptions({ name: '组件名', inheritAttrs: false }) </script> ......
Vue3 Vue

Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景,处理方式也不外乎三个步骤: 1.通过全局状态管理定义状态值(vuex、pinia等)。 2.在程序主入口监听状态值变化,从而展示/隐藏laoding动画。 3.在请求和相应拦截器中变更状态值。 第一二步骤处理大同小异,但在第三步中,网上很多博文分享的方法是 ......
升级版 loading Vue

Istio从入门到精通—— Istio 的主要组件

Istio 的主要组件 Istio 主要由控制面组件和数据面组件组成。Istio 1.20.0(https://github.com/istio/istio/releases/download/1.20.0/istio-1.20.0-linux-arm64.tar.gz) 默认安装的组件如下: ......
Istio 组件

vue 创建项目流程

1、首先在文件下打开cmd运行 cd 到你的目录下面 2、npm init vue@latest 命令创建项目 默认都选否,具体需要,后面自行添加 2、根据提示完成下三步操作 这是运行npm install 由于卡住了,就需要进行下一步,手动打开刚刚的目录文件 并且在该目录下,运行cmd,并输入,n ......
流程 项目 vue

用Electron+vue+ffmpeg开发一个视频处理的工具

前端时间用electron+ffmpeg开发了一个视频压缩软件,然后越熟悉ffmpeg越觉得它的牛叉,以前觉得视频处理需要高深莫测的技术,ffmpeg为我解开了视频处理的神秘面纱。然后决定做一个视频处理的工具,包括视频压缩、视频剪切、视频合并、视频格式转换、视频添加水印,先上效果图。 上一篇文章介绍 ......
Electron 工具 ffmpeg 视频 vue

Vue中的路由

概念 1)理解: 一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 2)前端路由:key是路径,value是组件 3)作用:设定访问路径,并将路径和组件映射起来(就是用于局部刷新页面,不需要请求服务器来切换页面) Route(路由) Route ......
路由 Vue

uniapp vue可以通过mixins混入代码,可以通过下面方法混入template

vue全局混入template方法:在根目录vue.config.js(没有就新增)里添加一下代码 //红色部分是混入的自定义vue组件module.exports = { chainWebpack: config => { config.module.rule('vue').use('vue-lo ......
可以通过 template 代码 方法 uniapp

(uniapp)小程序实现自定义弹框,自定义样式showmodal

在components里新建自定义弹框组件——modal.vue <template> <!-- 自定义弹窗 --> <view class="_showModal" v-show="show"> <view class="_shade"></view> <view class="_modalBox ......
样式 showmodal 程序 uniapp

vue2+element+vue-quill-editor实现富文本框组件(使用链接引入视频+上传本地视频+上传本地图片)

参考文档:https://www.duidaima.com/Group/Topic/Vue/12272 前提不赘述,npm引入插件并全局导入 components文件夹下创建ArticleEditor.vue: <template> <div class=""> <!-- 富文本框 --> <qui ......
视频 vue-quill-editor 组件 vue 文本

14、Flutter Card组件

Card是卡片组件块,内容可以由大多数类型的Widget构成,Card具有圆角和阴影,这让它看起来有立 体感。 Card实现一个通讯录的卡片 class MyApp2 extends StatelessWidget { const MyApp2({super.key}); @override Wid ......
组件 Flutter Card

【源码系列#01】vue3响应式原理(Proxy)

Vue3中响应数据核心是 reactive , reactive 中的实现是由 proxy 加 effect 组合,我们先来看一下 reactive 方法的定义 ......
源码 原理 Proxy vue3 vue

vue3 ts 生命周期函数写法

写法1 import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue'; // 页面加载时 onMounted(() => { initResize(); }); // 监 ......
周期函数 写法 函数 周期 生命

VS CODE,保存自动格式化vue代码配置 流程记录

进入vscode,ctrl+shift+p ,搜索Preferences: Open User Settings(json) ,然后把下面配置覆盖到原本的地方 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false ......
流程 代码 格式 CODE vue

简单的低开编辑器(一):实现组件渲染

好家伙, 项目目录如下: 该项目使用Vue3, Element-plus 效果图如下: 开搞: 1.写出简单界面 App.vue <template> <div class="app"> <Editor v-model="state"></Editor> </div> </template> <sc ......
编辑器 组件

vue十六

<div id="app16" style="text-align: center;margin-top: 10%;"> <div> <input id="sou" type="text" style="width: 40%;" v-model="word"> <button style="heig ......
vue

vue中使用element中的表单展示数据

要注意表单的data不能写错,只能是tableData data里面的“item”可以改成别的,无所谓 ......
表单 element 数据 vue

vue15

<div id="app15"> <ul> <li v-for="(item , index) in news" :key="item.id" > {{ item.title }} <img alt="img" :src="item.img"> </li> </ul> </div> <script> ......
vue 15

vue3 基础-Pinia 可能替代 Vuex 的全局数据状态管理

Pinia 初体验 Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器,使用Composition Api进行重新设计的,也被视为下一代Vuex。 Pinia是一个Vue的状态管理库,允许跨组件、跨页面进行全局共享状态,也由于其设计的简洁性、和对typescript的良好支持,取代V ......
全局 状态 基础 数据 Pinia

在Vue3中使用Element-Plus分页(Pagination )组件

在Vue3中使用Element-Plus分页(Pagination )组件 开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中。 记:在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。 开始实现 引入表格和分页组件的H5标签。 <strong>Element-Plus ......
Element-Plus Pagination 组件 Element Vue3

React学习二:表单受控绑定、获取Dom、组件通信、useEffect、自定义Hook

一、受控表单绑定 概念:使用react组件的状态(useState)控制表单的状态。双向绑定,数据变化视图也变,视图变数据也变。 import { useState } from 'react' function App() { const [content, setContent] = useSt ......
表单 组件 useEffect React Hook

vue项目中如何解决出现两次重新登录弹框的问题?

举例描述一下业务场景:当token过期,需要用户重新登录时,需要在页面弹框提示重新登录。 显然这个重新登录的提示弹框的逻辑是在响应拦截器中加的,我的代码如下:(只提供部分代码) 1 // 返回拦截器 2 service.interceptors.response.use( 3 response => ......
项目 问题 vue

自定义Vue脚手架

创建一个vue项目,项目名叫custom 选择最下面的自定义脚手架 选择你需要的配置 选择vue版本 询问是否采用历史模式,默认是hash模式,history模式需要后端进行额外配置 选择CSS预处理器 选择eslint规范,这里选择的是无分号的规范 选择什么时候进行校验,这里选择的是保存时进行校验 ......
脚手架 Vue

vue slot插槽

插槽(slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽,可以把插槽认为是组件封装期间,为用户预留的内容的占位符,适用于父组件→子组件,$slots是组件插槽集,是组件所有默认插槽、具名插槽的集合,可以用来获取当前组件的插槽集。 插槽可 ......
slot vue

4、全局样式使用

1、在assets文件下面创建css样式文件,如:assets/css/global.css 2、引用全局样式,在main.ts文件里面引用样式文件 3、页面效果如下 ......
全局 样式

springboot3+vue3大事件的展示

跟着黑马老师,做了一遍收获很大 ......
springboot3 springboot 事件 vue3 vue

vue项目中,如何去掉报错时出现的黑色遮罩?

比如在我们发送请求时 ,返回401,此时出现带有401提示信息的黑色遮罩,我们不想要这个遮罩出现,只需要在控制台有报错信息就好,如下图显示,如何解决呢? 解决办法:在vue.config.js文件中配置如下代码即可: ......
黑色 项目 vue

Vue中跟 keep-alive 有关的生命周期是哪些?

在开发 Vue 项目的时候,大部分组件是没必要多次渲染的,所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态,避免重新渲染,在开发 Vue 项目的时候。 生命周期函数:在被 keep-alive 包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deact ......
keep-alive 周期 生命 alive keep

Android Material组件库(日期选择和时间选择器)基本使用

原文:Android Material组件库(日期选择和时间选择器)基本使用 - Stars-One的杂货小窝 简单的封装下Material组件里的日期选择器和时间选择器的使用方法 效果 代码 需要添加Material组件库的依赖(不过后面新版本Android Studio创建的新项目都会有此依赖了 ......
组件 Material 日期 Android 时间

vue中遇到的函数执行顺序问题

vue中遇到的函数执行顺序问题 总结:vue中方法和方法间并未严格按照执行顺序执行的,可以使用async和await修饰符,使方法调用和执行是异步的。 在vue中的方法调用顺序是依次进行的,方法体内部也是依次执行的, 但是,两个方法体的执行顺序并不能严格控制,也就是说,并不一定是先执行完第一个方法后 ......
函数 顺序 问题 vue