csl125的博客

reactivereactive是 Vue3 中提供的实现响应式数据的方法。 在 Vue2 中响应式数据是通过 defineProperty 来实现的，在 Vue3 中响应式数据是通过 ES6 的Proxy来实现的。具体参照Vue双向数据绑定，Vue3 的 Proxy 和 defineProperty 的比较。 reactive 参数必须是对象 (json / arr) 如果给 reactive 传递了其它对象默认情况下，修改对象无法实现界面的数据绑定更新。 如果需要更新，需要进行重新赋...

setup 函数setup函数的一些相关事项官方文档新的setup组件选项在创建组件之前执行由于在执行setup时尚未创建组件实例，因此在setup选项中没有this。这意味着，除了props之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。就是说，data，computed等自主定义的那些初始化数据都将会无法提供访问。在setup()内部，this不会是该活跃实例的引用，因为setup()是在解析其它组件选项之前被调用的，所以set...

写一个todolist，大概长这样vue2.xx 语法<template> <div> <from> <input type="text" v-model="stu.id"> <input type="text" v-model="stu.name"> <input type="text" v-model="stu.age"> <input type="sub

创建 Vue3 的三种方式Vue-Cli Webpack Vite我用 Vite （尤自创的方案），另外两种方法请自己搜索。Vite 的实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间。1、安装 Vitenpm install -g create-vite-app2、利用 Vite 创建 Vue3 项目create-vite-app projectName （项目名称）3、安装依赖、运

第一节：# Diff静态标记Vue3 中仅对静态标记标记对象进行比较动态绑定<div> <p>Xmo</p> <p>{{kkl}}</p> <p>Xmo</p> <p>1234</p> <img :src="img"></div>import { createVNode as _createVNode, toDisplaySt.

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

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

前言之前分享过一篇vue3+ts+vite构建工程化项目的文章，针对小的开发团队追求开发速度，不想使用ts想继续使用js，所以就记录一下从0搭建一个vite+vue3+js的前端项目，做记录分享。Vite 3 - 构建工具Vue 3Vue Router - 官方路由管理器Pinia - Vue Store你也可以选择vuexelement-plus - UI组件库Sass - CSS 预处理器Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js。

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修饰符

element-plus版本： "element-plus": "^2.0.5", "unplugin-auto-import": "^0.6.1", "unplugin-vue-components": "^0.17.21"解决方法使用正则表达式排除loading-directive的样式exclude: new RegExp(/^(?!.*loading-directive).*$/) configureWebpack: config => { // we..

前端时间写了标准宫格拖拽排序的文章 1、 2、4、9、12等等标准宫格拖拽，基于vue-grid-layout 拖拽换位无刷新vue项目中 基于vue-grid-layout开发的拖拽对换位置，九宫格拖拽排序，换位_csl125的博客-CSDN博客_vue九宫格拖拽安装：npm install vue-grid-layout --save&yarn add vue-grid-layout1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一效果如下：代码...

Vue3.x 中 Vue-Router 详解，vue-router路由的使用

Vue3.x 中 集成Typescript 使用Typescript

​一、命名规范市面上常用的命名规范： camelCase（小驼峰式命名法 —— 首字母小写） PascalCase（大驼峰式命名法 —— 首字母大写） kebab-case（短横线连接式） Snake（下划线连接式）​ 1.1 项目文件命名1.1.1 项目名全部采用小写方式， 以短横线分隔。例：whclould-smart-port / my-project-name。1.1.2 目录名参照项目命名规则，有复数结构时，要采用复数命名..

watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。具体什么意思呢例如：<template> <div> <h1>测试watch</h1> <hr> <h2>{{num}}</h2> <el-input v-model="state.name"&

一、父子组件介绍二、Vue3.x组件自定义事件实现子组件给父组件传值注意： Vue官方推荐你始终使用 kebab-case 的事件名。子组件DatePicker.vue<template><button @click="run">通过广播方式实现子组件给父组件传值</button></template><script>export default { // 建议定义所有发出的事件，以便更好地记录组件应该如何工作。

1000000级别数组 some()查找速度比incudes()慢 let arrs = [] for (let i = 0; i < 1000000; i++) { arrs.push(i) } var start = new Date().getTime(); // roles.includes("999999") // arrs.some(role => role == "999999") // arrs.in

通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？其实，我们可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。//

定义接口环境文件，项目打包后会部署的不同的环境，1、环境配置文件：variable.jsconst cookieExpires = 30; //cookie存储时间 单位：天//接口请求环境配置let httpUrl = window.location.host;let httpBaseUrl = "http://www.baidu.com:60000";if (httpUrl.includes("cccxxxx.com")) { // 测试生产环境 httpBaseU

安装：npm install vue-grid-layout --save&yarn add vue-grid-layout1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一效果如下：代码如下：<template> <grid-layout :layout="layout" :auto-size="false" :col-num="3" :row-height="100"

directives.jsimport Vue from 'vue'/** * 点击元素外 触发事件 * */Vue.directive('clickoutside', { bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false }

在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。你可以将一些css样式抽象到指令中，也可以将一些js操作放到指令中去执行。就使用上来说，指令不用像组件一样需要引入和注册，注册后使用非常简洁方便。对于在项目中常用到的指令，在此做了一个合集介绍，附源码可以直接在项目中使用。元素点击范围扩展指令 v-expandClick使用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在...

自定义事件也可以用于创建支持v-model的自定义输入组件<input v-model="searchText" />等价于：<input :value="searchText" @input="searchText = $event.target.value" />当用在组件上时，v-model则会这样：<custom-input :model-value="searchText" @update:model-value="searchT...

Vue3.x中的组件模板属于该组件，有时候我们想把模板的内容移动到当前组件之外的DOM 中，这个时候就可以使用 Teleport。<teleport to="body">添加到body中 </teleport><teleport to="#app">添加在app中</teleport>使用Teleport实现一个模态对话框的组件创建一个组件 modelButton.vue<template> <telepor

1