JavaScript 《公司开发功能》 99+ 大合集
2024-05-16 18:07:25
前期回顾
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇_0.活在风浪里的博客-CSDN博客mock模拟数据、折线图、柱状图、饼图，一遍就懂！！~https://blog.csdn.net/m0_57904695/article/details/124861409?spm=1001.2014.3001.5501
目录
一：创建对象
1、通过内置的构造函数创建对象
2、通过字面量创建对象
3、通过构造函数
二 ：获取后台接口的前五条数据
三： JavaScript 语法之递归
递归事例1
递归事例2
2.1、for循环 求 1-100的和
2.2、 递归 求1-100的和
四：谷歌浏览器滚动条样式
五：element-ui 表格无缝滚动+鼠标悬停
六：下载文件流形式+封装api
七：事件修饰符，组织冒泡
八：js 定时器
九：el-switch 开关
十 ： vue动画
十一 ：上传
十二 ：取消axiso请求
vue3.0
vue2.0
十三：安装node-sass与sass-loader最好指定其版本,版本之间不对应可能会产生安装错误
十四：Vue3 reactive响应式赋值页面不渲染问题 data数据更新，页面没有渲染
解决方法：
十五：动态v-model绑定变量
错误绑定变量形式
变量正确写法
十五：?? 解释
十六：vue项目引入字体类型
十七：assets和static和public的区别
十八：vue3上传组件离开页面取消axios请求
十九：element-plus下拉菜单el-dropdown如何更改样式
二十：拖拽 自定义指令
vue3拖拽
vue3 聚焦 整数/小数点限制
vue2 pc + 移动拖拽
原生js拖拽
transform实现拖拽功能 （提高性能）
二十一：element-plus 面包屑
二十二：vue3国际化多语言 （vue 实现中英文切换功能）
二十四：官网文章上一篇下一篇
二十五：vue3的torefs
二十六 ：判断是否是首次进入页面
二十七 ：获取1-当前月份的数据
二十八：Vue 页面导出pdf 加水印
实现方法：
完整代码
生成base64
二十九：原生js 滚动楼层
三十 ：获取伪元素 修改伪元素
修改伪元素 源码：
三十二：&& 操作符
三十三 ：Vue3子组件和父组件都用setup，父组件用ref 获取子组件实例 需要使用defineExpose导出
三十四：Number()和parseInt有什么区别
三十五：网站变灰色
三十五：网站变暗主题(反转)
三十六：高斯模糊
三十七：append和appendChild的三个不同点
三十八：defer和async是什么？？区别是什么？？
defer
async
三十九：关于＜Script＞标签在html页面放置位置
四十：vue3中h函数的常见使用方式
render
四十一：Js基础 类型判断
四十二：纯前端预览PDF
四十三：纯前端预览PDF、DOC、DOCX、图片、视频
四十四：纯前端 JS脚本 导出excel 可动态添加数据
四十五：动态红包雨
四十六：Vue3 刮刮乐
四十七: 表格动态编辑Vue2、Vue3
四十八：脱敏 正则
一：创建对象
1、通过内置的构造函数创建对象
<script>const obj = new Object();obj.name = '张三';obj.age = 18;obj.fn = function() {console.log('我是一个方法');}console.log(obj);
</script>
2、通过字面量创建对象
<script>let obj = {name: '我只会心疼哥哥',age: 0,}console.log(obj)
</script>
3、通过构造函数
构造函数必须new实例化对象，才能传参
<script>function Person(name, age) { // 构造函数 this.age = age;this.name = name;this.run = function() {console.log('我叫' + this.name + '今年' + this.age + '我跑步可快了');}}// prototype 原型Person.prototype.say = function() { // 把say 方法 挂载到Person 原型对象console.log('我叫' + this.name + '今年' + this.age); //引引加加 加加里面是变量}Person.prototype.eat = function() {console.log(this.name + '吃了一顿饭');}var obj = new Person('你不会怪我吧', '28'); // 实例化对象 // new 创建对象 传参 console.log(obj);obj.say();obj.eat();obj.run(); //实例过后才可以调方法和属性
</script>二 ：获取后台接口的前五条数据
axios.get("/api/home/xiaoguotu").then((res) => {console.log(res.data) // 将接口的前5条取出来for (let v = 0; v < 5; v++) { //0 1 2 3 4 5this.list.push(res.data[v]);}console.log(this.list);});三： JavaScript 语法之递归
递归的概念 :
注意： 函数内部调用自己， 必须要有一个退出条件，条件写在开始位置，不要写在结束位置，否则会无限循环 函数的调用，可以放在循环里面， 也可以放在函数里面
为何报错？
如果你在递归中，递归的变量越来越不接近递归结束条件，那么就会报出 StackOverflowError 这个错误，归根到底就是JVM中栈的空间已经不够容纳递归所需的空间， 所以报错。
如果你递归的数量十分庞大， 那么也会报出 StackOverflowError。
递归事例1
<script>let day = 0;fn()function fn() {day++;console.log('你这个老六真的够了，第' + day + '天,还不放假');if (day < 2) {fn()}}
</script>打个断点 day===2直接退出函数
递归事例2
2.1、for循环 求 1-100的和
var sum = 0;for (var i = 1; i <= 100; i++) {sum += i; // 0+1 0+2 0+3 ... //相当于sum = sum + i}console.log(sum);2.2、 递归 求1-100的和
猛一看有可能没看懂是不是？往下看一分钟，还看不懂你把我打一顿
先求得1到2的和
console.log(sum(2)); //现在n===2function sum(n) {return n + n//2+2=4 因为求1到2的和现在n是2要到1才行，所以-1变成 1+2=3，对吧，那么代码就得改成}-----------------------------------------------------------------------------------console.log(sum(3)); function sum(n) {return (n-1) + n // 如果求1-3的和还的让这个函数调用2次才行（3-1 2-1），需要让它自调用，代码得改}
-----------------------------------------------------------------------------------console.log(sum(3));function sum(n) {return sum(n - 1) + n; //递归调用 }这样咋爆栈了？【娇羞】
第一：减到一不需要继续减了，求的就是1到几，
第二： 看最上面说的递归需要退出条件，并在开始位置写，好的，在写
<script>console.log(sum(100))function sum(n) {//递归结束条件if (n === 1) {return 1;}//递归逻辑return sum(n - 1) + n;}
</script>四：谷歌浏览器滚动条样式
想要兼容其他浏览器只需要加不同的前缀
Chrome(谷歌浏览器) ：WebKit内核 -webkit-Safari(苹果浏览器) ：WebKit内核 -webkit-Firefox(火狐浏览器) ：Gecko内核 -moz-IE(IE浏览器) ： Trident内核 -ms-Opera(欧朋浏览器) ：Presto内核 -o-
/* // 滚动条整体 */::-webkit-scrollbar {z-index: 50;width: 10px;height: 3px;border: none;outline: none;}/* // 滚动条滑道 */::-webkit-scrollbar-track {background-color: rgba(206, 14, 14, 0);}/* // 滚动滑块样式 */::-webkit-scrollbar-thumb {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #209ff1;transition: all 0.2s;height: 20px;/* border: 1px solid rgba(0, 0, 0, 0.2); */}/* // 滚动条的样式，是可以跟 :hover 伪类叠加使用的// 滚动条鼠标悬浮时的样式 */:hover::-webkit-scrollbar-thumb {transition: all 0.2s;}::-webkit-scrollbar-thumb:hover {background-image: linear-gradient(to top, #f7f0ac, #acf7f0, #f0acf7);}/* // 滚动条上下的箭头按钮 */::-webkit-scrollbar-button {display: none;}::-webkit-scrollbar-corner {display: none;}
五：element-ui 表格无缝滚动+鼠标悬停
<template><el-table:data="tableData"style="width: 100%; height: 100%"@mouseenter.native="Stop()"@mouseleave.native="Up()"><!-- 在vue2中绑定原生的事件需要加native --><el-table-column stripe prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table>
</template><script>
export default {data() {return {timer: null,tableData: [{date: "2016-05-01",name: "王小虎-1",address: "上海市普陀区金沙江路 1 弄",},{date: "2016-05-02",name: "王小虎-2",address: "上海市普陀区金沙江路 2 弄",},{date: "2016-05-03",name: "王小虎-3",address: "上海市普陀区金沙江路 3 弄",},{date: "2016-05-04",name: "王小虎-4",address: "上海市普陀区金沙江路 4 弄",},],};},created() {this.timer = setInterval(this.scroll, 1000);},methods: {scroll() {setTimeout(() => {this.tableData.push(this.tableData[0]); // 将数组的第一个元素添加到数组的最后this.tableData.shift(); //删除数组的第一个元素,不删的话会将第一个一直放到最后第二个不会变成第一个}, 1000);},//鼠标移上去停止Stop() {clearInterval(this.timer);},Up() {this.timer = setInterval(this.scroll, 1000);},},
};
</script><style lang="scss" scoped>
// 去掉thead的边框并且加背景色
::v-deep .el-table__header thead tr > th {border: none;background-color: #eee;
}
// 去掉tbody的边框和背景色
::v-deep .el-table__body tbody tr > td {border: none;background-color: transparent;
}
::v-deep .el-table__body tbody tr:hover td {background-color: rebeccapurple;
}
::v-deep .el-table__body tbody tr > td :hover {color: red;
}
</style>
六：下载文件流形式+封装api
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button onclick="downFile('我是文件里面的内容……','txt')">下载按钮</button>
</body>
<script>function downFile(content, type){let link = document.createElement('a');link.download = '文件名.' + type;link.style.display = 'none';let blob = new Blob([content]);link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click();document.body.removeChild(link);}
</script></html>vue
<el-button size="mini" type="primary" @click="downLoad">点击下载</el-button>// 下载文件
const downLoad = () => {axios({url: `/ast/dataItemInformationType/downloadDataItemTemplateFile`,method: 'get',responseType: 'blob',headers: header,}).then((res) => {// 文件类型 pdf:application/pdf;chartset=UTF-8; excel:application/vnd.ms-excel word:'application/mswordconst blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });const fileName = '数据项-企业分类关系模板.xlsx';if ('download' in document.createElement('a')) {// 非IE下载const elink = document.createElement('a');elink.download = fileName;elink.style.display = 'none';elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href); // 释放URL 对象document.body.removeChild(elink);} else {// IE10+下载navigator.msSaveBlob(blob, fileName);}});
};七：事件修饰符，组织冒泡
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue -lib/js/vue.js"></script><style>.i {width: 500px;}</style>
</head><body><!-- 原生的==> // event.stopPropagation();阻止冒泡 点击事件源冒泡到父级元素上,父元素也要有点击事件 不然没效果// event.preventDefault();阻止默认事件 --><!--Vue里==> // 阻止冒泡 .stop <==> 默认事件.prevent //阻止冒泡和默认事件在-----点击事件后加.stop.prevent 例如:@click.stop.prevent --><div id="app"><!--1 如果只要事件对象不需要传参 不加小括号也可以 方法小括号里直接传形象 --><button @click="btn1($event)"> event事件对象传参</button><br><br><!--2 event要加$，必须加$event, 没有$会被解析成变量 --><!-- 传事件对象$event和实参666 --><button @click="btn2($event,666)"> 传参和 传事件对象</button><br><br><!--3 阻止默认事件 跳转 @click.prevent --><a href="https://www.baidu.com" @click.prevent="a">只弹窗不跳转百度 --组织默认事件跳转</a><br><br><!--4 组止冒泡 点击事件源冒泡到父级元素上 父元素也要有点击事件 不然没效果 @click.stop --><div @click="b"><button @click.stop="b">组止冒泡</button></div><br><!--5 阻止冒泡和默认事件在-----点击事件后加.stop.prevent @click.stop.prevent --><div @click="c"><a href="https://www.baidu.com" @click.stop.prevent="c">阻止冒泡和默认事件</a></div><br><!-- 打印编码console.log(event.keyCode); 打印按键名console.log(event.key); --><!-- 键盘事件 直接在事件后.xx编码或者按键名 --><input type="text" @keydown.enter="d" placeholder="按下回车获取输入的内容" ref="ipt1"><!-- 27 是esc的编码 --><input type="text" @keydown.27="d" placeholder="按下esc获取输入的内容"><!-- 当点击回车 或 esc 打印内容 )--><input type="text" @keydown.esc.enter="d" placeholder="当点击回车 或 esc 打印内容"><!-- f5 只能键盘按下才可以先弹框后刷新加上.stop.就可以阻止刷新 keyup不行 --><!-- // event.preventDefault();// 原生阻止默认事件 在@click后面加.prevent是vue的封装阻止默认事件 @click.prevent="a($event,6)" // event.stopPropagation();// 原生阻止冒泡 在@click后面加.stop是vue的封装阻止冒泡事件 @click.stop="a" --><!-- 阻止默认事件 f5 --><input type="text" @keydown.prevent.f5="e" placeholder="按下f5弹框"><!-- 不绑定点那个按键都会弹框 --><input type="text" @keydown="t" placeholder="没绑定键盘事件点击输入框就会f4弹框"></div>
</body>
<script>new Vue({el: "#app",data: {},methods: {btn1(event) {console.log('打印事件对象里的目标文本-----' + event.target.innerText);},btn2(event, number) {console.log('打印传的参数------' + number);console.log(event);},a(event) {//上面不写小括号这里直接写形参可以收到$event 如果要传参还要打印事件对象event,上面点击事件后就得写() 例如: @click="btn2($event,666) 这里也要俩个形参接受例如:a(event,number){}console.log(event);alert('百度')},b(event) {//直接写event也可以收到时间修饰符alert(0)// event.stopPropagation(); //原生组织冒泡 在@click后面加.stop是vue的封装阻止冒泡事件 @click.stop="b"console.log(event);},c(event) {// event.stopPropagation();阻止冒泡// event.preventDefault();阻止默认事件alert('c')console.log(event);},d(event) {// vue.config.keyCodes.f5=123456// if(event.keyCode !=13){// return false// }// if(event.keyCode !=13) return false; //原生简写console.log(event.target.value);// 打印键盘编码// console.log(event.keyCode);//打印按键名// console.log(event.key);},e(event) {alert('f5')},t() {alert(0)}},created() {this.$nextTick(() => {this.$refs.ipt1.focus();})},})
</script></html>八：js 定时器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用js实现图片定时弹出和定时消失</title>
</head><body><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0FR0104212%2F200FQ04212-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657110663&t=ab0ecb882bf2018a942aaa3f9e26d6d7"width="200px" height="200px" style="display:none" id="img1">
</body></html>
<script>//setTimeout 延迟多少秒---只弹一次的时候用//setInterval 间隔多少秒---循环的时候用var timer = null;timer = setTimeout("fn()", 1000); //一秒钟显示function fn() {var img1 = document.getElementById('img1');img1.style.display = "block";timer = setTimeout("fn1()", 1000); //一秒钟消失}function fn1() {var img1 = document.getElementById('img1');img1.style.display = "none";clearTimeout(timer);timer = setTimeout("fn()", 1000); //在开启就循环}
</script>九：el-switch 开关
<el-table-column prop="mg_state" label="状态"><template #default="scope"><el-switchv-model="scope.row.mg_state"@change="editSwitch(scope.row.id, scope.row.mg_state)"active-text="开"inactive-text="关"active-color="#13ce66"inactive-color="#ff4949"/></template></el-table-column>.el-switch__label--left {position: relative;left: 45px;color: #fff;z-index: -1111;}.el-switch__core {width: 50px !important;}.el-switch__label--right {position: relative;right: 46px;color: #fff;z-index: -1111;}.el-switch__label--right.is-active {z-index: 1111;color: #fff !important;}.el-switch__label--left.is-active {z-index: 1111;color: #9c9c9c !important;}十 ： vue动画
<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition name="ani"><h2 v-if="isShow">Hello World</h2></transition></div>
</template>
<script>
export default {name: "App",data() {return {isShow: true,};},methods: {},
};
</script><style >
.ani-enter-from,
.ani-leave-to {opacity: 0;
}
.ani-enter-to,
.ani-leave-from {opacity: 1;
}
.ani-enter-active,
.ani-leave-active {transition: opacity 2s ease;
}
</style>十一 ：上传
<template><el-card class="wrap"><p class="represent">入院治疗知情授权书文件检测工具，是为您进行其文件内容合规情况自查的工具，共包含11个检查项，覆盖患者权利与义务部分。其依据《中华人民共和国民法典》、《中华人民共和国个人信息保护法》、《中华人民共和国执业医师法》等法律法规和标准规范，结合行业数据安全保护相关要求与最佳实践，为您实现安全自查、自测、自改提供专业支持。</p><el-uploadv-model:file-list="fileList"class="upload-demo"action="/compliance/filecheck/fileAnalysis":before-remove="beforeRemove":on-remove="handleRemove":limit="1":on-exceed="handleExceed":headers="header":on-success="handleSuccess":on-error="handleError":before-upload="beforeUpload"accept=".docx, .doc, .pdf"ref="upload":data="{ type: 1 }"><div class="btn"><el-button type="primary" @click="addFile">选取文件</el-button><div style="color: orange">请上传.doc/.docx/pdf文件</div></div></el-upload><div class="processing-status-wrap"><div class="title">处理状态</div><ul class="processing-status"><li class="processing-status-list"><span><img src="/antithetichook.png" alt /></span>待上传文件</li><li class="processing-status-list"><span><img class="blankPicture" :src="blankPicture" alt /></span>正在上传文件</li><li class="processing-status-list"><span><img class="blankPicture" :src="blankPicture" alt /></span>正在解析文件</li><li class="processing-status-list"><span><img class="blankPicture" :src="blankPicture" alt /></span>正在匹配智能规则库</li><li class="processing-status-list"><span><img class="blankPicture" :src="blankPicture" alt /></span>正在智能监测</li><li class="processing-status-list"><span><img class="blankPicture" :src="blankPicture" alt /></span>正在生成检测报告</li><li class="processing-status-list"><span><img class="blankPicture" :src="blankPicture" alt /></span>检测完成</li></ul></div><div><div style="margin-top: 20px" v-if="flag">经平台智能合规文件检测引擎分析，该知情授权书文件的合规风险等级为:<div style="margin-top: 20px; margin-left: 150px"><el-button type="danger" size="mini" v-if="reportStatus == 4">高风险</el-button><el-button type="warning" size="mini" v-if="reportStatus == 3">较高风险</el-button><el-buttonstyle="background-color: #ffea00; color: white"plainsize="mini"v-if="reportStatus == 2">中风险</el-button><el-button type="primary" size="mini" v-if="reportStatus == 1">低风险</el-button><el-button type="success" size="mini" v-if="reportStatus == 0">无风险</el-button></div><br /><p>如查看合规检测报告，请<astyle="color: paleturquoise; cursor: pointer"@click="$router.push({path: '/uploadfile/authorizationCertificateFileCheckReport',query: { id: fileDetectionId },})">【点击此处】</a><!-- $router.query.id --></p></div></div></el-card>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { Session } from "/@/utils/storage";
let blankPicture = ref("public/blankPicture.png");
let fileList = ref<UploadUserFile[]>([]);
const header = reactive({ Authorization: `Bearer ${Session.get("token")}` });
let urlDom = reactive([]);
let timer = ref(null);
// 获取ref元素
let upload = ref(null);
// 检测结果是否显示let reportStatus = ref<number | null>(null);
let fileDetectionId = ref<number | null>(null);
let flag = ref(false);// 文件上传前的钩子函数
const beforeUpload = (file) => {if (file.type !=="application/vnd.openxmlformats-officedocument.wordprocessingml.document" &&file.type !== "application/msword" &&file.type !== "application/pdf") {ElMessage.error("上传文件只能是 docx/doc/pdf 格式");return false;}if (file.size === 0) {ElMessage.warning("上传文件不能是空!");return false;}if (file.size / 1024 / 1024 >= 50) {ElMessage({type: "warning",message: "上传文件大小不能超过50M",duration: 5 * 1000,});handleRemove();return false;}let i = -1;timer.value = setInterval(() => {i++;if (i > 5) {clearInterval(timer.value);} else {urlDom[i].src = "./antithetichook.png";}}, 2000);
};// 成功回调
const handleSuccess = (res) => {// console.log(res);if (res.code === 0) {ElMessage.success("上传成功");reportStatus.value = res.data.reportStatus;fileDetectionId.value = res.data.fileDetectionId;flag.value = true;} else {urlDom[0].src = "public/antithetichook.png";urlDom[1].src = "public/antithetichook.png";ElMessage.error(res.msg);clearInterval(timer.value);fileList.value = [];setTimeout(() => {handlerPublicResetBlankPicture();}, 1000);}
};// 超出个数回调
const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {ElMessage.warning(`限制为 ${files.length} 您选择了 ${files.length + uploadFiles.length} 个文件`);
};
// 移除文件之前回调
const beforeRemove: UploadProps["beforeRemove"] = (uploadFile) => {return ElMessageBox.confirm(`您确定移除 ${uploadFile.name} 吗?`).then(() => {flag.value = false;handlerPublicResetBlankPicture();clearInterval(timer.value);// 页面离开前关闭上传请求upload.value.abort();});
};
// 文件移除
const handleRemove = () => {clearInterval(timer.value);// 页面离开前关闭上传请求upload.value.abort();urlDom = [];handlerPublicResetBlankPicture();flag.value = false;
};
//公共重置文件列表 空白图片函数
const handlerPublicResetBlankPicture = () => {for (let i = 0; i < urlDom.length; i++) {urlDom[i].src = "public/blankPicture.png";}
};
// 上传文件按钮点击事件
const addFile = () => {urlDom = document.getElementsByClassName("blankPicture");handlerPublicResetBlankPicture();
};
onBeforeUnmount(() => {clearInterval(timer.value);// 页面离开前关闭上传请求upload.value.abort();
});
</script><style lang="scss" scoped>
.wrap {height: 100vh;display: flex;flex-direction: column;align-items: center;background-color: #fff;border-radius: 5px;padding-top: 40px;.represent {text-indent: 2em;width: 700px;padding-bottom: 30px;}.btn {display: flex;align-items: center;justify-content: center;width: 700px;}ul,li {list-style: none;.blankPicture {width: 15px;height: 15px;}}
}
.processing-status-wrap {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;.title {width: 100px;padding-top: 30px;font-size: 15px;font-weight: bolder;text-align: center;}.processing-status-list {padding: 10px 0;}
}
span {width: 30px;height: 30px;
}span img {width: 15px;height: 15px;margin-bottom: -3px;
}
</style>
十二 ：取消axiso请求
vue3.0
<template><div><el-button @click="requestAjax">发起ajax</el-button><el-button @click="cancelAjax">取消ajax</el-button></div>
</template>
<script setup>
import axios from "axios";
let cancel = null;
function requestAjax() {if (cancel !== null) {cancel("重复点击发送，取消上一次请求");}axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata", {cancelToken: new axios.CancelToken(function executor(c) {// executor 接收一个 cancel"(c)"函数作为参数cancel = c;}),});
}
function cancelAjax() {// cancel the requestcancel("你手动把请求取消了");
}
</script>
vue2.0
<template><div><el-button @click="requestAjax">发起ajax</el-button><el-button @click="cancelAjax">取消ajax</el-button></div>
</template><script>
import axios from "axios";
export default {data() {return {cancel: null,};},methods: {requestAjax() {if (this.cancel) {this.cancel("第二次点击取消了第一次请求");}const CancelToken = axios.CancelToken;axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata", {cancelToken: new CancelToken((c) => {this.cancel = c;}),}).then((res) => {console.log(res);}).catch((err) => {console.log(err);});},cancelAjax() {this.cancel();},},
};
</script>
十三：安装node-sass与sass-loader最好指定其版本,版本之间不对应可能会产生安装错误
血泪教训
node版本
安装 sass / loader
"sass-loader": "^10.2.0","node-sass": "^6.0.1", 操作步骤： 1、npm uninstall sass-loader 2、 cnpm install sass-loader@10.2.03、npm uninstall node-sass4、 cnpm install node-sass@6.0.15、再试一次 npm run serve十四：Vue3 reactive响应式赋值页面不渲染问题 data数据更新，页面没有渲染
问题描述：
//声明变量 -- 错误定义会导致异步请求不及时渲染视图
let data = reactive([])
http().then(res=>{data = res.dataconsole.log(data)//得到数据却没有更新视图
})
//data数据更新，页面没有渲染
解决方法：
- 1、依旧是
reactive，可以在外面包一层 --- 正确
//声明
let state = reactive({data:[]
})
//赋值
state.data= res.data
- 2、改为
ref赋值
//声明
let data = ref([])
//赋值
data.value = res.data
所以不建议reactive直接放数组或对象，给它一个属性值
十五：动态v-model绑定变量
- obj[xx] obj.xx 数组对象取值的两种方式，但是他们的区别及使用场景呢？往下看
- 需要循环items时，input v-model动态绑定 obj.name 和 obj.password
items:[{type="text", VM: "obj.name", placeholder: "请输入用户名",}, {type="password", VM: "obj.password", placeholder: "请输入密码",},],obj:{name:'zk',password: '123456',}//VM属性名对应的属性值 为需要动态引入obj对象的name属性错误绑定变量形式
<div ><inputv-for="(item,index) in items":key="index":type="item.type":placeholder="item.placeholder"v-model="item.VM"/>
</div>- v-model="item.VM"无法作为变量，只是获取到值
变量正确写法
items:[{type="text", VM: "name", placeholder: "请输入用户名",}, {type="password", VM: "password", placeholder: "请输入密码",},],obj:{name:'zk',password: '123456',}//VM属性名对应的属性值 为需要动态引入obj对象的name属性<div ><inputv-for="(ele,index) in items":key="index":type="ele.type":placeholder="ele.placeholder"v-model="obj[ele.VM]"/>
</div>
v-model="obj[item.VM]" 使用第二种取值方式，可以作为变量，如果你见到一些比较怪异的嵌套层级，建议使用这种方式，如果使用 obj.xxx , 很有可能出现未知异常，如果不是很清楚js对象，绝大多数排查挺久
原理比较简单，就是在JS中对象，获取属性值时使用的方法不同造成的结果，如果是使用对象.属性名的方式来获取的话，属性名是不能为变量的；但是使用对象[属性名]这种方式时，属性名就可以为变量。
十五：?? 解释
更多参考这里
考考你JS 基础牢补牢_0.活在风浪里的博客-CSDN博客
十六：vue项目引入字体类型
- 在assets目录下新建foots（名字语义化可自定义），将后缀为ttf的字体包放进去
- 然后新建一个css文件（我这里新建的是index.css）
- 在新建的index.css写 如下图
@font-face {font-family: "Bold";src: url("Alibaba-PuHuiTi-Bold.ttf") format("truetype");font-weight: normal;font-style: normal;
}多个字体，复制多份不用在新建文件 font-family是别名 src是路径
4.在main.ts引入
import "@/assets/foots/index.css";
5.在页面使用 font-family:字体别名;
在项目中引入icon字体图标参考我的这篇
vue怎么使用icon阿里字体图标_0.活在风浪里的博客-CSDN博客
十七：assets和static和public的区别
1、目录结构不同
2、assets中的资源会被webpack处理，打包后会在dist中合并成一个文件；static中的资源不会被webpack处理，打包后直接复制到dist（默认是dist/static）下
3、推荐assets中存放自己的资源（css、images、utils等），static中放第三方资源（pdf.js、iconfont等）
4、动态绑定中，assets的图片会加载失败，因为webpack使用commonJS规范，需要使用require引入图片（可以通过import的方式引入）
html
<img style="width:100px;" :src="assetsUrl">js
assetsUrl: '@/assets/images/002.jpg', // 无法显示图片正确方式
assetsUrl: require('@/assets/images/002.jpg'),图片在static下使用@不管用，因为static不会经过webpack，所以配置的@不能用
<img src="../../static/图片路径" >
图片在static下
是不能使用
require进行载入，报错(找不到资源模块)；
public
./表示当前目录
../表示父级目录
/表示根目录
图片在public下直接 / 就可以找到，如果你用相对路径../../类似这样找到public下的图片，本地是可以显示，但是打包后是没有public文件夹的，所以本地可以显示，打包后会找不到路径404，我们可以直接用 / 获取public的图片和文件，本地和打包后都会显示
十八：vue3上传组件离开页面取消axios请求
十九：element-plus下拉菜单el-dropdown如何更改样式
二十：拖拽 自定义指令
vue3拖拽
utils下新建文件夹，里面放拖拽文件和其他自定义指令文件
位置： drag.ts
const dialogDrag = (app) => {app.directive('drag', {// 渲染完毕mounted(el) {// 可视窗口的宽度const clientWidth = document.documentElement.clientWidth;// 可视窗口的高度const clientHeight = document.documentElement.clientHeight;// 记录坐标let domset = {x: clientWidth / 10, // 默认width 50%y: (clientHeight * 5) / 100, // 根据 15vh 计算};// 弹窗的容器const domDrag = el.firstElementChild.firstElementChild;// 重新设置上、左距离domDrag.style.marginTop = domset.y + 'px';domDrag.style.marginLeft = domset.x + 'px';// 记录拖拽开始的光标坐标，0 表示没有拖拽let start = { x: 0, y: 0 };// 移动中记录偏移量let move = { x: 0, y: 0 };// 鼠标按下，开始拖拽document.onmousedown = (e) => {// 判断对话框是否重新打开if (domDrag.style.marginTop === '50vh') {// 重新打开，设置 domset.y topdomset.y = (clientHeight * 5) / 100;}start.x = e.clientX;start.y = e.clientY;domDrag.style.cursor = 'move'; // 改变光标形状};// 鼠标移动，实时跟踪document.onmousemove = (e) => {if (start.x === 0) {// 不是拖拽状态return;}move.x = e.clientX - start.x;move.y = e.clientY - start.y;// 初始位置 + 拖拽距离domDrag.style.marginLeft = domset.x + move.x + 'px';domDrag.style.marginTop = domset.y + move.y + 'px';};// 鼠标抬起，结束拖拽document.onmouseup = (e) => {move.x = e.clientX - start.x;move.y = e.clientY - start.y;// 记录新坐标，作为下次拖拽的初始位置domset.x += move.x;domset.y += move.y;domDrag.style.cursor = ''; // 恢复光标形状domDrag.style.marginLeft = domset.x + 'px';domDrag.style.marginTop = domset.y + 'px';// 结束拖拽start.x = 0;};},});
};
export default dialogDrag;
位置：main.ts
import myDrag from './utils/directive/drag.ts';.use(myDrag)
在.vue文件中使用：
!!! 注意 vue3自定义拖拽 在el-dialog标签外包裹一个div标签后，使用v-dialogdrag即可调用该自定义插件， 不要直接在el-dialog上调用，否则将无法生效 ，会提示不能在多个根节点使用，el-dialog正是多个根节点
<div v-drag><el-dialog v-model="dialogVisible" title="修改" width="30%"><div><el-icon size="8" color="red"><StarFilled /></el-icon><div class="popover-title">Risk Score</div><!-- v-focus 自动聚焦。对于非文本框聚焦使用 v-focus:1 实现自动聚焦 自动选中 v-number整数/小数点限制 --><el-inputv-model="inputValue"placeholder="Please input"clearablev-focusv-number/></div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">确定</el-button></span></template></el-dialog></div>vue3 聚焦 整数/小数点限制
位置：myFocus.ts
import { App, nextTick } from 'vue'
// 根据el获取input
const getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input')
export default {install (app: App) {// v-focus 自动聚焦。对于非文本框聚焦使用 v-focus:1 实现自动聚焦 自动选中 v-number 整数/小数点限制app.directive('focus', {updated: async (el: HTMLElement, { arg }) => {// 为了防止数据未即使更新。await nextTick()// 对于非文本框聚焦（使用了 contenteditable ）的直接聚焦即可if (arg) el.focus?.()else getInput(el)?.focus()}})// v-select 自动选中。对于非文本框请使用 v-select:1app.directive('select', {mounted: async (el: HTMLElement, { arg }) => {// 为了防止数据未即使更新。await nextTick()if (arg) el// elementplus的文本框。是嵌套了一个文本框。。getInput(el)?.select()}})let inputHandler = () => {}// 限制input框，仅能输入数字。默认限制输入整数，可以通过传参设置小数位数// v-number 限制整数，v-number:2 限制两位小数，v-number:2=3 限制两位小数，整数位三位，v-number=2 限制两位整数\app.directive('number', {mounted (el: HTMLElement, { arg, value }) {const input: HTMLInputElement = <HTMLInputElement>getInput(el)if (input) {// 小数正则const decimal: string = arg ? `(\\.\\d{0,${arg}})?` : ''// 整数正则const integer: string = value ? `(0|[1-9]\\d{0, ${value - 1}})` : '\\d*'const regExp: RegExp = new RegExp((integer + decimal), 'g')inputHandler = () => {// 替换所有的非数字项// 如果输入的数字不符合正则表达式，则替换为''input.value = input.value.toString().trim().replace(/[^\d.]/g, '')?.match?.(regExp)?.[0] ?? ''}// 在文本框输入的时候触发input.addEventListener('input', inputHandler, true)}},unmounted (el: HTMLElement) {// 解除绑定的时候去除事件const input: HTMLInputElement = <HTMLInputElement>getInput(el)input.removeEventListener('input', inputHandler, true)}})}
}位置;main.ts
import myFocus from './utils/directive/myfocus.ts';.use(myFocus)
页面使用：
<!-- v-focus 自动聚焦。对于非文本框聚焦使用 v-focus:1 实现自动聚焦 自动选中v-number 整数/小数点限制 --><el-inputv-model="inputValue"placeholder="Please input"clearablev-focusv-number/>vue2 pc + 移动拖拽
新建drag.js文件这是pc端的拖拽方案
import Vue from 'vue'Vue.directive('drag',{bind:function (el) {//监听document是因为如果监听元素el的话鼠标太快移出元素后就会失效el.onmousedown = (event) => {//算出鼠标相对元素的位置let pointX = event.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）let pointY = event.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）document.onmousemove = (e)=>{//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - pointX;let top = e.clientY - pointY;//移动当前元素el.style.left = left + 'px';el.style.top = top + 'px';};document.onmouseup = (e) => {document.onmousemove = null;document.onmouseup = null;};};}
})新建dragMove.js文件这是移动端的拖拽方案
import Vue from 'vue'
Vue.directive('dragMove',{bind: function (el, binding) {var touch,disX,disYel.ontouchstart = (e) => {if(e.touches){//有可能对象在e上也有可能对象在e.touches[0]上touch = e.touches[0];}else {touch = e;}disX = touch.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）disY = touch.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）}el.ontouchmove = (e)=>{if(e.touches){//有可能对象在e上也有可能对象在e.touches[0]上touch = e.touches[0];}else {touch = e;}//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = touch.clientX - disX;let top = touch.clientY - disY;//移动当前元素el.style.left = left + 'px';el.style.top = top + 'px';e.preventDefault();//阻止页面的滑动默认事件};el.ontouchend = (e) => {// el.ontouchmove = null;// el.ontouchend = null;};}
})在页面引用：
<script>import drag from '../assets/drag'import dragMove from '../assets/dragMove' </script>可以在页面引入使用也可以在main.ts全局注册使用
在页面使用：
<div v-dragMove v-drag>我是拖拽，你如果是pc端，就不必引入移动端的</div>
原生js拖拽
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;}.wrap-father {position: relative;width: 100%;height: 100%;}.drag-child {position: absolute;width: 300px;height: 300px;background-color: pink;}</style><body><div class="wrap-father"><div class="drag-child"></div></div></body><script>/***思路 :* 0 白话解释:其实就是用js不断给元素设置left和top值,让元素跟着鼠标移动，既然设置left top 肯定要开启绝对定位 父元素也要开启相对定位* 1 当鼠标按下的时候 记录鼠标在盒子的位置 [重要] 鼠标的位置 - 盒子offset* 2 当鼠标移动的时候 用当前鼠标的位置 - 鼠标在盒子的位置（1） = 移动后盒子offset* 3 当盒子位置小于0的时候 不让盒子移动 赋值位置为0 （控制左边盒子不让溢出）* 4 当盒子位置大于浏览器的宽度 - 盒子的宽度的时候 不让盒子移动 赋值位置为浏览器的宽度 - 盒子的宽度 （控制右边盒子不让溢出）* 5 鼠标抬起的时候 清除鼠标在盒子的位*/window.onload = function () {// console.log(window);let drag = document.querySelector(".drag-child");drag.onmousedown = function (event) {let ev = event || window.event;// 得到鼠标在盒子的位置let diffX = ev.clientX - drag.offsetLeft;let diffY = ev.clientY - drag.offsetTop;document.onmousemove = function (event) {drag.style.cursor = "move";let ev = event || window.event;// 得到鼠标移动后盒子的offsetlet offsetLastMoveX = ev.clientX - diffX;let offsetLastMoveY = ev.clientY - diffY;// 左右不能溢出if (offsetLastMoveX < 0) {offsetLastMoveX = 0;} else if (offsetLastMoveX >= window.innerWidth - drag.offsetWidth) {offsetLastMoveX = window.innerWidth - drag.offsetWidth;}// 上下不能溢出if (offsetLastMoveY < 0) {offsetLastMoveY = 0;} else if (offsetLastMoveY >=window.innerHeight - drag.offsetHeight) {offsetLastMoveY = window.innerHeight - drag.offsetHeight;}// 判断好设置盒子的位置drag.style.left = offsetLastMoveX + "px";drag.style.top = offsetLastMoveY + "px";};document.onmouseup = function () {// 鼠标抬起的时候 清除事件document.onmousemove = null;document.onmousedown = null;drag.style.cursor = "default";};};};</script> </html>
transform实现拖拽功能 （提高性能）
- 上面的原生js拖拽其实是通过定位不断的赋值left和top，缺点是会造成频繁的回流和重绘
在 PC 端上，我们使用绝对定位来做移动是完全没问题的，也可以使用 translate.
因为 PC 上使用绝对定位使用 CPU，触发重排和重绘，浏览器依然可以以每秒60帧来运行，我们肉眼看不出来。
但是放到移动端上，触发浏览器重拍和重绘，造成页面的卡顿。
使用 translate 不会触发重排或重绘，但会触发合成。会使得元素创建一个 GPU 层（图层），这样子，位移也只是在你自己的图层上，不会影响整个页面布局。translate 效率更高，绘制时间端，更加流畅。
- 重绘：
DOM树没有元素增加或删除，只是样式的改变，DOM树没有改变，浏览器对某一元素进行单独的渲染，这个过程就叫做重绘
回流：
DOM树中的元素被增加或者删除，导致浏览器需要重新的去渲染整个DOM树，回流比重绘更消耗性能，发生回流必定重绘，重绘不一定会导致回流。 - 如何避免(减少)回流
css
（1）使用visibility替换display:none（前者只会引起重绘，后者则会引发回流）
（2）避免使用table布局，因为可能一个小小的改动会造成整个页面布局的重新改动
（3）将动画效果应用到position 属性为absolute或fixed的元素上，避免影响其他元素的布局
【脱离文档流之后，对其它的元素影响小，从而提升性能】
（4）避免使用CSS的JavaScript表达式，可能会引发回流（例如：calc()）。
JavaScript
（1）避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性。
（2）避免频繁操作DOM，创建一个documentFragment（文档片段），在它上面应用所有 DOM操作，最后再把它添加到文档中。例如如下
（3）可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>transform实现拖拽功能</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}html,body {height: 100%;}.app {height: 100%;display: grid;place-items: center;}.drop-box {width: 100px;height: 100px;background-color: orange;border-radius: 10px;box-shadow: 0 0 8px 0 #353535;cursor: move;}</style></head><body><div class="app"><div class="drop-box"></div></div><script>// 使用transform实现拖拽功能比使用定位的方式要性能更好，因为transform只会触发合成层的重绘，而定位会触发重排（回流）和重绘// 什么是合成层？合成层是一个独立的图层，它不会影响到其他图层，也不会被其他图层影响，它的渲染不会阻塞主线程，所以性能更好const box = document.querySelector(".drop-box");let isDown = false;let mX = 0;let mY = 0;let currentX = 0;let currentY = 0;box.addEventListener("mousedown", (e) => {isDown = true;mX = e.pageX;mY = e.pageY;document.addEventListener("mousemove", move);document.addEventListener("mouseup", up);});const move = (e) => {if (!isDown) return;let x = e.pageX - mX;let y = e.pageY - mY;if (currentX && currentY) {x += currentX;y += currentY;}let elHeight = box.offsetHeight;let elWidth = box.offsetWidth;let rangeHeight = document.body.offsetHeight / 2 - elHeight / 2;let rangeWidth = document.body.offsetWidth / 2 - elWidth / 2;if (Math.abs(y) > rangeHeight) {if (y < 0) {y = -rangeHeight;} else {y = rangeHeight;}}if (Math.abs(x) > rangeWidth) {if (x < 0) {x = -rangeWidth;} else {x = rangeWidth;}}box.style.cssText = `transform:translate3d(${x}px, ${y}px, 1px)`;};const up = () => {isDown = false;let formatValue = window.getComputedStyle(box, null).transform.replace(/[^0-9\-,]/g, "");let formatArr = formatValue.split(",");currentX = Number(formatArr[formatArr.length - 4]);currentY = Number(formatArr[formatArr.length - 3]);document.removeEventListener("mousemove", move);document.removeEventListener("mouseup", up);};</script></body>
</html>
二十一：element-plus 面包屑
1：在compontens新建文件 如 breadcrumb.vue
<template><div><el-breadcrumb separator="/"><el-breadcrumb-item to="/" v-if="route.path!=='/'">首页</el-breadcrumb-item><el-breadcrumb-item v-for="(item, index) in navArray" :to="{path:item.path}">{{item.meta.title}}</el-breadcrumb-item></el-breadcrumb></div>
</template>
<script lang="ts" setup>import { useRoute, useRouter } from "vue-router";
import { watch, ref, onMounted } from "vue";const navArray = ref([]);
const route = useRoute();
const router = useRouter();watch(// 监听路由记录() => route.matched,(newValue, oldValue) => {navArray.value = newValue;}
);
</script>
2：在App.vue引入
只要是有子路由在自身展示，需要配置router-view，比如所有页面经过App.vue，则在其配置
解释路由：
二十二：vue3国际化多语言 （vue 实现中英文切换功能）
1、安装
cnpm install vue-i18n --save-dev2、建立对应的页面
zh.js
export default {header: {home: "主页",login: "登录",subLogin: "子级登录",test: "测试",},footer: {copyright: "中文数安信Copyright © 2019-2020",},
};
en.js (其实就是将中文翻译了一下在使用的地方写变量，点击按钮切换)
export default {header: {home: "Home",login: "Login",subLogin: "subLogin",test: "test",},footer: {copyright: "Copyright © 2019-2020",},
};
index.js
import { createI18n } from "vue-i18n"; //引入vue-i18n组件
import zh from "./zh"; //引入中文语言包
import en from "./en"; //引入英文语言包const i18n = createI18n({locale: "zh", //默认显示的语言fallbackLocale: "zh", //默认显示的语言legacy: false, //是否使用旧的语言包方式，默认为false// 去除控制台警告// missingWarn: false,// fallbackWarn: false,// globalInjection: true,messages: {//语言包zh: zh,en: en,},
});
export default i18n; //将i18n暴露出去，在main.js中引入挂载
3、文件建立完成后，在main.ts引入
import i18n from "./lang";app.use(i18n);
4、引入好了，就该在页面使用了
{{$t('header.login')}}5、默认中文，切换语言
<el-button type="primary" @click="executorLang">切换语言</el-button>
<script setup>
import { useI18n } from "vue-i18n";
const { locale } = useI18n();function executorLang() {// console.log("
JavaScript 《公司开发功能》 99+ 大合集相关推荐
- 『大牛公司机构近期研究报告大合集』第二版
免费『大牛公司机构近期研究报告大合集』第二版(阿里.腾讯.麦肯锡.毕马威.德勤.普华永道等几十家倾情巨献!) 2016-03-04 数据局http://mp.weixin.qq.com/s?__biz ...
- Android开发推荐资料大合集 【转载自51CTO】
Android开发资料大集合 Android开发问题集锦1~6集合 http://down.51cto.com/data/440230 Android画图学习 http://down.51cto.co ...
- 大牛公司机构近期研究报告大合集
免费获取『大牛公司机构近期研究报告大合集』(阿里.腾讯.麦肯锡.毕马威.德勤.普华永道等十多家倾情巨献!) 大牛公司.机构近期研究报告 阿里.腾讯.麦肯锡.毕马威.德勤.普华永道 等十多家大牛公司机构 ...
- .Net开发者开发效率提升大合集
简介 本文来自于我正在GitHub上发布的.Net开发者工具箱项目,项目地址:dotnet-developer-toolbox ,后期会继续更新更多的优质内容,如有需要可关注原项目. 本项目整理了一些 ...
- Android开发推荐资料大合集
http://bbs.51cto.com/thread-937263-1.html 转载于:https://blog.51cto.com/6297123/1094880
- Android软件开发之盘点自定义View界面大合集（二）
Android软件开发之盘点自定义View界面大合集(二) - 雨松MOMO的程序世界 - 51CTO技术博客 雨松MOMO带大家盘点Android 中的自定义View界面的绘制 今天我用自己写的一个 ...
- 年度盘点！必看AI顶会论文、Github高星项目大合集（附链接）
目前,国外计算机界评价学术水平主要是看在顶级学术会议上发表的论文,特别是在机器学习.计算机视觉和人工智能领域,顶级会议才是王道.本期我们盘点了2019年人工智能领域的顶会,如最核心的顶会AAAI.IJ ...
- 独家 | 年度盘点！必看AI顶会论文、Github高星项目大合集（附链接）
目前,国外计算机界评价学术水平主要是看在顶级学术会议上发表的论文,特别是在机器学习.计算机视觉和人工智能领域,顶级会议才是王道.本期我们盘点了2019年人工智能领域的顶会,如最核心的顶会AAAI.IJ ...
- php基础从入门到面向对象（大合集）
php基础复习应用大合集 1.不知道有没有人很长不是不复习基础或者一些编程思想,会忘记,博主呢秉承着温故而知新的道理把基础从到位复习了一边,其中还包括一些算法指针,统计目录,字符串,数组的方法,mvc ...
最新文章
- WordPress 网站开发“微信小程序“实战(二)
- Android ListView存在多个item样式的处理方法
- HTTPS证书的申请过程
- 10-200-022-使用-概念-并行度Parallelism
- WebAPI——自动生成帮助文档
- java 判断ip和port是否存活_java判断IP和端口号是否可以访问
- ubuntu16.04 内核源码编译
- c语言程序课程设计过程,C语言课程设计————写下流程图！ 谢谢
- Repeater控件的
- python识别银行卡数字_Python银行卡数字识别项目 (Opencv)
- Android StorageManager实现原理剖析
- Redis下载安装（Windows,Lunix）
- ldap radius mysql_freeradius +ldap
- 163vip邮箱提醒您谨防邮箱诈骗，点击查看常见套路
- PIXI.JS一镜到底动画
- 合成冷色黑暗恐怖魔法师图片的PS教程
- 2020及2021年常被利用的30个软件漏洞
- matlab在生物学中的应用,MATLAB在生物医学信号处理中的应用
- Xshell开多个会话和会话分屏
- 1.3寸oled（I2C）右屏幕出现一条竖线
热门文章
- 程序人生 - 二手房能延期过户吗？
- 花千骨服务器无响应,花千骨出现游戏闪退 解决闪退方案
- 个人站——作品集页面设计
- 《Android Studio开发实战》学习（三）- 展示图片
- 苹果平板哪款电容笔好用？超好用的苹果平板电容笔推荐
- C语言之父Dennis Ritchie辞世
- 解析Android mdpi hdpi xhdpi xxhdpi xxxhdpi 之间关系
- 计算机基础优质课教案,计算机基础公开课教案
- Android开发之Audio播放：竞争Audio之Audio Focus的应用
- signature=0a26d8967069103efeee67346aac0529,Modified enzymes