Vue
笔记记录
lybinWeb
这个作者很懒,什么都没留下…
展开
-
【MVC】对比前端MVC与后端MVC、基于MVC思想实现计算器案例
代码】【MVC】对比前端MVC与后端MVC、基于MVC思想实现计算器案例。原创 2022-08-08 11:31:48 · 502 阅读 · 0 评论 -
【导出PDF】html2canvas jspdf导出PDF
代码】【导出PDF】html2canvasjspdf导出PDF。原创 2022-07-29 12:48:44 · 448 阅读 · 3 评论 -
vue-router实现history模式配置(生产环境路由失效跟刷新404问题)
使用history模式通常本地调试没有什么问题,但是一旦发布到测试或生产环境,则会出现页面白屏或者刷新页面白屏的现象,这种问题的出现是因为前端和服务端没有做相应的配置。location/test-daily表示项目部署在了/test-daily目录下,这里要跟vue.config.js里的publicpath的值保持一致。原文链接https//blog.csdn.net/ZhushiKezhang/article/details/122843264。test-daily是你是项目包名。...原创 2022-07-27 10:53:30 · 1348 阅读 · 0 评论 -
【vue elementUI DatePicker 日期选择器自定义禁用状态】当前月跟上个月之外的时间只能选择整月、获取每个月份的最后一天
【vue elementUI DatePicker 日期选择器自定义禁用状态】当前月跟上个月之外的时间只能选择整月原创 2022-06-24 15:58:31 · 1119 阅读 · 0 评论 -
【vue elementUI 动态列表合并单元格】table表格中动态合并行跟列
在项目中的table表格中遇到了动态合并单元格的需求,而element组件中只是静态合并单元格,于是就有了如下解决方案:需求解决方案// 使用到了elementUI中的table表格组件:<el-table :data="list" :span-method="objectSpanMethod" :header-cell-style="{'text-align': 'center'}" style="width: 100%">用到了该属性:span-me原创 2022-05-17 16:31:00 · 1652 阅读 · 0 评论 -
【vue2.x extend()】使用Vue.extend()封装自定义弹窗组件
前言Vue.extend()是什么?在vue2.x中,被用于创建一个基于Vue构造函数的子类,其参数应为一个包含组件选项的对象。使用Vue.extend()可以做什么?比如,我们需要封装一个弹窗组件,该弹窗组件的DOM结构不可以在根app节点下面,他要跟根app节点平级,那么就需要到Vue.extend()才可以实现。使用Vue.extend封装弹窗组件效果展示代码编写组件目录:- components - MyUI 组件库 - MessageBox 弹框组件 -原创 2022-03-21 11:36:28 · 1808 阅读 · 1 评论 -
【vue 导出功能】file-saver插件
文章目录vue 导出功能(file-saver插件)1、导出插件的安装2、导出功能函数封装3、工具函数4、拦截器vue 导出功能(file-saver插件)1、导出插件的安装安装"file-saver": "2.0.5"插件:npm i --save file-saver2、导出功能函数封装import axios from 'axios'import { saveAs } from 'file-saver'axios.defaults.headers['Content-Type'] =原创 2022-02-24 16:45:28 · 5359 阅读 · 0 评论 -
【vue2.x ElementUI】 分页组件封装
文章目录vue2.x ElementUI 分页组件封装1、Pagination.vue2、组件的使用3、扩展(工具函数 scrollTo)vue2.x ElementUI 分页组件封装1、Pagination.vue/** * 分页组件 * @param currentPage 当前页 * @param pageSize 当前页数据条数 * @param total 总条数 * * @custom 自定义事件 handleSizeChange 当前页显示条数改变后的回调 * @cust原创 2022-02-24 16:44:17 · 1144 阅读 · 0 评论 -
【Vue2.0|3.0 组件加载】按需加载
文章目录v2 方法一:install的方式按需加载组件全局导入组件创建组件出口文件index.jsv2 方法二:解构的方式加载全局组件导入出口文件index.jsv3 下拉框组件组件导入组件搭建组件加载跟Vue2.0写法一样v2 方法一:install的方式按需加载组件全局导入组件mian.jsimport MyUI from '../modules/my-ui';Vue.use(MyUI, { components: [ 'MyButton', 'MyInput' ]});原创 2022-01-10 15:50:50 · 893 阅读 · 0 评论 -
【vue深度知识】响应式相关方法
var vm = new Vue({ data() { return { a: 1, b: 2 } }})function Vue(options) { var _data = options.data(), _this = this; for(var k in _data) { (function(k) { Object.defineProperty(_this, k, { get() { console.log('GET:' + .原创 2021-12-15 14:37:57 · 496 阅读 · 0 评论 -
【前端小知识】vue打包优化
webpack 打包后生成一个页面,需要在package.json中修改build命令为vue-cli-service build --report安装一个用来分析webpack打包结果的插件--save-dev webpack-bundle-analyzer新建vue打包文件vue.config.js <!-- 配置configureWebpack --> const bp = require('webpack-bundle-analyzer').BundleAnalyzerP.原创 2021-12-13 09:43:28 · 309 阅读 · 0 评论 -
【前端小知识】vue的publicPath
publicPath配置项目请求根路径配置项目在打包后,需要改变访问根路径在该目录下vue.config.js进行配置// 项目根目录下的vue.config.js文件export default { publicPath: process.env.NODE_ENV === 'production' ? './' : '/'}...原创 2021-12-13 09:40:51 · 1222 阅读 · 2 评论 -
【前端小知识】vue的install、use方法
install/use自定义组件时,使用的方法注册组件import ... // 导入自定义组件const components = [ MyButton, // 声明组件名称]const MyUI = { install(Vue) { // 注册组件 components.forEach(component => { Vue.component(component.name, component) }) }}export defa原创 2021-12-13 09:37:24 · 694 阅读 · 0 评论 -
【前端小知识】vue环境变量
认识环境变量1、访问环境变量process.env2、自定义环境变量在项目根目录下创建.env文件,进行自定义环境变量比如:VUE_APP_MY_NAME = ‘小野哈默’3、配置环境变量(生产环境跟开发环境)const env = process.env.NODE.ENV;const config = { development: { baseURL: '', }, production: { baseURL: '', }}exprot defa原创 2021-12-13 09:34:23 · 389 阅读 · 0 评论 -
【vue2.0 路由权限】动态路由权限渲染
文章目录前后端搭建后端处理跨域数据表路由接口前端静态页面布局请求前端处理路由树形结构vuex在`mianjs`中配置路由守卫前后端搭建后端使用koa2搭建处理跨域使用到了koa2-cors npm包app.js:app.use(cors({ origin: function(ctx) { return 'http://localhost:8080'; }}))数据表路由表:后台路由表中:pid是父级的idmodule.exports = [ {原创 2021-12-10 17:30:12 · 934 阅读 · 0 评论 -
【vue2.0/3.0 封装UI组件库之业务必备】五星好评
文章目录vue2.0实现搭建UI组件库并引入五星好评组件业务逻辑开发vue3.0实现`Stars.vue``hooks`vue2.0实现搭建UI组件库并引入在main.js中引入组件并使用import myUI from './libs/myUI';Vue.use(myUI)创建组件实现组件的出口 index.jsimport Stars from './components/Stars';const myUI = {};// UI组件池const componentPoo原创 2021-12-06 15:08:27 · 484 阅读 · 0 评论 -
【WebSocket 聊天室实现】核心业务代码(原生Javascrip、Vue2、Vue3分别实现)
文章目录前言原生JavaScript实现前端entry.htmlentry.jsindex.htmlindex.js后端Vue2实现Vue3实现config/index.jshooks/index.jshooks/websocket.jsrouter/index.jshome.vuelogin.vue完整项目gitee地址使用 ws 库来实现后台逻辑前端使用 vite 来进行项目管理前言websocket基本知识储备如下:## websocket 1. open 2. close 3.原创 2021-12-01 17:33:43 · 1225 阅读 · 0 评论 -
【vue组件化开发】tab选项卡
gitee地址原创 2021-11-09 11:34:32 · 117 阅读 · 0 评论 -
【vue父组件点击按钮触发子组件的事件】使用$refs动态的将父组件数据传递到子组件中
父传之使用$refs父组件的button元素绑定click事件,该事件指向notify方法给子组件注册一个ref=“child”父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方同时携带着父组件中的参数msg子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中父组件<template> <div id="app"> <!--父组件--> <原创 2021-10-21 10:19:02 · 1545 阅读 · 0 评论 -
通俗易懂登录退出功能
<script type="text/javascript"> if (window !== top) { top.location.href = location.href; } layui.use(['form', 'layer'], function () { var $ = layui.jquery, form = layui.form, layer = layui.layer, element = layui.element, t原创 2021-06-02 19:12:27 · 1040 阅读 · 0 评论 -
【vue动态路由参数的坑】动态路由传参时路由变化页面没有变化解决方案
动态路由参数的坑在跳路由:/user/1 到 /user/2中,id由1变为2,视图中的id还是1,没有变为2解决方案使用watch解决watch: { $route(to,from) { this.id = to.params.id }}使用beforeRouteUpdate解决beforeRouteUpdate(to, from) { this.id = to.params.id}...原创 2021-09-15 18:51:06 · 844 阅读 · 0 评论 -
【vue异步组件与路由懒加载】异步组件的使用跟首屏加载使用路白屏由懒加载方案优化问题
vue异步组件的使用创建一个异步组件工程函数const AsyncList = () => { component: import('./list'), // 需要使用异步组件写法的组件 loading: LoadingComponent, // 加载中状态的组件 error: ErrorComponent, // 请求失败的组件 delay: 200, // 延迟时间 timeout: 3000 // 超时时间}模板里引入components: { List: () =&原创 2021-09-15 18:33:21 · 185 阅读 · 0 评论 -
【axios请求配置】
axios.createimport queryString from 'queryString'var HTTP = axios.create({ baseUrl:'http://.....', timeout:1000, responseType:'json', params:{ }, headers:{ 'content-type':'application/x-www-form-urlencoded' }, transformRequest:[function(data){原创 2021-09-06 21:11:48 · 74 阅读 · 0 评论 -
【vue懒加载】使用Vue异步组件配合webpack代码分割实现懒加载
Vue异步组件components: { headerNav: (resolve) => { setTimeout(() => { resolve(require('@/components/header')) }, 1000) } },webpack代码分割(2.x版本)// 写法一const Layout = (resolve) => { return require.ensure([], () => {原创 2021-09-06 19:07:08 · 135 阅读 · 0 评论 -
【vue插件编写】
文章目录使用Vue.prototype注册注册在不同的组件中使用使用Vue.use()注册注册在不同组件中使用在项目中,我们在各个组件中使用自己封装好的utils工具类函数,我们需要一一导入他们,为了提高效率,我们可以将他注册到全局中比如:vueRouter你在全局注册了,以后在每个组件中都可以使用this.$router来访问到他,同理我们可以将自己写的工具类注册到全局中~使用Vue.prototype注册注册// main.jsVue.prototype.$text = '自定义属性'原创 2021-09-06 13:59:36 · 67 阅读 · 0 评论 -
【vue导航钩子函数】拦截导航
文章目录基本概念执行钩子函数位置钩子函数钩子函数接受的参数使用router实例上的简单实例单个路由上的简单实例组件实例中基本概念导航发生变化时,导航钩子主要用来拦截导航,让他完成跳转或取消执行钩子函数位置router全局单个路由组件中钩子函数router实例上:beforeEach\afterEach单个路由中:beforeEnter组件内的钩子:beforeRouteEnter\beforeRouteUpdate\beforeRouteLeave钩子函数接受的参数to原创 2021-09-06 12:20:39 · 259 阅读 · 0 评论 -
【vue组件通信】父子通信、非父子通信、本地缓存通信、vuex通信等
四大组件通信方式文章目录一、父子通信1、父传子使用props直接在子组件中使用`this.$parent`调用父组件,但是不建议2、子传父使用自定义事件`$emit`使用`$refs`二、任意组件及平行组件通信`event Bus`通信三、本地缓存通信四、vuex通信一、父子通信1、父传子使用props// parentMsg:要给子组件传递的值<input type="text" v-model="parentMsg">// child 子组件<child :my.原创 2021-09-04 13:11:46 · 351 阅读 · 0 评论 -
【vueRouter路由跳转 之 router-link 详解】hash模式跟history模式区别 (a标签跳转跟router-link标签跳转注意事项)
vueRouter之router-link记录文章目录一、hash模式1、a标签跳转2、`router-link`标签跳转**写法****点击的切换的时候生成DOM元素****event属性****匹配不到的路由配置**路由别名`alias`精确匹配`exact`**修改router-link样式**router-link嵌套a标签默认子路由URL中显示二级路由的时候不要一级路由显示**动态绑定**命名视图前进后退缓存滚动条位置前进后退定位到hash锚点上动态路径参数监控`$route`变化quer.原创 2021-09-03 18:34:32 · 811 阅读 · 1 评论 -
【vue路由传参】vue自带方法路由传参方式、页面跳转带id过去、刷新页面数据不丢失、隐藏URL后的参数 详细教程
文章目录vue路由传参方式一、页面刷新数据会丢失方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数*该方法可以隐藏URL后的参数方法二:使用Vue全局API:Vue.observable二、页面刷新数据不会丢失方法一:使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数方法二:使用path匹配路由,通过query传参vue路由传参方式项目中很多情况下都需要进行路由之间的传值,想过很多种方式sessionstorage/localstorage/cook原创 2021-08-29 16:42:39 · 5746 阅读 · 3 评论 -
【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学
文章目录vue分页功能实现一、直接上代码二、需要注意的事项vue分页功能实现一、直接上代码// 列表结构// 重点:data="pageList"<el-table :data="pageList" :cell-style="fileNameStyle" tooltip-effect="dark" style="width: 100%"></el-table>// 分页结构// handleSizeChange: 每页的条数切换方法// curr原创 2021-08-27 13:12:42 · 1038 阅读 · 0 评论 -
【vue样式穿透】vue中css样式不生效的原因及解决方式
vue样式穿透简单易懂快速解决问题传送门详细介绍样式穿透传送门方法一、在类名前加>>>实现样式穿透方法二、在类名前加/deep/实现样式穿透原创 2021-08-26 12:10:46 · 2367 阅读 · 0 评论 -
【Vue全局API】跨组件状态存储器Vue.observable(object)简单上手
文章目录作用使用案例1、新建store.js2、组件A 中将想要传递的数据放到store中3、组件B 中使用 组件A 传递过来的数据,在store中取出作用让一个对象可响应,返回的对象可以直接用于渲染函数跟计算属性内。使用案例1、新建store.js// store.jsimport Vue from 'vue'/** * 项目管理中项目名称存放到store中,在别的组件中引用 * @prearms name:项目管理项目名称 */export let store = Vue.ob原创 2021-08-19 11:34:13 · 311 阅读 · 0 评论 -
eslint格式化报错(解决不了送女盆友)
一、在根目录下创建.prettierrc文件{ "tabWidth": 4, "semi": false, "singleQuote": true, "trailingComma": "none",}如果还是不行请继续进行下边的步骤一般情况修改这几项就够了二、修改.eslintrc.js文件将'@vue/standard'给注释三、修改package.json将lint修改为:"lint": "eslint --fix --ext .js,.vue sr原创 2020-11-25 10:35:53 · 559 阅读 · 0 评论 -
简简单单学会Vuex
Vuex文章目录Vuex一、Vuex 的基本使用1.安装vuex依赖包2.导入vuex包3.创建store对象4. 将 store 对象挂载到 vue 实例中二、Vuex 的核心概念3.1 核心概念概述3.2 State3.3 Mutation3.4 Action3.5 Getter三、基于Vuex实现简单的计算器项目源码:一、Vuex 的基本使用1.安装vuex依赖包npm install vuex --save2.导入vuex包import Vuex from 'vuex'Vue.use原创 2020-11-15 08:12:39 · 190 阅读 · 0 评论 -
【vue报错问题】vue ui 创建项目解决eslint格式化问题
修改.eslintrc.js文件在eslintrc.js中的rules规则中添加:'space-before-function-paren': 0在项目根目录增加.prettierrc文件并添加:{ "semi":false, "singleQuote":true, "trailingComma": "none", "tabWidth": 4,}原创 2020-11-12 20:01:12 · 872 阅读 · 0 评论 -
【vue项目】电商PC后台管理系统(Element-Ul)
电商PC后台管理文章目录电商PC后台管理1.项目概述1.1电商项目基本业务概述1.2电商后台管理系统的功能1.3电商后台管理系统的开发模式(前后端分离)1.4电商后台管理系统的技术选型1.前端项目技术栈2.后端项目技术栈2.项目初始化2.1前端项目初始化步骤2.2后台项目的环境安装配置3.登录/退出功能3.1登录概述1.登录业务流程2.登录业务的相关技术点3.2登录 —— token 原理分析3.3登录功能实现1.登录页面的布局2.Login.vue 文件解读3.路由导航守卫控制访问权限3.4退出退出功能原创 2020-11-12 11:25:44 · 877 阅读 · 0 评论 -
【vue案例】vue实现后台管理路由
vue实现后台管理路由文章目录vue实现后台管理路由前言一、准备静态模板二、根据项目整体布局划分组件结构1、抽离并渲染App根组件2、将左侧导航改为路由链接3、创建左侧菜单对应的路由组件4、添加到右侧主体区域添加路由占位符:5、添加子路由规则6、通过路由重定向默认渲染指定用户组件7、渲染用户列表数据8、编程式导航跳转到用户详情页9、回退功能三、完整代码前言首先,看下我们基于Vue-Router实现的后台管理路由具体效果:一、准备静态模板<!DOCTYPE html><html原创 2020-11-07 08:24:05 · 2864 阅读 · 1 评论 -
【vue详细笔记】Vue CLI(vue脚手架创建项目、Element-UI基本使用)
Vue CLI(vue 脚手架)文章目录Vue CLI(vue 脚手架)前言一、vue脚手架基本用法安装升级交互式命令行创建一个项目使用图形化界面方式创建一个项目二、Vue 脚手架的自定义配置1.通过 `package.json` 配置项目2.通过单独的配置文件配置项目Element-UI 的基本使用1.基于命令行方式手动安装2.基于图形化界面自动安装前言vue脚手架用于快速生成vue项目基础架构一、vue脚手架基本用法安装Node 版本要求Vue CLI 4.x 需要 Node.js v8原创 2020-11-05 14:47:06 · 1018 阅读 · 0 评论 -
【vue详细笔记】vue-Router路由
vue Router路由文章目录vue Router路由一、路由1、后端路由2、SPA3、前端路由4、实现简单的前端路由二、Vue Router1、包含的功能2、基本使用步骤3、路由重定向4、嵌套路由5、动态路由规则$route方式props的值为布尔值方式props的值为对象方式props的值为函数6、命名路由的配置规则7、编程式导航声明式导航编程式导航`this.$router.push('hasn地址')``this.$router.go(n)`一、路由是一个比较广义和抽象的概念,路由的本质就是原创 2020-11-05 08:13:24 · 388 阅读 · 0 评论 -
【vue详细笔记】vue之前后端交互(promise、fetch、axios)
vue前后端交互文章目录vue前后端交互一、前后端交互模式1、接口调用方式2、URL地址格式3、Restful形式的URL二、Promise1、异步调用异步效果分析2、Promise三、fetch1、基本特性2、语法3、fetch请求参数常用配置选项GET请求参数传递DELETE请求参数传递POST请求参数传递PUT请求参数传递4、fetch响应结果四、axios1、axios基本用法2、axios请求参数GET请求参数传递DELETE请求参数传递POST请求参数传递PUT请求参数传递3、axios的响应原创 2020-11-05 08:10:40 · 465 阅读 · 0 评论