vue 项目
关注
分享
扫一扫
江-月*夜
喜欢分享项目用到的知识。也方便我日后用到直接复制修改
展开
-
js 二进制流下载Excel文件
js 下载excel文件原创 2023-01-10 17:46:25 · 1046 阅读 · 1 评论 -
js 二进制流转换base64图片
js 二进制转banse64原创 2023-01-09 10:28:07 · 2413 阅读 · 0 评论 -
vue-router 导航重复点击报错的问题解决
vue-router 导航重复点击报错的问题解决原创 2022-08-01 16:48:52 · 482 阅读 · 0 评论 -
vue2.x树状结构（递归）
一、数据结构(无限级)二、父组件样式公共部分点这里 https://blog.youkuaiyun.com/qq_36529240/article/details/123506889<div class="anwer-box"> <TreeList :treeItem="treeItem" @anwerShow="anwerShow" @anwerMyClick="anwerMyClick" @problemaZan="problemaZan"原创 2022-05-23 14:47:06 · 673 阅读 · 1 评论 -
vue 时间转换几分前 几小时前 几天前 几月前 年前
一、在vue 新建文件 formatTime.jsexport function timeago (time) { var data = new Date(time); var dateTimeStamp = data.getTime() var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示 var hour = minute * 60; var day = hour * 24; var week = day * 7; var原创 2022-05-20 10:30:59 · 892 阅读 · 0 评论 -
js 将数组拆分多个
//将数组拆分多个 group(array = [], subGroupLength = 0) { let index = 0 const newArray = [] while (index < array.length) { newArray.push(array.slice(index, (index += subGroupLength))) } return newArray },调用this.原创 2022-05-06 16:21:35 · 316 阅读 · 0 评论 -
vue-router 指定向 动态路由 正则 匹配404
设置指定向 动态路由 正则 匹配404。index.js 代码。原创 2022-04-29 11:34:45 · 1193 阅读 · 0 评论 -
vue2.x+element-ui 选择面试时间（只能单选）
一，安装（自己安装，不贴代码了）二、如图只能选择可选择部分，空白部分不能点击，通过后台返回指定日期（可以根据项目修改代码）三、代码html部分:<div class="interview-time"> <div class="dis-flex justify-center"> <div class="week-time justify-center dis-flex items-center"> <i cl原创 2022-04-19 09:32:01 · 994 阅读 · 0 评论 -
vue+element-ui 省市区三级联动（返回汉字）
一安装npm install element-china-area-data -S二、导入import { regionData, CodeToText} from "element-china-area-data"我们默认地址是汉字不是编码（编码就默认）如图：三、代码<html> <head></head> <body> <template> <div id="app"> <div&原创 2022-03-29 10:30:50 · 2382 阅读 · 1 评论 -
vue2.x+element-ui 选择面试时间(多选)
选择面试时间(每半小时自动插入)，不论上周和下周时间，统一都是当前半小时插入一行比如时间00:00插入一行，时间 00:30插入一行，以此类推…一、html我用了是弹性和模型布局基本样式可以看这里<template> <div class="interview-time"> <div class="dis-flex justify-center"> <h2>候选人选择面试时间</h2> </div&g原创 2022-03-16 15:56:38 · 770 阅读 · 0 评论 -
基于Vue2.x+xterm4.x实现终端terminal
一、安装npm install --save xterm xterm-addon-fit xterm-addon-attachxterm-addon-fitxterm.js的插件，使终端的尺寸适合包含元素。xterm-addon-attachxterm.js的附加组件，用于附加到Web Socket二、代码<template> <div class="box"> <div id="xterm" class="xterm-box">&原创 2022-03-11 16:13:28 · 2007 阅读 · 2 评论 -
vue2.x+element-ui表单验证
第一种常用方式：表单上加rules｛object｝<el-form class="form" :model="form" :rules="rule" ref="form"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input> </el-form-item> &l原创 2022-03-04 10:26:30 · 490 阅读 · 0 评论 -
vue-cli4.x使用Font Awesome 5版本
一、安装我用的是免费版的npm install --save-dev @fortawesome/fontawesome-free查看版本在项目中scss文件(如style.scss)中引入fontawesome-free@import ".@fortawesome/fontawesome-free/scss/fontawesome.scss";@import "@fortawesome/fontawesome-free/scss/brands.scss";@import "@fortawe原创 2022-01-25 11:15:27 · 1293 阅读 · 0 评论 -
第25天 Vue 说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；缺原创 2022-01-12 14:43:49 · 137 阅读 · 0 评论 -
第22天 javascript 从浏览器地址栏输⼊url到显示⻚⾯的步骤
浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构 （如 HTML 的 DOM ）；载⼊解析到的资源⽂件，渲染⻚⾯，完成。...原创 2022-01-06 11:36:33 · 524 阅读 · 0 评论 -
第22天 Vue computed 实现？ Vue complier 实现？
1.computed建⽴与其他属性（如： data 、 Store ）的联系；属性改变后，通知计算属性重新计算初始化 data ， 使⽤ Object.defineProperty 把这些属性全部转为getter/setter 。初始化 computed , 遍历 computed ⾥的每个属性，每个 computed 属性都是⼀个watch 实例。每个属提供的函数作为属性的 getter ，使⽤Object.defineProperty 转化。Object.defineProperty get原创 2022-01-06 09:57:52 · 218 阅读 · 0 评论 -
第22天 Vue 组件 data 为什么必须是函数
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同⼀个引⽤类型的值时，改变其中⼀个会影响其 他原创 2022-01-06 09:51:34 · 189 阅读 · 0 评论 -
第22天 Vue 说说NextTick？vue的优点是什么？
1.NextTicknextTick 可以让我们在下次 DOM 更新循环结束之后执⾏延迟回调，⽤于获 得更新后的 DOM2.优点低耦合。视图（ View ）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不 同的 “View”上，当View变化的时候Model可以不变，当 Model 变化的时候 View 也可 以不变可重⽤性。你可以把⼀些视图逻辑放在⼀个 ViewModel ⾥⾯，让很多 view 重⽤这段视 图逻辑可测试。界⾯素来是⽐较难于测试的，⽽现在测原创 2022-01-06 09:47:01 · 255 阅读 · 0 评论 -
第22天 Vue ＜keep-alive＞＜/keep-alive＞ 的作⽤是什么? v-el的作⽤是什么
1.keep-alive<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要⽤于保留 组件状态或避免重新渲染⽐如有⼀个列表和⼀个详情，那么⽤户就会经常执⾏打开详情=>返回列表=> 打开详情…这样的话列表和详情都是⼀个频率很⾼的⻚⾯，那么就可以对列表 组件使⽤ 进⾏缓存，这样⽤户每次返回列表的 时候，都能从缓存中快速渲染，⽽不是重新渲染2.v-el提供⼀个在⻚⾯上已存在的 DOM 元素作为 Vue 实例的挂载⽬标.可以原创 2022-01-06 09:43:31 · 169 阅读 · 0 评论 -
第21天 Vue路由$route 和 $router 的区别
$route 是“路由信息对象”，包括 path ， params ， hash ， query ， fullPath ， matched， name 等路由信息参数。⽽ $router 是“路由实例”对象包括了路由的跳转⽅法，钩⼦函数等原创 2022-01-06 09:06:44 · 149 阅读 · 0 评论 -
第21天 vuex是什么？怎么使⽤？哪种功能场景使⽤它？
只⽤来读取的状态集中放在 store 中； 改变状态的⽅式是提交 mutations ，这是个同步 的事物； 异步逻辑应该封装在 action 中。在 main.js 引⼊ store ，注⼊。新建了⼀个⽬录 store ， … export*场景有：单⻚应⽤中，组件之间的状态、⾳乐播放、登录状态、加⼊购物⻋1.vuexstate ： Vuex 使⽤单⼀状态树,即每个应⽤将仅仅包含⼀个 store 实例，但单⼀状态 树和模块化并不冲突。存放的数据状态，不可以直接修改⾥⾯的数据。mutation.原创 2022-01-05 15:12:32 · 134 阅读 · 0 评论 -
第21天 Vue路由
vue路由的钩⼦函数⾸⻚可以控制导航跳转， beforeEach ， afterEach 等，⼀般⽤于⻚⾯ title的修改。⼀些需要登录才能调整⻚⾯的重定向功能。全局前置守卫const router = createRouter({ ... })router.beforeEach((to, from) => { // ... // 返回 false 以取消导航 return false})beforeEach 主要有3个参数 to ， from ， next 。t原创 2022-01-05 15:09:27 · 90 阅读 · 0 评论 -
第21天 Vue实现数据双向绑定的原理：Object.defineProperty()
vue 实现数据双向绑定主要是：采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布 消息给订阅者，触发相应监听回调。当把⼀个普通 Javascript对象传给 Vue 实例来作 为它的 data 选项时，Vue 将遍历它的属性，⽤ Object.defineProperty() 将它们转为 getter/setter 。⽤户看不到 getter/setter ，但是在内部它们让 Vue 追.原创 2022-01-05 15:08:39 · 115 阅读 · 0 评论 -
第20天 Vue keep-alive 组件有什么作⽤
如果你需要在组件切换的时候，保存⼀些组件的状态防⽌多次渲染，就可以使⽤ keepalive 组件包裹需要保存的组件。对于keep-alive 组件来说，它拥有两个独有的⽣命周期钩⼦函数，分别为 activated 和 deactivated 。⽤ keep-alive 包裹的组件在切换时不会进⾏销毁，⽽是缓存到内 存中并执⾏ deactivated 钩⼦函数，命中缓存渲染后会执⾏actived 钩⼦函数。...原创 2022-01-04 08:47:38 · 226 阅读 · 0 评论 -
第20天 Vue computed 和 watch 区别
computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计 算值变化才会返回内容。watch 监听到值的变化就会执⾏回调，在回调中可以进⾏⼀些逻辑操作。所以⼀般来说需要依赖别的属性来动态获得值的时候可以使⽤ computed，对于监听到值 的变化需要做⼀些复杂业务逻辑的情况可以使⽤ watch 。另外 computer 和 watch 还都⽀持对象的写法，这种⽅式知道的⼈并不多。vm.$watch('obj', { // 深度遍历 deep: true,.原创 2021-12-31 15:21:15 · 149 阅读 · 0 评论 -
第20天 vue组件通信
⽗⼦组件通信兄弟组件通信跨多层级组件通信⽗⼦通信⽗组件通过 props 传递数据给⼦组件，⼦组件通过 emit 发送事件传递数据给⽗组件， 这两种⽅式是最常⽤的⽗⼦通信实现办法。这种⽗⼦通信⽅式也就是典型的单向数据流，⽗组件通过 props 传递数据，⼦组件不能 直接修改 props ，⽽是必须通过发送事件的⽅式告知⽗组件修改数据。另外这两种⽅式还可以使⽤语法糖 v-model 来直接实现，因为 v-model 默认会解析成 名为 value 的 prop 和名为 input 的事件..原创 2021-12-31 15:18:32 · 192 阅读 · 0 评论 -
第20天 前端路由原理
前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的⻚⾯，并且⽆须刷新⻚⾯。⽬前前端使⽤的路由就只有两种实 现⽅式1. Hash 模式www.test.com/#/ 就是 Hash URL ，当 # 后⾯的哈希值发⽣变化时，可 以通过 hashchange 事件来监听到URL 的变化，从⽽进⾏跳转⻚⾯，并且 ⽆论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.comwindow.addEventListener('hashchange.原创 2021-12-31 15:13:44 · 218 阅读 · 0 评论 -
第20天 虚拟DOM
⼤家都知道操作 DOM 是很慢的， 那么相较于 DOM 来说，操作 JS 对象会快很多，并且我们也可 以通过 JS 来模拟 DOMconst ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li', children: '1' } } //上述代码对应的 DOM 就是 <ul class='list'> <li>1</li></ul>那么既然 DOM原创 2021-12-31 15:10:17 · 170 阅读 · 0 评论 -
第20天 Vue 对MVVM理解
在 MVVM 架构中，引⼊了 ViewModel 的概念。 ViewModel 只关⼼数据和业务的处 理，不关⼼ View如何处理数据，在这种情况下， View 和 Model 都可以独⽴出来，任何⼀⽅改变了也不⼀定需要改变另⼀⽅，并且可以将⼀些可复⽤的逻辑放在⼀个 ViewModel 中，让多个 View 复⽤这个ViewModel以 Vue 框架来举例， ViewModel 就是组件的实例。 View 就是模板， Model 的话在 引⼊ Vuex的情况下是完全可以和组件分离的。.原创 2021-12-31 15:04:05 · 429 阅读 · 0 评论 -
vite2.x+vue3 百度地图绘制
1.提示：同理可以做其他绘制vite2.x+vue3安装忽略前面有安装介绍https://editor.youkuaiyun.com/md/?articleId=120757440vue3 百度地图和高德地图目前没有vue3的版本百度地图提供了用链接方式做https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld2.效果图在index.html文件上添加百度地图<script type="text/javasc原创 2021-12-03 14:47:42 · 2022 阅读 · 1 评论 -
vue2.x+vue-baidu-map实现搜索地点
一安装 npm install vue-baidu-map --save二 main.jsimport BaiduMap from "vue-baidu-map";Vue.use(BaiduMap, { ak: "**你的key**",});三、我用的是element,安装的话，前面有。Map.vue代码：<template> <div class="app-container"> <el-autocomplete v-model原创 2021-10-28 17:36:46 · 152 阅读 · 0 评论 -
vite3.x+vue3.x项目搭建五-vuex篇
一、安装npm install vuex@next --saveoryarn add vuex@next --save二、main.jsimport { createApp } from 'vue'import App from './App.vue'import router from "./router"import store from "./store"import ElementPlus from 'element-plus'import 'element-plus/dist原创 2021-10-14 14:43:38 · 416 阅读 · 0 评论 -
vite2.x+vue3.x项目搭建四-element-plus篇
一、安装 npm install element-plus --save or yarn add element-plus npm install unplugin-vue-components vite。config.js用到，详细看element-plus官网二、main.jsimport { createApp } from 'vue'import App from './App.vue'import router from "./router"import ElementPlu原创 2021-10-14 11:45:52 · 383 阅读 · 2 评论 -
vite2.x+vue3.x项目搭建三-axios篇
一、安装axiosnpm install axiosnpm install qs二、新建unit文件夹，并新建axios.js http.js1.axios.jselement-plus 这个提前安装了，下一篇再写上// 导入axiosimport axios from "axios";// 使用element-plus Message做消息提醒import { Message } from "element-plus";//1. 创建新的axios实例，const service原创 2021-10-14 11:31:16 · 1063 阅读 · 0 评论 -
vite2.x+vue3.x项目搭建二-sass篇
一、安装sassnpm install --save-dev sass-loader sass二、新建style.scss文件三、在vite.config.js或者vite.config.ts添加css: { //css预处理 路径最后要加上;不然会报错 preprocessorOptions: { scss: { additionalData: '@import "@/assets/scss/style.scss";', }, }原创 2021-10-14 10:37:58 · 1174 阅读 · 1 评论 -
vite4.x+vue3.x项目搭建一vue-router
vite2.x+vue3.x项目搭建一vue-router原创 2021-10-14 10:08:03 · 900 阅读 · 0 评论 -
vue 百度地图 3d地图
效果图在这里插入图片描述一、新建js文件（3dmap.js）const ak = '你的百度地图秘钥' // 百度的地图密钥申请 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey/** * 异步加载百度地图 * @returns {Promise} * @constructor */function loadBaiDuMap() { return new Promise(function (reso原创 2021-09-09 14:59:14 · 2720 阅读 · 8 评论 -
vue 中echarts5.x 引入方式
一安装npm install echarts --save二、全局引入（main.js） import * as echarts from 'echarts' Vue.prototype.$echarts = echarts; 新建echarts.vue文件<template> <div> <div :id="chartId" style="{ width: 500px, height: 500px}"></div> <原创 2021-08-19 11:57:57 · 3622 阅读 · 0 评论 -
vue-baidu-map自定义颜色
一、自定义样式data() { return { //自定义地图颜色 styleJson: [ { featureType: "water", elementType: "all", stylers: { color: "#021019", }, }, { featureType: "highway",原创 2021-08-16 09:34:44 · 2394 阅读 · 0 评论 -
vue-baidu-map 绘制多边形
一、效果图二、安装百度地图npm install vue-baidu-map --save// 或者yarn install vue-baidu-map三、main.js引入import BMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: '*******'})```s四代码<templ原创 2021-08-10 09:26:20 · 1170 阅读 · 0 评论