全家computed属性vue3

a标签onclick事件传值(传递属性值),js接值读取

1、layui模板书写的a标签 <a href="#" onclick="downloadf(this)" type="{{d}}" bakname={{d.bakname}} bakurl={{d.bakurl}}> <i class="us-icon">&#xe710;</i>下载 </a> 2 ......
属性 onclick 事件 标签

Vue3+TS+Node打造个人博客(后端架构)

在使用 Express 搭建后端服务时,主要关注的几个点是: 路由中间件和控制器 SQL处理 响应返回体数据结构 错误码 Web安全 环境变量/配置 路由和控制器 路由基本上是按模块或功能去划分的。 首先是按模块去划分一级路由,各个模块的子功能相当于是用二级路由处理。 简单举个例子,/article ......
架构 个人 博客 Vue3 Node

vue全家桶进阶之路45:Vue3 Element Plus el_button组件

在 Vue 3 中,Element Plus 的 ElButton 组件提供了多种按钮类型和属性,可以用于实现不同的交互效果。下面是 ElButton 常用的作用和属性: 作用: 用于在页面上添加交互按钮,比如提交按钮、取消按钮等。 常用属性: type:按钮类型,可以取值为 primary、suc ......
全家 组件 el_button Element button

量子计算Quantum Computing

1.了解量子计算原理 由于电子特性,现代经典CPU已经做到小的极限,无法再继续压缩CPU的体积了。 传统的计算机由一系列的总线,缓存和处理器组成来储存,处理和计算数据。每个处理单元或处理器的核心处理数据,都尽可能快地从一个计算循环到下一个计算,同时仍然遵循顺序格式。 增加处理器的数量,更快的总线可以 ......
量子 Computing Quantum

vue全家桶进阶之路44:Vue3 Element Plus el_row和el_col组件

在 Vue 3 中,Element Plus 也提供了 ElRow 和 ElCol 组件,用于实现栅格布局。 ElRow 组件的常用属性: gutter:栅格间距,默认为 0。 type:布局模式,可选值为 flex、justify 和 align。默认值为 flex。 tag:组件标签,默认为 d ......
全家 组件 Element el_row el_col

vue全家桶进阶之路43:Vue3 Element Plus el-form表单组件

在 Element Plus 中,el-form 是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。 使用 el-form 组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有以下特性: 支持 ......
表单 全家 组件 Element el-form

11-CSS3属性详解(一)

title: 11-CSS3属性详解(一) publish: true 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性。 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 文本 text-shadow:设置文 ......
属性 CSS3 CSS 11

12-CSS3属性详解:动画详解

title: 12-CSS3属性详解:动画详解 publish: true 前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是过渡。过渡是CSS3中具 ......
属性 动画 CSS3 CSS 12

14-CSS3属性详解:Web字体

title: 14-CSS3属性详解:Web字体 publish: true 前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体。从此,把特殊字体处理成图片的方式便成为了过去。 支持程度比较好,甚至 IE 低版本的浏览器也能支持。 字体 ......
属性 字体 CSS3 CSS Web

13-CSS3属性:Flex布局图文详解

title: 13-CSS3属性:Flex布局图文详解 publish: true 前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强。其强大的伸缩性和自适应性,在网页开中可以发挥极大的作用。 flex 初体验 我们先来看看下面 ......
布局 属性 图文 CSS3 Flex

vue全家桶进阶之路42:Vue3 SCSS、SASS、CSS

SCSS和SASS都是CSS预处理器,它们的主要目的是简化CSS的编写,增加可维护性,并提供更丰富的功能。下面是它们与普通的CSS的区别: 语法:SCSS和SASS都具有比普通CSS更丰富的语法。其中,SASS使用缩进来表示嵌套,而SCSS则使用类似于CSS的花括号语法。因此,SCSS更易于CSS开 ......
全家 Vue3 SCSS SASS vue

08-CSS属性:定位属性

title: 08-CSS属性:定位属性 publish: true CSS的定位属性有三种,分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; ......
属性 CSS 08

02背景属性

title: 02-CSS属性:背景属性 publish: true background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(image ......
属性 背景

01-CSS属性:字体属性和文本属性

title: 01-CSS属性:字体属性和文本属性 publish: true 本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。 CSS中的 ......
属性 文本 字体 CSS 01

vue3微信公众号商城项目实战系列(12)项目发布到服务器上

本篇介绍如何将vue3项目打包发布到服务器上,然后在微信公众号上打开。 vue3发布之前需要对项目进行编译,编译时会在项目根目录下创建 dist 文件夹,编译后的文件会存放在这里。 在编译之前,我们在public目录下建一个 config.js 的文件,里面放如下的代码: const config ......
项目发布 项目 实战 公众 服务器

Vue3 readonly与shallowReadonly

视频 2.readonly 与 shallowReadonly readonly: 让一个响应式数据变为只读的(深只读)。 shallowReadonly:让一个响应式数据变为只读的(浅只读)。 应用场景: 不希望数据被修改时。 #components ##Demo.vue <template> < ......
shallowReadonly readonly Vue3 Vue

Vue3 shallowReactive与shallowRef

视频 三、其它 Composition API 1.shallowReactive 与 shallowRef shallowReactive:只处理对象最外层属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据, ......
shallowReactive shallowRef Vue3 Vue

css常用属性

CSS 常用属性和高级属性的详细参数说明如下: 常用属性 字体属性 font-family: 字体系列 font-size: 字体大小 font-weight: 字体粗细 font-style: 字体样式 line-height: 行高 文本属性 color: 字体颜色 text-align: 文本 ......
属性 常用 css

Vue3实现剪贴板功能

1.新增依赖 "vue-clipboard2": "^0.3.3" 2.main.js导入和使用依赖 import VueClipBoard from "vue-clipboard2"; createApp(App) .use(VueClipBoard) .mount("#app"); 3.导入sy ......
剪贴板 功能 Vue3 Vue

Vue3 toRef与toRefs

视频 直接用ref是创建新的对象 10.toRef 作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。 语法:const name = toRef(person,'name') 应用: 要将响应式对象中的某个属性单独提供给外部使用时。 扩展:toRefs 与toRef功能一致, ......
toRefs toRef Vue3 Vue

Vue3 自定义hook

视频 9.自定义hook函数 什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 #components ##Demo.vue <templ ......
Vue3 hook Vue

vue2升vue3后部分异常解决

element-ui 升为 element-plus 首先建议参考element-plus官方站点: https://element-plus.org/zh-CN/ 部分组件标签直接变更 如 el-submenu 变更为 el-sub-menu 浏览器提示 ElementPlusError: [El ......
后部 vue vue2 vue3

js全局属性和函数

1、js全局属性 Infinity:代表正无穷大的数值 NaN:指示某个值不是数字 undefined:指示未定义的值 2、eval函数 eval("x=10;y=20;document.write(x*y)") 如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语 ......
全局 函数 属性

vue3微信公众号商城项目实战系列(11)"我的"页面

我的页面效果如下: Mine.vue 页面代码如下: 布局块代码: 1 <template> 2 <div class="mine"> 3 4 <div class="mine-top"> 5 <img src="/mine.png" /><br /> 6 <span class="mine-top ......
quot 实战 公众 页面 商城

关于vue3如何封装命令式modal(免写组件标签)

由于之前搜索其他modal框封装的文章时,发现大多数在使用时需要引入并注册组件,传入参数再写方法。每次引用时都要经过上述操作,觉得太麻烦了。后面通过一些资料摸索出vue3如何利用命令方式(即避免写组件标签)来弹出弹框,写下这篇文章,方便日后自己复习 调用及效果 先上使用方法及效果 代码 <templ ......
命令式 组件 命令 标签 modal

Vue3 Vue3生命周期

视频 8.生命周期 vue2.x的生命周期 vue3.0的生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition A ......
Vue3 Vue 周期 生命

vue3写法

main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') router/inde ......
写法 vue3 vue

Vue3 watchEffect函数

视频 3.watchEffect函数 watch的套路是:既要指明监视的属性,也要指明监视的回调。 watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。 watchEffect有点像computed: 但computed注重的计算出来的值(回调函数的返回 ......
watchEffect 函数 Vue3 Vue

Vue3 watch时value的问题

视频 #components ##Demo.vue <template> <h2>当前求和为:{{sum}}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为:{{msg}}</h2> <button @click="msg+='!' ......
问题 watch value Vue3 Vue

vue3学习之tabler组件Layout布局

上一篇使用的bootstrap-vue-next项目迭代很快,考虑还未发文档和正式版本(自己菜)改用原生bootstrap模板tabler项目。 tabler 安装运行 不想安装可直接打开tabler\demo目录下html文件浏览查看效果 #获取后目录下运行 npm install #需要先安装h ......
组件 布局 tabler Layout vue3