代码编织梦想

el-爱代码爱编程

表格圆角设置 //表格头部圆角 :deep(.el-table__header-wrapper) { border-radius: 8px; z-index: 100 !important; ove

vue3 插槽slot_vue3 插槽样式-爱代码爱编程

 关于作用域         默认插槽、具名插槽只能访问使用者的作用域,插槽的内容无法访问子组件的数据。Vue模版中表达式只能访问其定义时所处的作用域,这和Javascript的语法作用域规则是一致的。         如果需要访问子组件中的作用域,则使用作用域插槽 默认插槽         <slot>元素是一个插槽出口(slot o

vue3 异步组件defineasynccomponent-爱代码爱编程

 简介         在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能。 使用异步组件对应用进行优化         当用户首次打开一个应用时,如果所有的页面都进行同步加载,会很影响首页的打开速度,此时我们可以使用异步加载的方式,不需要在首页中展

vue3 依赖注入provide与inject_vue3 inject-爱代码爱编程

简介         关于provide与inject下面是vue官网上的一些介绍         通常情况下,当我们需要从父组件向子组件传递数据时,会使用props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传

vue3.0中使用 highlight 实现代码高亮_vue highlight 编辑-爱代码爱编程

目录 1、安装highlight.js与@highlightjs/vue-plugin 2、在main.js中引用 3、组件中使用 4、代码展示 在页面中 编写代码 想要实现代码高亮,如下图。 可使用highlight 1、安装highlight.js与@highlightjs/vue-plugin 注意:highlight.js与

67 -爱代码爱编程

一. 什么是pinia Pinia是Vue的最新状态管理工具,是Vuex的替代品 二. 手动添加Pinia到Vue项目 在实际开发项目的时候,关于Pinia的配置,可以在项目创建时自动添加 现在我们初次学习,从零开始: 1. 创建项目         (1). 使用 Vite 创建一个空的 Vue3 项目  npm create vu

vue学习笔记(三):计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用_侦听器和样式绑定-爱代码爱编程

目录 一、计算属性 1.使用方式 2.计算属性与方法的区别 二、类与样式绑定 1.Class的绑定 绑定对象: 绑定数组: 2.Style绑定 三、表单输入绑定 1.v-model指令 2.v-model修饰符 四、侦听器 五、模版引用 1.引子 2.模版引用获取DOM操作 一、计算属性 1.使用方式 在前面

vue学习笔记(四):深入了解组件(上)-爱代码爱编程

目录 一、组件基础 1.引子 2.组件组成结构 3.组件的引用 二、组件嵌套关系 三、组件注册方式 1.全局注册 2.局部注册 3.全局注册的劣势 四、组件传递数据(Props) 1.Props传递静态数据 2.props传递动态数据 3.使用一个对象绑定多个 prop 4. 单向数据流 5.Prop 校验 6.默认值 7

vue学习笔记(五):深入了解组件(下)_vue组件学习-爱代码爱编程

目录 一、组件事件($emit) 二、组件与v-model 三、组件数据传递 四、透传Attributes 1.透传Attributes的使用 2.禁用透传Attributes 五、插槽Slots 1.插槽的使用 2.渲染作用域 3.插槽默认值 4.具名插槽 5.插槽中的数据传递 一、组件事件($emit) 在组件的

vue中倒计时(日,时,分,秒)的计算和当前时间计时读秒_前端vue计算时间,执行多少分钟-爱代码爱编程

在了解倒计时原理之前先了解一些时间戳 例如:12小时转换为时间戳 12✖️60✖️60✖️1000 第一个60单位分钟 第二个60单位是秒 第三个1000单位毫秒 未来某天的倒计时 <!DOCTYP

vue scss的使用(二)-爱代码爱编程

        在日常的开发中,我们可能有些一能够复用的style,我们不希望重复写这些样式,此时我们可以使用Scss的混合器         一个简单的小栗子,使用scss的混合器配置button样式 @mixin btn-colors($normal, $hover){ background-color: $normal; &:ho

vue3 scss的使用(一)-爱代码爱编程

        最近因为工作原因阅读了ElementPlus和Vexip UI开源框架的源代码,发现这两个框架的style样式都是用的scss,今天进行了scss系统性的研究学习。 安装 // 使用vue3+vite的环境 npm install sass -S 使用             一个小栗子,全局scss中的变量的使用 expor

vue学习笔记——vue3循环生成表单时,对每一行新生成的数据添加表单验证的方法-爱代码爱编程

应用场景: 在form表单内,动态生成一个数组类型的一组数据,要求对生成的每一组数据内容进行表单验证。例如动态添加人员,并对每个人的人员的信息输入框进行表单验证。 解决思路: 把rules的验证规则循环写在element

vue报错笔记_dmin@1.0.0 serve: `set node_options="-爱代码爱编程

1:npm ERR! Missing script: "dev" 这是因为vue 版本升级后,你需要使用 npm run serve 来运行项目 vue2:npm run dev vue3:npm run serve 2:报错npm ERR! XXX@0.1.0 serve: `vue-cli-service serve --open

【vue2+element ui通用后台】菜单权限_elementui vue菜单权限-爱代码爱编程

文章目录 不同账号不同菜单动态注册路由资源下载 对于菜单权限我们需要解决以下问题: 1、不同的账号登录,有不同的菜单 2、通过输入url地址来显示页面,所以应该根据权限动态注册路由 3、对于菜单数据,

70 -爱代码爱编程

一. 路由初始化 1. 路由文件介绍         router / index.js import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' // createRouter 创建路由实例 // 1. history模式:

vue图书购物车案例_book购物车-爱代码爱编程

coderwhy老师课堂案例 1.图书购物车案例 2.代码实现:HTML,CSS <div id="app"> <div v-if="books.length"> <table id="app"> <thead> <tr> <t

vue项目引入百度统计的正确操作步骤,亲测有效!_vue项目如何添加百度统计-爱代码爱编程

1、平台获取统计代码 2、在head和body中分别添加以下代码 head: <script> var _hmt = _hmt || []; </script> body:

element ui时间控件el-爱代码爱编程

一、问题描述: 在项目中引用了elementui中的date-picker组件,选中的时间跟实际相差八小时,且格式不是自己想要的格式 <el-date-picker type="date" placeh

【vue2+element ui通用后台】echarts使用_element2 echarts-爱代码爱编程

文章目录 Echarts使用折线图柱状图饼状图 Echarts使用 折线图 Echarts官网 Echarts API 首先我们在项目中安装 npm i echarts@5.1.2,然后