vue3
文章平均质量分 56
Ace.三阶斗尊
web前端全栈工程师,熟悉vue2/vue3、react/react-native、node、uniapp、nuxt、electron、python.....
斗之气,斗者,斗师,大斗师,斗灵,斗王,斗皇,斗宗,斗尊,斗圣,斗帝
展开
-
vue2/3的函数式组件
1. 函数式组件:函数组件不需要实例化,无状态,没有生命周期,所以渲染性能要好于普通组件,不需要实例化,没有this,this式通过render函数的第二个参数context来替代,所以在外部通过ref去引用组件时,实际引用的时HTMLElement。没有生命周期,也就不能使用computed,watch。不能通过$emit对外暴露事件,调用事件只能通过context.$emit.click方式调用外部传入的事件。在vue2中使用函数组件:需要指定functional:trueexport defa原创 2022-05-11 22:37:39 · 1307 阅读 · 1 评论 -
2022web前端全栈完整整理——(二)css/css3篇
1. css基础:https://alex-ss.blog.csdn.net/article/details/830539012. css3新增属性值initial:可直接取消某个元素指定的样式值使其变为默认值,如color:initial。3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量,且支持双向响应:属性:v-bind(js/ts变量)。<template> <div class='ace_class'>文本颜色<原创 2022-05-06 21:57:15 · 572 阅读 · 0 评论 -
vue3的computed计算属性传参
在使用计算属性时,尤其是有v-for和slot插槽的使用时,进行一些参数的传递。1. 在v-for中使用计算属性传参。<div v-for="item in list"> <div v-if='isShow(item)'>是否显示</div></div><script>import {computed} from 'vue'const currentId=ref(null)const isShow=computed(原创 2022-04-29 23:50:23 · 26468 阅读 · 2 评论 -
vue3中获取ref元素的几种方式
1. 原生js获取dom元素:document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2. ref获取单个dom元素:<template> <div ref='divDom'></div> </template><script setup>import { ref} f原创 2022-04-27 21:05:16 · 16506 阅读 · 0 评论 -
electron-vue项目下本地启动创建多窗口(二)——单端口,单webpack配置,多vue实例
1. 本地启动,在同一端口下,同一webpack编译成不同的入口文件,如:http://localhost:9080/index.html http://localhost:9080/update.html ......2. 配置不同的vue实例入口文件以及其入口页面:renderer/index.ts:创建主界面vue实例,挂载一个vue实例入口页面。import {createApp} from 'vue'import App from './App.vue'createApp(A原创 2022-04-27 20:40:12 · 1015 阅读 · 1 评论 -
electron-vue项目下本地启动创建多窗口(一)——多端口,多webpack配置,多vue实例
1. 本地启动,在不同端口下,不同webpack编译成不同的入口文件,如:http://localhost:9080/index.html http://localhost:9081/index.html ......2. 配置不同的vue实例入口文件以及其入口页面:renderer/index.ts:创建主界面vue实例,挂载一个vue实例入口页面。import {createApp} from 'vue'import App from './App.vue'createApp(Ap原创 2022-04-27 20:27:33 · 1787 阅读 · 0 评论 -
ss-vue-calendar封装拓展性强的日历组件库
使用SsCalendar组件 npm install ss-calendar import SsCalendar from 'ss-calendar' import "ss-calendar/style.css" createApp(App).use(SsCalendar).mount('#app') // 如果项目中ts警告,`npm install @xxxxx` (如果存在),或者添加一个包含 `declare module ‘xxxxx‘;` 的新声明(.d.ts)文 /.原创 2022-04-24 22:40:20 · 954 阅读 · 0 评论 -
npm 上传vite打包的vue3组件到npm仓库
1. 基于vite创建vue3组件,如ss-calendar组件。创建项目:npm init vite@latest 创建组件文件:src/components/ss-calendar 创建组件.vue文件:src/components/ss-calendar/index.vue 创建组件导出文件:src/components/ss-calendar/index.ts,如下import SsCalendar from './index.vue';import { App } from 'vu原创 2022-04-24 20:36:14 · 1530 阅读 · 0 评论 -
在ts + vite + vue3项目里找不到node相关模块
解决:安装@types/nodenpm install @types/node --save-dev报错:在tsconfig.node.json配置:"allowSyntheticDefaultImports": true,{ "compilerOptions": { "composite": true, "module": "esnext", "moduleResolution": "node", "allowSynthetic...原创 2022-04-24 19:27:22 · 1536 阅读 · 0 评论 -
vue3自定义下拉菜单组件,支持popperjs和滚动到指定元素
1. ss-dropdown/index.vue组件:2<template> <div class="ss-dropdown" ref="ssDropdownDom" @click="clickOpen"> <span class="current-num">{{ current }}年</span> <img src="../../assets/arrow-top.png" class="arrow-top-icon...原创 2022-04-23 17:13:39 · 3165 阅读 · 0 评论 -
electron+vue3自定义toast提示组件
1. 创建new-toast目录。2. 创建new-toast/index.vue:<template> <div id="msg-box" v-if="visible"> <div class="msg-text">{{ msgText }}</div> </div></template><script setup lang='ts'>import { ref } from 'vue'原创 2022-04-16 16:16:24 · 1125 阅读 · 0 评论