vue3
如何在VUE3中使用Axios
## 1、安装Axios `npm install axios` ## 2、封装一个api.ts `import axios from 'axios'; const api = axios.create({ baseURL:'http://localhost:8080', timeout: 1000 ......
three.js学习1（vue3）
1.引入threejs npm install --save three 在组件内 import * as THREE from 'three' 2.创建容器 创建canvas标签，为3D渲染建立容器 <template> <div> <canvas id="three"></canvas> </d ......
VUE3、ElementPlus 重构若依vue2 表单构建功能
# Vue3 + ElementPlus + Vite 重构 若依Vue2 表单构建功能 若依官方的Vue3 版本发布已经有段时间了，就是这个表单构建功能一直没有安排计划去适配到Vue3！ 前段时间公司需要做个类似的功能，就直接借鉴若依Vue2的来直接改了 吐槽下：vuedraggable-vue3 ......
vue3
一、vue3最终响应式原理 let person = { name: '张三', age: 15, } //我们管p叫做代理数据，管person叫源数据 const p = new Proxy(person,{ //target代表的是person这个源对象，propName代表读取或者写入的属性名 ......
vue3
1、ref 深拷贝 视图层更新不改变源数据 const num = 1 const refNum = ref(num) const click = ()=>{ refNum++ //refNum 已经改变了，但原数据num不变 } 2、toRef 源数据改变不更新视图 ......
Vue3中使用TypeScript封装axios遇到的问题(AxiosRequestConfig)
>如果您有更好的解决方法，欢迎评论区评论。 ### 版本 ~~~ "dependencies": { "axios": "^1.0.0", "vant": "^4.6.3", "vue": "^3.3.4", "vue-router": "^4.2.4", "vuex": "^4.1.0" }, " ......
uniapp+vue3+ts 使用pinia报错
"hasInjectionContext" is not exported by "node_modules/vue-demi/lib/index.mjs", imported by "node_modules/pinia/dist/pinia.mjs". 11:36:19.397 at ../no ......
Vue3 里 script 的三种写法
一、Vue3 里 script 的三种写法 首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法， 1、最基本的 Vue2 写法 html复制代码<template> <div>{{ count }}</d ......
vue3 TS vite element ali-oss使用方式
# vue3 TS vite element ali-oss使用方式 1. 安装ali-oss包 ```cmd npm i ali-oss -S ``` 2. 使用oss封装函数 ``` const OSS = require('ali-oss') // import Oss from 'ali-o ......
vue3单页面的写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> ......
Vue3下的axios跨域问题
0、vue-cli版本 vue -V vue --version 1、根目录找vue.config.js，无则添加文件；然后添加节点： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig ......
Vue3之ref取render形式组件jsx元素节点
### [2023 年 7 月 28 日 22:16:06] ## ref 取 render 方式组件节点 一开始注意到组件 setup 和 render 一起使用的情况，好奇怎么通过 ref 取到 render 中 jsx 里的节点，一开始试了以下的尝试，结果是 undefined 的： ```j ......
vue3拖拽插件vue-draggable-next
- 基于sortablejs； npm地址：https://www.npmjs.com/package/vue-draggable-next 配置项：https://github.com/SortableJS/Sortable#options - ......
Vue3 组件通信方式
Vue3 组件通信方式 vue2 组件通信方式 一、props props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！ 不管是Vue2还是Vue3，props都是只读的 二、自定义事件 在vu ......
vue3跨越
在vue3项目中使用跨域 1.服务器代理 server: { port: 8080, // 设置服务启动端口号 open: true, // 设置服务启动时是否自动打开浏览器 cors: true, // 允许跨域 // 设置代理，根据我们项目实际情况配置 proxy: { '/api': { // ......
vue-cli构建Vue3项目
1、node环境检查 node -v //查询Node版本 2、vue-cli版本检查 vue -V //查询 vue-cli版本 npm uninstall -g vue-cli //卸载旧版vue-cli npm install -g vue-cli //旧版vue-cli2 npm insta ......
Vue3多条数据复制功能，复制内容用逗号拼接
<div class="person-list"> <div class="person-item">9939939939399399</div> <div class="person-item">1111111111111111</div> </div> <el-icon class="allow ......
Vue3的响应式数据处理方式
问题：data[0].tableId 是 undefined，但控制台可以打印出 data[0] 的值 原因: Vue 3 的响应式数据处理方式导致的。 Vue 3 使用了 Proxy 来实现响应式数据。当你访问一个响应式对象的属性时，Vue 会在底层进行拦截，并返回响应式的值。这意味着，当你访问 ......
vue3实现图片滚动播放
<template> <div class="swiperBox"> <div id="swiper"> <div class="imgBox" @mouseenter="mouseenter" @mouseleave="mouseleave"> <a v-for="(x, i) in LinkLi ......
vue2和vue3的区别
1.性能提升 vue3对性能进行了优化，相较于vue2，在运行时的性能更高。vue3采用了Proxy代理机制，使得在数据变化时可以更快的更新视图，从而提供了更好的响应性能。 2.Composiiton API (组合式API) vue3引入了Compsition API,这是一种新的API风格，它允 ......
vue3状态管理工具Pinia的使用
1.安装 npm install pinia --save 2.src文件夹下新建store文件夹，并新建index.ts import {createPinia } from 'pinia' const pinia = createPinia() export default pinia 2.在m ......
vue3中的watch与vue2中的watch的对比
新版的 watch 和旧版对比，在使用方式上变化非常大！旧版是这样用的，和 data 、 methods 都在同级配置： // 旧版的写法： export default { watch: { // ... }, data () { return { // ... } }, methods: { / ......
vue3 实现移动端h5多个输入框填入验证码功能（非常简单）
使用一个输入框来获取数据，再用一组div来展示数据 用一个input 遮在展示内容的框上，给input设置opacity：0，用户每次输入的值拿到后依次展示在框内，如果用户输入或者删除就直接体现在展示框上了。 页面内容： <ul class="lists" ref="inputs"> <li cla ......
Vue3 组件篇
## 组件命名 组件的命名一般分为两种 1. 在单文件组件中，推荐为子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。虽然原生 HTML 标签名是不区分大小写的，但 Vue 单文件组件是可以在编译中区分大小写的。我们也可以使用 /> 来关闭一个标签。 2. 使用 ke ......
vue3之element-plus
1.安装elementPlus和自动导入插件 npm i elementPlus npm install -D unplugin-vue-components unplugin-auto-import 2、配置自动按需导入 // 引入插件 import AutoImport from 'unplug ......
Vue3使用问题
1.watch:{immediate: true}执行时间晚于onMounted 2.定义数组响应式 2.1错误： import { reactive } from 'vue'; let arr = reactive([]) function change(){ let newArr = [1,2, ......
Vue3.0 页面跳转的几种方式
首先引入 import { useRouter } from "vue-router"; 使用router接收useRouter const router = useRouter(); 1. router.push 我们最常用的 router.push 方法会将新的路由添加到历史记录中，同时会导航到 ......
Vue3组件二次封装
# naive-ui的n-input举例 ``` //import { useAttrs, useSlots } from 'vue' //const slots = useSlots() //const attrs = useAttrs() ``` ......