vue基础学习
偏向vue3,平时小案例或是基础小知识点
outside-R
这个作者很懒,什么都没留下…
展开
-
vue3中ref和reactive的区别
参考资料ref先定义x,y为0,当使用函数时,再更新x和y的值reactive在pos中有两个key都为0,在函数中更新两个值pos.x = 2.x,y必须和对象在一起才能引用,如果像第三种const { x } = pos,先取出来,再进行更新,x还是旧的值,并且会丧失响应式案例...原创 2022-06-16 10:46:08 · 1223 阅读 · 0 评论 -
HTMLElement对象
任何HTML元素都继承于HTMLElement对象,一些元素直接实现这个接口,而另一些元素通过多层继承来实现它。原创 2022-06-07 14:30:17 · 377 阅读 · 0 评论 -
TS中的?/!/!!/as
解释!:1、用在变量前表示取反2、用在赋值的内容后时:表示类型推断排除null、undefined表示确定某个标识符是有值的,跳过ts在编译阶段对它的检测它的作用是当对象的属性不存在时,会短路,直接返回undefined,如果存在,那么才会继续执行。除了表示可选参数外,常用于防御性编程当使用A对象属性A.B时,如果无法确定A是否为空,则需要用A?.B,表示当A有值的时候才去访问B属性,没有值的时候就不去访问,如果不使用?则会报错但是?用法只能读操作而不能写操作,对一个可能为空的属性赋值是不会被编原创 2022-06-07 14:16:09 · 1749 阅读 · 0 评论 -
vue 选项卡【利用按钮操作】
在vue3中 element-plus有着自己的选项卡,之前也有案例,但是UI设计并不一致原创 2022-06-01 11:33:50 · 462 阅读 · 0 评论 -
vue3 + TS生成二维码且 下载
图示代码<el-popover placement="right" trigger="click" :teleported="false"> <template #reference> <el-link type="primary" @click="goCode">生成二维码</el-link> </template> <div v-if="codeShow" class="fcc fc"> <q原创 2022-05-26 15:26:00 · 1054 阅读 · 0 评论 -
vue3 图标未对齐 vertical-align: middle
图示vue中未设置高度及行高,小图标一直处于上浮状态代码 <div class="item"><div class="item_title">真实姓名</div> <div class="item_content"> {{ userInfoDate.real_name == '' ? '未实名' : userInfoDate.real_name }} <原创 2022-05-25 14:58:00 · 469 阅读 · 0 评论 -
vue 描述框[el-descriptions] 与之对应 div
图示描述框【宽度做不了很大调整(易串行)】 <el-descriptions :column="2" size="large" width="500" border v-for="(v, i) in userCompany" :key="i"> <el-descriptions-item label="企业名称" label-align="right" width="200px" clas原创 2022-05-24 09:22:57 · 2912 阅读 · 0 评论 -
vue3 描述信息页面
图示<div class="card_cont"> <el-descriptions :column="2" size="large" width="500"> <el-descriptions-item label="用户名">kooriookami</el-descriptions-item> <el-descriptions-item><el-link type="primary">修改</el-li原创 2022-05-18 14:10:21 · 396 阅读 · 0 评论 -
倒计时 时间【天数(会员过期倒计时)、秒数(等待手机验证码)】
会员倒计时 (函数写到了秒,可自行更改)<div>{{day}}</div>import {ref} from 'vue'const tt =ref()const day = ref()const showtime = function () { const nowtime = new Date(); //获取当前时间 const endtime = new Date('2022/8/8'); //定义结束时间 const gotime = endtime.ge原创 2022-05-18 11:44:50 · 738 阅读 · 0 评论 -
vue3 将文字或链接生成二维码 qrcode.vue
安装npm install --save qrcode.vue案例 vue3+ts利用Popover 气泡卡片 点击后弹窗,或是修改为鼠标触动弹框都可以还可以写css样式改变二维码与卡片样式【Popover 气泡卡片】<el-popover placement="right" trigger="click" :teleported="false"> <template #reference> <el-link type="primary" class=原创 2022-05-18 09:09:01 · 2006 阅读 · 0 评论 -
vue3 复制内容 vue-clipboard3
安装yarn/npm install --save vue-clipboard3点击复制,将会复制文本案例 vue3+ts <div class="txt">{{ code }}</div> <el-link type="primary" @click="copyCode(code)">复制</el-link><script setup lang="ts">import useClipboard from 'vue-clipboar原创 2022-05-12 10:53:02 · 1050 阅读 · 0 评论 -
关于el-select选择且关联
要求:有两个多选框,第一个:草稿、审核中、驳回、已通过第二个:离线、在线注:第二个多选框只能在第一个选择已通过时选择图示:代码://vue html<el-form ref="manageRef" :inline="true" label-position="right" :model="newsForm" class="demo-form-inline" label-width="120px" style="max-width: 1250px"&.原创 2022-04-29 11:04:54 · 730 阅读 · 0 评论 -
vue el-select初始值以及“全部”的选择
由于安装了eslint ,使得一些代码有着格式和规则问题优化之前:1.2.优化之后,以及解决了el-select选择“全部”代码: <el-select v-model="inputSearch" class="m-2" placeholder="Select" size="large"> <el-option label="全部" value="all_list" /> <el-option label="待处理" value="1"原创 2022-04-29 09:38:34 · 1569 阅读 · 0 评论 -
vue添加小图标
图示:html <div class="type-tips"> <el-drawer v-model="drawer2" :direction="direction"> <template #title> <div class="tips-nav"> <span>分类管理</span> </div> </t原创 2022-04-24 09:27:37 · 1292 阅读 · 0 评论 -
vue细节 点击事件
根据id所触发的点击事件 handClick(v)vue子组件<template> <el-popover placement="left" trigger="click" width="120px"> <ul class="my_popover_list"> <li @mouseover="handClick(v)" class="share_tips" v-for="(v,i) in imgArr" :key="v.ti原创 2022-04-15 09:08:10 · 509 阅读 · 0 评论 -
vue3 选项卡 -- element-plus -Tabs
参考示例:vue//1 写死<el-tabs type="border-card"> <el-tab-pane label="文章正文">User</el-tab-pane> <el-tab-pane :label="'收藏用户'+'('+navTxt[1].num+')'" >Config</el-tab-pane> <el-tab-pane :label="'分享用户'+'('+navTxt[1].num+'原创 2022-04-14 18:16:02 · 2895 阅读 · 1 评论 -
vue3:emit传参 【案例 - 修改昵称】
父子传参子组件Child.vue<template> <div> <button @click="childEmit">父组件传参</button> </div></template><script>export default { setup(props,{emit}){ function childEmit () { emit('my-emi原创 2022-03-09 11:03:06 · 2069 阅读 · 0 评论 -
ElementUi Carousel 走马灯,自定义el-carousel箭头左右切换【轮播图】
效果图代码1:可引入网址链接网址拼接字符串:a1.jpg【随便写到】<el-carousel trigger="click" height="320px"> <el-carousel-item v-for="item in 4" :key="item"> <img :src="`www.baidu.com/a${item}.jpg`" alt="" class="banner"> </el-caro原创 2022-03-09 09:54:43 · 3147 阅读 · 0 评论