vue3

## 1. 引言 Vue是常用的前端框架，TypeScript（简称TS） 是 JavaScript 的超集，可以提高代码的可维护性和可读性 本文基于Vite、Vue3和TypeScript搭建L7开发环境并示例 ## 2. 环境安装 这里使用Vue 官方的项目脚手架工具创建Vue开发环境（其他方式 ......

main.js import ElementPlus from 'element-plus' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' app.use(ElementPlus, { locale: zhCn, }).mount('#a ......

1、新建number-format.ts import { Directive, DirectiveBinding } from "vue"; const numberFormat: Directive = { mounted(el, binding: DirectiveBinding) { con ......

1、新建 number-thousander-format.ts import { Directive, DirectiveBinding } from "vue"; const numberThousanderFormat: Directive = { mounted(el, binding: D ......

# Pinia Pinia是西班牙语piña（西班牙语中的“菠萝”）单词的形似。 它是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样），同时兼容Vue2、Vue3，也并不要求你使用Composition API； > Pinia开始于大概2019年，最初是作为一个实验 ......

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 核心 使用CSS变量, 准备两套CSS颜色, 一套是在 light模式下的颜色,一套是在dark模式下的颜色 dark模式下的 CSS 权重要比 light 模式下的权重高, 不然当我们给html添加自定义属性[data-theme='d ......

https://gitee.com/jeecg/jeecgboot-vue3?_from=gitee_search JeecgBoot—Vue3版前端源码，采用Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技术方案，包括二次封装组件、utils、hooks、动态菜单、 ......

# setup setup是个函数, 包含数据、方法等，是组合api的“舞台”。 setup返回值： 1.对象，其中的属性、方法都可以在模板中直接使用 2.渲染含数（了解就好） ``` export default { name: "App", components: {}, setup() { / ......

故事开头是这样的，项目收尾阶段，我去修改同事写的代码，写着写着，看到一个页面中根本不存在的标签，很是好奇，我就认真的看了起来 <div class="tabs_content" ref="tabsContent" v-if="showTabsContent"> <TabsPage></TabsPag ......

Vue3.x 超详细入门教程 目录 安装步骤 1. 安装vue-cli 2. 创建项目 3. 选择配置 4. 选择 Vue 版本 5. 是否使用 class 风格的组件语法 6. 是否使用 Babel 与 TypeScript 一起用于自动检测的填充 7. 是否使用 history 路由模式 8. ......

```javascript import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', name: 'index', component: () => import('./ ......

在写这篇文章的时候，查看了下electron最新稳定版本由几天前24.4.0升级到了25了，不得不说electron团队迭代速度之快！ 前几天有分享一篇electron24整合vite4全家桶技术构建桌面端vue3应用示例程序。 https://www.cnblogs.com/xiaoyan2017 ......

## vue2数据双向绑定和vue3数据双向绑定的原理透析 参考资料 : https://www.jianshu.com/p/d7e2efde434b ​ https://www.jianshu.com/p/d7e2efde434b 背景:面试官10个有9个都会问这个问题,所以深究一下啦 ### 需 ......

``` /* 滚动条 */ body *::-webkit-scrollbar { width: 5px; height: 10px; } body *::-webkit-scrollbar-track { background: #fff; border-radius: 2px; } body * ......

> Date: 2023-05-29 17:56:27 > Author: Gavin > PS: 不喜欢做复制粘贴，这篇笔记只是简写关键 ### P1~12 Vue3 中的通信方式 - props `父=>子` 传的为不可变数据 - 自定义事件 `子=>父` - 全局事件总线 `任意组件` mit ......

import { defineEmits } from 'vue' //定义emit 类型 interface EmitsType { (e: 'bClick', item: {name:string,age:number}): void } const emit = defineEmits<Emi ......

import { defineProps, withDefaults, toRefs } from 'vue' //props 传过来的值的类型定义 interface ModuleType { num: number } const props = withDefaults(defineProps ......

import { onLoad,onShow } from "@dcloudio/uni-app"; onShow(()=>{ console.log(msg.value) }) ......

前言： 作为一个写了七年的C#，半年PHP，三年的vue+两年的Java程序员，多少有点不伦不类，无奈，性格如此，小孩子才做选择，我全都想要☺， 相信现如今的形势下，有着和我相同经历的道友不在少数，革命一块砖，哪里需要哪里搬，有人说贪多嚼不烂，也有人说艺多不压身，至于能达到何种高度，想必都在个人投入 ......

<template> <div> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> </template> <script setup lang="ts"> import { ref, on ......

首先是按照常规的箭头函数引入的方法，结果报一下错误，且页面报错 const HelloWorld=()=>import('../components/HelloWorld.vue'); 解决办法 import { defineAsyncComponent } from 'vue' const Hel ......

关于 vue3 + vite 开发一个管理后台，并在后台中使用 自定义的 svg 图片左右路由icon #### 安装依赖 * `npm i vite-plugin-svg-icons --D` 或者 * `yarn add vite-plugin-svg-icons --D` 等其它的安装工具 # ......

# 1、 new Vue - > create(vue) #### 2.0  #### 3.0 ![](https ......

``` ``` ......

我这边遇到的是在使用到element-plus的一个<el-input>标签时就开始出现（TypeError: track(...) is not a function），我怀疑这是element-plus与vue的版本问题，查看element-plus github的Releases 发现支持的版 ......

https://github.com/moocstudent/vue-war 昨天通过vue官网建立了vue项目，逐渐看了下组合式/选项式 API的区别 虽然在前几个月里，通过做SH的伙计给的单子接触了VUE ANTD，但是实际 上对其原理未知（难道只能说跟前天面试的一样，问Jquery是跟JS都是 ......

# vue3中computed计算属性函数 ``` 目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。 ``` **computed函数在vue2中我们都了解过，当我们需要一个值，这个值随着其他值变化而变化，我们就将其放进com ......

一说到创建桌面应用，就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。 之前也有使用vite2+vue3+electronc创建桌面端项目，不过 vue-cli-plugin-electron-builder ......

## 1.setup语法糖简介 直接在script标签中添加setup属性就可以直接使用setup语法糖了。 使用setup语法糖后，**不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用**。 ## 2.setup语法糖中新增的api d ......

Vue3 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： 实例 1 <div id="app"> {{ message.split('').reverse().join('') }} </div> 实例 1 中模板变的很复杂起 ......