vue
南风number
好记性不如烂笔头
展开
-
前端路由的实现原理
前端路由实现原理原创 2024-04-22 09:38:02 · 399 阅读 · 0 评论 -
vue之elementui等表格单元格列合并
【代码】vue之elementui等表格单元格列合并。原创 2023-10-16 14:13:31 · 698 阅读 · 0 评论 -
vue实现 图片拖拽及鼠标滚轮放大缩小
vue实现 图片拖拽及鼠标滚轮放大缩小。原创 2023-08-01 21:50:38 · 1459 阅读 · 0 评论 -
vue3+ts实现给图片增加水印-自定义指令
vue3+ts实现给图片增加水印-自定义指令原创 2022-11-04 15:29:39 · 827 阅读 · 0 评论 -
vue实现动态组件按需引入 -批量
批量的方式-经验证不能使用computed 会导致死循环。总结 :核心是使用了 import()单独按需引入的动态组件。原创 2022-11-02 16:51:13 · 599 阅读 · 0 评论 -
vue前端解析导入实现
vue前端导入解析excel原创 2022-10-25 14:30:42 · 252 阅读 · 0 评论 -
vue前端实现导出excel方案,核心通用js
【代码】vue前端实现导出excel方案,核心通用js。原创 2022-10-25 11:19:16 · 380 阅读 · 0 评论 -
vue项目中pc端上拉加载实现
还可以使用 一个api IntersectionObserver。样式自己调整下,最外边盒子要可以滚动,高度可以不要靠自己撑开。分页逻辑在自己方法里处理。原创 2022-09-20 17:50:05 · 911 阅读 · 0 评论 -
element-UI的 Cascader 级联选择器 动态加载数据及回显
要回显,那么第一级要有数据,选中的第二级,第三级也要对应上比如省市区第一级所有省需要有,第二级,选择的省下的所有市,第三级,选择的所有的市下的区县,回显数据格式注意好,不对是回显不了的获取到所有省,判断要回显的省的id和当前省的id一样的,用这个省的id请求这个省的所有市,循环所有市,判断要回显的市的id,然后拿市的id请求所有区,最后给options赋值我这里是文字,存的时候就是文字,所以需要这样,如果是id,那就简单了,直接拿对应的id请求就行,就是组装好和写死的数据一样的格式就行...原创 2022-06-20 10:02:20 · 4436 阅读 · 2 评论 -
vue3实现echarts饼图自定义展示
效果:首先安装 echarts在需要的页面使用原创 2022-06-17 13:59:56 · 2180 阅读 · 0 评论 -
vue3+ts+vant移动端H5项目搭建
vue3+ts+vant移动端适配项目搭建原创 2022-06-14 14:15:24 · 2046 阅读 · 6 评论 -
vue源码解析-实现
一、真实DOM渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D原创 2022-05-24 09:18:06 · 1481 阅读 · 0 评论 -
vuese 的使用
1、全局安装yarn前提安装了node,jsnpm install -g yarn查看版本:yarn --version2、全局安装vuese/cliyarn global add @vuese/cli || npm i -g @vuese/cli3、快速开始假设你的项目结构如下:root├── src├──├── components├──├──├── Button.vue├──├──├── ButtonGroup.vue在 root 目录运行如下命令:vuese原创 2021-12-29 18:39:34 · 2503 阅读 · 0 评论 -
vuex4
vuex4是vue3的兼容版本,关注于兼容性、提供和vue3x相同的API,因此我们可以在vue3中复用之前已存在的vuex代码安装vuex4npm i vuex@next初始化方式为了向vue3初始化方式看齐,vuex4初始化方式做了相应变化:使用新的createStore函数创建新的store实例import {createApp} from 'vue'import {createStore} from 'vuex'import App from './App.vue'//1.创建s原创 2021-05-12 15:03:45 · 1342 阅读 · 0 评论 -
vue路由 vue-router4
路由vue-router4保持了大部分API不变,我们只关注变化部分即可。快速开始引入cdn<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script>npmnpm install vue-router@next原创 2021-05-12 14:43:11 · 1531 阅读 · 0 评论 -
vue3快速开始
快速开始cdn<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js"></script>vue-cli升级vue-cli v4.5npm i -g @vue/cli@next新建项目会有vue3选项vite使用vite体验更快速npm init vite-app <project-name>cd <project-name>npm installn原创 2021-05-08 16:13:52 · 362 阅读 · 4 评论 -
vue history项目 部署根域名子目录下
vue history项目 部署根域名子目录下//完整路径 http://baidu.com/h5const router = new VueRouter({ mode: "history", base: "/h5",//比如子目录是/h5 routes,});// vue.config.js 配置publicPath:"/h5"原创 2021-03-13 13:27:58 · 441 阅读 · 0 评论 -
vue 项目优化
1.代码层优化2.vue再v-for时给每项元素绑定事件需要用事件代理3.SPA页面采用keep-alive缓存组件4.拆分组件(提高复用性、增加代码的可维护性,减少不必要的渲染)5.v-fi当前值为false时内部指令不会执行,具有阻断功能,很多情况下用v-if替代v-show6.key保证唯一性(默认vue会采用就地复用策略)7.object.freeze 冻结数据8.合理使用路由懒加载、异步组件9.尽量采用runtime运行时版本10.数据持久化的问题(防抖、节流)vue加载性原创 2021-03-11 15:20:04 · 134 阅读 · 0 评论 -
vue 项目 H5接入微信sdk
安装npm install weixin-js-sdk//页面引入const $wx = require('weixin-js-sdk');//使用if (isWeixin()) {//此处封装的请求,可以换成axios,请求自己的接口参数传当前使用微信sdk的地址 weChat({ url: encodeURIComponent(location.href.split('#')[0]) }).then(res => { console.log(res原创 2021-03-11 10:36:32 · 2260 阅读 · 0 评论 -
vue-H5生成二维码
首先安装 npm install --save qrcode-vue<template> <div class="home"> //引用组件 <qrcode-vue id="qrcodeBox" :size="qrcodeVue.size" :value="qrcodeVue.value" :logo="qrcodeVue.logo" :bgColor="qrcodeVue.bgColor"原创 2021-03-04 16:44:06 · 802 阅读 · 1 评论