![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
文章平均质量分 50
bdawn
JS全栈|软件工程师,负责公司所有前后端项目的开发和管理。
展开
-
Mockjs之后端兄弟不给力只能靠自己了
你的后端兄弟接口还没写好?那就让`Mockjs`来拯救你吧!让你在没有真实数据的情况下也能开开心心地写代码。原创 2023-03-08 22:26:03 · 176 阅读 · 0 评论 -
从源码分析vue3组件的生命周期
从源码角度分析vue3的生命周期钩子函数的运行机制原创 2022-12-03 23:35:07 · 1098 阅读 · 0 评论 -
一文读懂vue3的Pinia
Pinia 是 Vue的专属状态管理库,Pinia就是为vue3而生,当然也支持vue2原创 2022-11-16 22:14:28 · 2065 阅读 · 0 评论 -
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架原创 2022-11-04 22:24:29 · 909 阅读 · 0 评论 -
针对vue的大屏面板适配方案
针对vue的大屏面板适配方案,只需简单的引入一个插件原创 2022-04-30 10:14:10 · 1094 阅读 · 0 评论 -
vue3源码分析之use(store)
vue3源码分析之use(store)官方介绍use()用来安装 Vue.js 插件。如果插件是一个对象,则它必须暴露一个 install 方法。如果插件本身是一个函数,则它将被视为 install 方法。该 install 方法将以应用实例作为第一个参数被调用。传给 use 的其他 options 参数将作为后续参数传入该安装方法。当在同一个插件上多次调用此方法时,该插件将仅安装一次。use()相关源码use(plugin, ...options) { // 是否已安装此插件原创 2022-03-22 16:06:02 · 5080 阅读 · 0 评论 -
vue3 keep-alive的include和exclude属性无效
vue3 keep-alive的include和exclude属性无效keep-alive标签的include和exclude两个属性设置之后没有效果const app = Vue.createApp({ template: ` <button v-for="tab in tabs" @click="activeTab = tab" :style="activeTab === tab?{color: 'red'}:{}">{{ tab }} </button>原创 2022-02-18 15:49:13 · 1271 阅读 · 0 评论 -
vue3 内置组件keep-alive用法的全面介绍
详细介绍vue3内置组件keep-alive的用法及相关注意事项原创 2022-02-16 16:21:16 · 1580 阅读 · 0 评论 -
vue3 api expose
vue3 api expose原创 2022-02-14 20:45:32 · 783 阅读 · 0 评论 -
nodejs 获取windows cpu、gpu和内存使用情况
获取系统cpu、gpu和内存使用情况const nodeCMD = require('node-cmd');const os = require('os-utils');const serverInfo = { cpuUsage: 0, gpuUsage: 0, freeMem: 0, totalMem: 0}/** * 获取系统内存情况 */function getMem() { serverInfo.freeMem = os.freemem() serverInfo.to原创 2022-02-12 17:01:08 · 6124 阅读 · 0 评论 -
vue3 h() api
h()函数返回一个VNode(虚拟节点),用于渲染函数render()原创 2022-02-11 11:26:19 · 687 阅读 · 0 评论 -
vue3 api computed
vue3中computed apivue3中computed api有两种用法只读的computed可写的computed只读的computedcomputed传入一个用于返回计算属性的函数 import {computed, ref} from "vue"; const count = ref(0) const countPlus = computed(() => count.value+1,) console.log(countPlus.value) count.valu原创 2021-12-07 09:49:45 · 340 阅读 · 0 评论 -
vue3 api watchEffect
watchEffect传入一个函数A并执行,追踪函数内依赖的变量,当依赖的变量发生变化时再次执行A函数。当A函数依赖一个变量<template> <div> </div></template><script lang="ts" setup> import {ref, watchEffect} from "vue"; let count = ref(0) watchEffect(() => { console.log原创 2021-11-30 14:38:17 · 839 阅读 · 0 评论 -
vue3 <script setup>语法糖中定义v-model属性
vue3 <script setup>语法糖中定义v-model属性自定义组件CustomComp.vue<template> <div>{{infos}} </div></template><script setup> const props = defineProps(['infos']) const emits = defineEmits(['update:infos']) setTimeout(() =&g原创 2021-11-11 10:49:17 · 4136 阅读 · 0 评论 -
echarts 多圆环图表
option如下vue代码const d = [ {value: 348, name: '内部人员'}, {value: 735, name: '外部人员'}]const colors = ['#cfc100', '#1091ca']const colors2 = ['#fff000', '#11b6ff']const el = this.$refs.bgry_chart as HTMLElementconst width = el.offsetWidthconst myEchart .原创 2021-11-02 10:52:31 · 1772 阅读 · 0 评论 -
vue3 滑动验证组件
vue3拖动滑块进行验证组件效果展示源码<template> <div class="slider-verification" ref="sliderContainer"> <div class="slider-left-bg" :style="sliderLeftWidthStyle"></div> <div class="prompt-text" :style="verifySuccess ? promptTextStyleSuc原创 2021-11-01 15:09:52 · 5718 阅读 · 8 评论 -
vue使用hls.js播放m3u8视频流
vue使用hls.js播放m3u8视频流npm下载hls.jsnpm i hls.js@1.0.9-0.canary.7938导入Hlsimport Hls from "hls.js"播放视频流mounted() { const that= this this.hls = new Hls() const video = this.$refs.video_player this.hls.attachMedia(video) this.hls.on(Hls.Events.MEDIA_A原创 2021-09-24 11:25:57 · 3995 阅读 · 0 评论 -
vue3 Teleport
vue3 Teleport基础使用字面意思:远距离传送vue3中的作用就是将teleport标签下的元素传送到指定位置如下示例将Test1中的teleport下的span传送到Test2的.aa元素下// App.vue<template> <test2/> <test1 msg="Hello,Teleport"></test1></template><script> import Test1 from './c原创 2021-05-17 16:37:50 · 2566 阅读 · 0 评论