csl125的博客

vue3 jsx 动态添加组件到dom元素中

记录一下vue3中如何使用svg图标，vue2中大家常用iconfont字体图标，现在vue3大家都又推荐svg的方式使用图表，包括elementplus组件库也变成使用svg方式引用图标。

localStorage封装，加密，设置过期时间

之前跟大家介绍了两种vue编写风格分别是template模板方式，和JSX方式感觉JSX被大家吐槽的很厉害，其实用习惯还挺好用的今天介绍第三种函数式编程。如果没有prop，那么通常可以将children作为第二个参数传入。如果会产生歧义，可以将。函数是一个用于创建VNode的实用程序。也许可以更准确地将其命名为。作为第二个参数传入，将children作为第三个参数传入。，但由于频繁使用和简洁，它被称为。...

vue3.x 项目搭建流程

vue3.x 使用unocss

vue3.x使用vue-router@4.x 动态路由，动态路由设置权限

vue3.x+ts+vite 使用vue-router@4.x，路由过渡动画，路由切换滚动等

vue3.x中使用vue-router4.x

pinia和vuex都有一个通病页面刷新状态会丢失vuex通常我们都会使用localStorage等做一个本地存储那么我们在vue3中对pinia做一个持久化插件在main.ts中定义一个方法在pinia中注册在piniaPlugin方法中我们可使用store.$subscribe监听state的变化然后做存储或者。...

vue3中使用pinia,getter和actions的使用

vue3.x 如何使用pinia

之前开发移动端常用的rem布局，或使用媒体查询，本文研究一下postcss-px-to-viewport的使用现在有了更好用的vw vhvw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一1、创建vue项目2、安装postcss-px-to-viewport 依赖3、因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件只需要在vite.config.ts配置postcss即可vite.config.

样式穿透 深度选择器插槽选择器 全局选择器CSS Modules CSS Modules 自定义注入名称与组合式 API 一同使用可以通过 API 在 和 中访问注入的 class。对于使用了自定义注入名称的 块， 接收一个匹配的 attribute 值作为第一个参数： CSS 中的 单文件组件的 标签支持使用 CSS 函数将 CSS 的值链接到动态的组件状态使用示例：创建组件css.vuecssset.vue

vue3中如何关在全局函数和变量，vue3.x中如何创建自定义插件并使用

Vue3 自定义Hook主要用来处理复用代码逻辑的一些封装这个在vue2 就已经有一个东西是Mixinsmixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。弊端就是 会涉及到覆盖的问题组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。第二点就是 变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。Vue3 的自定义的hookVue3 的 hook函数 相当于 vue2 的

除了 Vue 内置的一系列指令 (比如 或 ) 之外，Vue 还允许你注册自定义的指令，一个自定义指令被定义为一个包含类似于组件的生命周期钩子的对象。钩子接收指令绑定到的元素。2、在setup 内部使用自定义指令在 中，任何以 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中， 即可以在模板中以 的形式使用。在模板中使用注册全局使用3、钩子参数指令的钩子会传递以下几种参数：：指令绑定到的元素。这可以用于直接操作 DOM。：一个对象，包含以下 prope

Vue3自动引入插件unplugin-auto-import的使用，自定义组件使用v-model,自定义v-model修饰符

vue3.x+ts+vite 中使用tsx

兄弟组件传值 mitt和手写eventBus 以及获取全局变量多种方法

vue3+ts+vite 依赖注入（provide/inject）的使用

vue3+vite+ts 异步组件的使用，defineAsyncComponent和Suspense的使用

vue3+setup+ts Vue3 使用setup语法糖+ts中如何使用全局组件，如何使用递归组件，setup语法糖组件调用自身的问题如何解决

vue3 setup+ts语法糖 语法父子组件如何传参

<template> <div v-html="message"> </div> <h1 class="h2-h" v-if="flag">布尔</h1> <button @click="isShowFun">click</button> <p :style="'color:' + ost.pColor"> <span>{{ ost.pNum }}</span&g.