样式 组件scoped vue

Vue computed 计算属性语法

1. 不传参 import { ref, computed} from "vue"; let carnoColor = computed(()=>{ return formatterCarnoColor(model.value.carnoColor) }) 2. 传参 <div v-for="ite ......
语法 computed 属性 Vue

React和Vue的区别,大家怎么看?

React和Vue都是创建web应用程序的绝佳选择。React得到了科技巨头和庞大的开源社区的支持,代码库可以很大程度地扩展,允许你创建企业级web应用程序。React拥有大量合格甚至优秀的开发人员粉丝,可以解决你在开发阶段可能遇到的任何问题。 ......
React Vue

vue3 使用 vue-i18n 配置多语言环境

## 1. 插件地址: [Vue I18n官方文档](https://kazupon.github.io/vue-i18n/zh/ "Vue I18n官方文档") [GitHub地址](https://github.com/kazupon/vue-i18n "GitHub地址") ## 2. 安装: ......
vue 环境 vue-i vue3 18

使用vue自定义指令实现按钮权限管理

原文链接:https://www.jianshu.com/p/f7d6b9420cee 官网链接:https://v2.cn.vuejs.org/v2/guide/custom-directive.html 注册全局指令 Vue提供了一个directive方法给我们注册自定义指令,在main.js中 ......
指令 按钮 权限 vue

vue函数式组件

<template>改为<template functional> 即可 然后模板里使用到父组件参数的话,需在变量前面加上 props,如 <div>{{count}}</div> 改为 <div>{{props.count}}</div> 如果组件比较简单,只是展示数据的话,可以使用函数式组件,函 ......
函数 组件 vue

vue.use()详解

原文链接:https://blog.csdn.net/sunyctf/article/details/127706967 官网解释: 前言: 相信很多人在用 Vue 使用别人的组件时,会在在main.js中用到 Vue.use(xx) 。例如:Vue.use(VueRouter)、Vue.use(M ......
vue use

vue语法错误 + Promise错误 + js 错误,通过钉钉报警

一、背景: 为了使系统更加稳定,在用户使用期间,若发现异常,可及时应对,采取了“报警机制”。 通常“报警机制”分为2种,一种是后端对api监控及自定义监控,出现异常,通过钉钉或邮件的形式通知,第二种是前端对js语法,vue语法,自定义报错进行监控,以此来规范代码质量,保证系统预警 二、流程步骤 1. ......
错误 语法 Promise vue js

vue-router动态路由无限循环

// isLogined 用来判断用户是否已登录 router.beforeEach((to, from, next) => { if(isLogined){ next() }else{ console.log('测试') next('login') } }) next() 表示放行,直接进入to路 ......
路由 vue-router 动态 router vue

vue中使用sockjs

1,安装依赖 npm install sockjs-client --save npm install stompjs --save 2,使用混入封装 在src下创建mixins文件夹,然后创建sockjs.js文件 import SockJS from "sockjs-client"; impor ......
sockjs vue

Vue3 中的v-model实现父子组件数据同步通信

v-model在vue2中也就是双向绑定作用,但是在vue3中除了实现双向绑定外,还可以进行组件的通信父子组件的数据同步,接下来看看例子: <template> <h1>{{ num }}</h1> <child-event v-model="num"></child-event> </templa ......
父子 组件 v-model 数据 model

vue——qq音乐播放器(1) 左边导航栏样式的实现

实现结果: 左侧导航栏样式实现完整代码: 1 <template> 2 <!-- 左边导航条 --> 3 <div class="leftnav"> 4 <!-- logo --> 5 <div class="logo"></div> 6 <div class="my-scroll"> 7 <!-- ......
样式 播放器 音乐 vue

让C#调用vue组件里的方法

前言:web页面开发时采用的是vue开发的,后台语言是C# 需求:后台需要通过浏览器调用vue组件的方法 c# 可以调用xxx.html 中的script引用的js中定义的方法是可以调用的, 之前c#调用html中的script中的方法,是因为方法直接挂在全局的 <script> function ......
组件 方法 vue

如何在本地给 vue-router4 扩展功能?

### 背景 前段时间给基于 vue3 的 H5 项目做一些优化,该项目经常会有一些页面间的通信,譬如选择地址、乘机人等信息后回填到上一个页面。对于这种简单、频繁的通信,实在不想搞成**重火力**(eg:pinia)。最好让使用者用完即走,不用操心除业务逻辑之外的任何事情。 ### 路由控制页面通信 ......
vue-router 功能 router vue

Vue-Router路由模式

在Vue-Router中,有两种路由模式可供选择:hash模式和history模式。它们之间的主要区别在于URL的表现形式和对服务器的要求。 1、hash模式 定义:在hash模式下,URL会以一个#符号开头,后面跟随路由的路径。 例如:http://example.com/#/home。当URL的 ......
路由 Vue-Router 模式 Router Vue

vite中导入全局样式变量(less、sass)

1、先新建vars.less文件,定义基础样式变量2、在vite.config.ts 下添加配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from "path"; // ......
全局 变量 样式 vite less

tailwindcss 选型,以及vue配置

一、为什么选择tailwindcss? Tailwind CSS 是一个受欢迎的、功能丰富的CSS框架,它与传统的CSS框架(如Bootstrap)有些不同。以下是一些人们通常对于Tailwind CSS 的评价: 优点: 工具驱动的开发: Tailwind CSS 提供了一系列实用工具类,这些类可 ......
tailwindcss vue

vue watch 数组对象中用法

[{count:1,price:2},{count:2,price:3}] 如何通过监听里面count,price,每个对象中增加赋值totalprice字段 ``` Count: {{ item.count }}, Price: {{ item.price }}, Total Price: {{ ......
数组 对象 watch vue

vue3 - el-upload 组件 报错custom validator check failed for prop "percentage 解决

1.原因 文件列表的元素缺少 percentage 默认参数 查看组件源码 虽然加了语法糖,不影响使用,但是控制台还是会打印警告 2.解决 给个默认值即可 ......
percentage 组件 el-upload validator custom

记录一次调查OpenEuler上部署K8s,CoreDNS组件一直 CrashLoopBackOff ,describe 时 Back-off restarting failed container 的解决办法

详细过程不赘述了。百度了很多办法都不可用,然后尝试重装k8s 好多次也不管用。 最后解决。 kubectl edit deployment coredns -n kube-system apiVersion: apps/v1 kind: Deployment metadata: annotation ......

vue3+typescriot中的defineEmits(子组件向父组件传值)

以下是vue3中的子组件向父组件传值的简单demo 子组件: 父组件: <child-event @xxx="handler"></child-event> <script lang="ts" setup> import childEvent from "./childEvent.vue" cons ......
组件 defineEmits typescriot vue3 vue

vant4组件源码——Button

基于VUE3+TS的vant组件研究,主要分析一下Button组件 ## 一、组件结构 ``` |-src #主要文件路径 |-button #公共组件 |-demo #组件示例 |-index.vue |-Button.tsx #组件封装 |-index.less #组件样式 |-index.ts ......
组件 源码 Button vant4 vant

vue3+ts绘制二维码

界面展示 实现步骤 引入qrcode.vue npm i qrcode.vue 界面引入并使用 <template> <div> <el-row>二维码标签</el-row> <el-row :gutter="20"> <el-col :span="6"> <el-input v-model="co ......
vue3 vue ts

vue3+typescript中的props

以上是子组件 以上是父组件 <script setup langs="ts"> let props = defineProps(['info','money'])//父子组件的通信需要用到defineProps方法去接受父组件想要传递的数据 console.info(props) </script> ......
typescript props vue3 vue

vue2和vue3中插槽写法区别

#### 一、slot是什么 - 在HTML中 slot 元素 ,作为 Web Components 技术套件的一部分,是Web组件内的一个占位符。 - 该占位符可以在后期使用自己的标记语言填充。 (我们可以理解为solt在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑( ......
写法 vue vue2 vue3

从壹开始前后端开发【.Net6+Vue3】

# 项目名称:KeepGoing(继续前进) ## 1.1介绍 工作后,学习的脚步一直停停走走,希望可以以此项目为基础,可以不断的迫使自己不断的学习以及成长 将以Girvs框架为基础,从壹开始二次开发一个前后端管理框架 在这过程中一步步去学习使用到的技术点,也同时会将在此过程中遇到的问题进行分享 # ......
Net6 Vue3 Net Vue

使用 transmittable-thread-local 组件解决 ThreadLocal 父子线程数据传递问题

在某个项目中,需要使用mybatis-plus多租户功能以便数据隔离,前端将租户id传到后端,后端通过拦截器将该租户id设置到ThreadLocal以便后续使用,代码大体上如下所示: ThreadLocal<Integer> threadLocal = new InheritableThreadLo ......

WPF 全局样式资源管理

在WPF通常我们习惯于把样式直接写在控件属性上,例如: <TextBox x:Name="pluginPathTxt" Margin="0,0,0,0" Background="White" Cursor="IBeam" TextWrapping="Wrap" AcceptsReturn="True ......
全局 样式 资源管理 资源 WPF

vue3中watchEffect的作用和适用方法

# 前言 该文章是[Vue3好玩的API-watchEffect](https://www.bilibili.com/video/BV13Z4y1y7hQ/?spm_id_from=333.337.search-card.all.click "Vue3好玩的API-watchEffect")观后的记 ......
watchEffect 作用 方法 vue3 vue

import.meta.globEager('./src/components/**/*.vue'); 遍历文件

main.js ``` const importAll = (modules) => { Object.keys(modules).forEach((key) => { const component = key.replace('/src/', '@/').replace('.vue', ''); ......
components globEager 文件 import 39

CSS基础-文字样式

# 文字样式 文字是网页展示的重要内容之一,所以对文字的修饰也是CSS重点关注的一部分, CSS提供了以下常用的样式属性来修饰文字。 ### color 属性 color 用来设置文字颜色。 设置方式支持以下几种格式 - 英语颜色单词形式,如: red(红)、black(黑)、orange(橙色)等 ......
样式 文字 基础 CSS