- 博客(125)
- 资源 (21)
- 收藏
- 关注
RSS订阅原创 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
1239
原创 JS交换数组中位置
原数组：[1,2,3,4]交换位置: 2,4结果：splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。Array MDN
2022-06-16 09:37:50
1214
原创 面试题讲解（十三）--vue【nextTick】
vue的nextTick函数，当我们触发事件更新dom后，但是没法在vue中立即获取到dom的最新值，这时候就要用到nextTick函数，他可以帮助我们在下一次Dom更新后执行他的回调函数浏览器对于事件的处理是有自己的一套机制，同步代码进入执行栈，异步代码进入异步队列，异步任务分为宏任务和微任务宏任务与微任务宏任务是浏览器带来的函数，列如setTimeout、setInterval，这些任务都是宏任务微任务是语言带来的函数，比如promise的then函数当浏览器执行时，会先执行同步任务，然后执行异步任
2022-06-08 08:57:15
802
原创 面试题讲解（十二）--vue【cacheloader、vite & snowpack 原理】
问题：随着业务代码不断增加，项目深度不断延伸，我们的构建时长也会因此不断增加。渐渐的vue项目编译时间变长##优化方法一些性能开销较大的 loader 前面添加 cache-loader，将结果缓存在磁盘中减少编译时间参考掘金参考vite掘金参考snowpackvite 主要特点是基于浏览器 native 的 ES module (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 来开
2022-06-07 16:14:40
893
原创 TS中的?/!/!!/as
解释!：1、用在变量前表示取反2、用在赋值的内容后时:表示类型推断排除null、undefined表示确定某个标识符是有值的，跳过ts在编译阶段对它的检测它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行。除了表示可选参数外，常用于防御性编程当使用A对象属性A.B时，如果无法确定A是否为空，则需要用A?.B，表示当A有值的时候才去访问B属性，没有值的时候就不去访问，如果不使用?则会报错但是?用法只能读操作而不能写操作，对一个可能为空的属性赋值是不会被编
2022-06-07 14:16:09
1761
原创 面试题讲解（十一）--vue【vue单页面与data】
1.用户体验好，内容的改变不需要重新加载整个页面，对服务器压力较小。2.前后端分离，比如联合项目3.完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整1.不支持低版本浏览器2.首次加载页面的时候需要加载大量的静态资源，这个加载时间相对较长。3.不利于SEO（搜索引擎）优化，单页页面，数据在前端渲染，就意味着没有SEO4.页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管
2022-06-07 09:13:43
151
原创 面试题讲解（十四）-- window中方法及属性 以及获取路由参数的方法
Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的 Location，分别通过 Document.location和Window.location 访问。Location.href包含整个 URL 的一个DOMStringLocation.protocol (en-US)包含 URL 对应协议的一个DOMString，最后有一个":“。Location.host包含了域名的一个DOMString，
2022-06-02 11:28:30
399
原创 vue3 路由相关问题
URI通常有三部分组成：（1）访问资源的命名机制。（2）存放资源的主机名。（3）资源自身的名字。如：https://blog.csdn.net/weixin_45044349/article/details/125080339我们可以这样解释：（1）这是一个可以通过https 协议访问的资源，（2）位于主机 blog.csdn.net 上，（3）通过 “/weixin_45044349/article/details/125080339” 可以对资源进行唯一标识encodeURIComponent
2022-06-02 10:21:44
297
原创 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
1065
原创 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
480
原创 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
2920
原创 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
400
原创 倒计时 时间【天数（会员过期倒计时）、秒数（等待手机验证码）】
会员倒计时 (函数写到了秒，可自行更改)<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
740
原创 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
2009
原创 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
1065
原创 将JSON文件展现至html中
图示：js // 加载json数据 // 常见问题 $(document).ready(function() { $.getJSON("./static/json/yz_zsk.json", function(data) { $.each(data, function(i, info) { var tit = info['wt'] var answer = info['da'
2022-05-10 09:27:52
1408
原创 关于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
732
原创 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
1576
原创 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
1296
原创 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
513
原创 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
2909
1
原创 jQuery取得select选中的值
图示：点击提交时，需要做判断【则需要选中表单，判断是否填写内容】①select：$("#select1 option:selected").text(); //选择反馈类型$('#select option:selected').val(); //0②textarea:$('#feed_txt').val()③如何用jquery获取中输入的值？$(" #test ").val()$(" input[ name='test' ] ").val()$(" input[ typ
2022-04-08 09:52:32
12287
原创 将时间戳转换为时间
图示：js编写函数：// 转换时间 function getMyDate(str) { var oDate = new Date(str), oYear = oDate.getFullYear(), oMonth = oDate.getMonth() + 1, oDay = oDate.getDate(), oTime = oYear + '年' + getzf(oMonth) +
2022-04-07 09:25:28
1499
原创 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
2080
原创 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
3167
原创 html+css 【居中样式】
1、定位 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);2、弹性盒子 /* css3弹性居中：不知道值，直接用属性 */ display: flex; /* 水平 */ justify-content: center; /* 垂直 */ align-items: center;3、margin：只是在水平方向居中margi
2022-03-08 10:11:12
192
原创 django ----＞A server error occurred. Please contact the administrator.
在pycharm控制台中查看在open()中填写encoding='utf8'最后保存后，在运行python manage.py runserver
2022-02-22 00:25:50
641
原创 document.createElement 出现的报错---Uncaught TypeError: Illegal invocation
报错代码var createEle = document.createElement;function render() { // 创建导航并且插入 var nav = createEle('a')}render()知识点call、aplay在函数执行的时候，改变this;bind是返回一个新的函数参考文章相同点：call、apply和bind都是JS函数的公有的内部方法，他们都是重置函数的this，改变函数的执行环节。不同点：bind是创建一个新的函数，而cal.
2022-02-09 16:22:47
1482
原创 腾讯视频首页导航栏【鼠标移动切换导航（静态数据）】
示意图提示该案例只是改变了导航，不涉及改变背景图片【后期会有—>动态数据及背景图改变（利用js）】代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
2022-02-09 15:44:55
1939
原创 css实现选项卡切换（margin-top）
示意图思考对于选项卡有多种方式，以下代码利用js实现鼠标点击效果【导航栏、内容区域】改变margin-top的值来进行切换代码html+js<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
2022-02-09 10:43:11
1374
原创 对于HTML5 position: sticky；
在html上我制作table ，且与Excel 相似，并固定头部，头部有边框，但position: sticky;会忽略边框使用代码： .table { height: 758px; /*父级必须有*/ overflow: hidden; overflow-y: auto; padding-right: 7px; } .table thead tr>th { /* 固定头部*/ position
2022-01-18 14:24:19
666
原创 在react中利用redux编写案例---【求和】
案例图：纯react方法redux文件store.js// 暴露store对象，整个应用只有一个store对象// 引入createStore，专门用于创建redux中最为核心的store对象import {createStore} from "redux"import countReducer from "./count_reducer"// 暴露storeexport default createStore(countReducer)count_reducer.js// 编写
2021-12-31 14:21:47
559
原创 利用react基础编写案例---【求和】
案例图：代码：index.jsimport React from "react";import ReactDOM from "react-dom"import App from "./App";ReactDOM.render(<App/>,document.getElementById("root"))App.jsimport React, { Component } from 'react'import Count from './components/Count'
2021-12-31 11:13:08
764
原创 浅谈React的类型检测-PropTypes
参考React的类型检查对于React来说，用户需要传入一些数据，这些数据包括电话号码、邮箱等数据，所以我们了解到React有哪些类型来进行限制①先下载限制限制条件库 prop-typesnpm i prep-typesyarn add prop-types②引库import PropTypes from 'prop-types'③代码声明props为指定的js基本类型，可传可不传//对接收的props进行：类型、必要性的限制 static propTypes = { addT
2021-12-27 14:31:43
675
原创 VS Code中 npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
问题解决方案1.首先我们看看自己的有没有安装cnpm(查看命令： npm list --depath=0 -g)2.如果没有我们就安装cnpm(查看命令：npm i cnpm -g)3.如果安装成功还是报错请看自己的安装路径 （查看命令：npm config get prefix）4.我们再打开我的电脑(右键)->属性->高级系统->再找到高级这一列->打开环境配置->找到path->添加自己的npm安装路径 就是(npm config get prefix)
2021-12-23 11:16:32
4786
Tableau奥运会数据集可视化分析.twb
2021-05-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人