vue
lxslxskxs
书山有路勤为径,学海无涯苦作舟
展开
-
vue3使用防抖和节流
前端学习原创 2023-02-06 14:25:31 · 413 阅读 · 1 评论 -
vue路由props传递参数
路由props传参原创 2022-08-20 21:48:07 · 2847 阅读 · 0 评论 -
vue中手写一个发布订阅模式实现组件的通信
vue组件通信原创 2022-08-17 14:59:05 · 350 阅读 · 0 评论 -
vue中使用i18n
下载i18nyarn add -D vue0i18nsrc目录下新建 i18n文件夹(en.js和zh.js)en.jsimport Vue from "vue";import VueI18n from "vue-i18n";Vue.use(VueI18n) var locale = "cn"locale = localStorage.getItem("type") ? localStorage.getItem("type") : "zh"console.log("loca原创 2022-01-04 21:18:59 · 581 阅读 · 0 评论 -
vue-前端分页和后端分页实现
1:前端手写分页(数据量小的情况下)前端需要使用slice截取: tableData((page-1) * pageSize,page * pageSize)2:后端分页,前端只需要关注传递的page和pageSize了,这里就不一一赘述了3:前端手写分页按钮window.onload = function () { new Vue({ el: '#app', data: { params:{ page:1, pagesize:2原创 2021-12-30 22:18:34 · 6489 阅读 · 6 评论 -
vue实现todolist的增删改查
vue实现todolist的目录和效果图app.vue<template> <div id="app"> <div className='container'> <Inputs @addItem="addItem" @search="search"></Inputs> <List :list="list"></List> <Total @sendCheckAll=原创 2021-12-29 18:34:26 · 1322 阅读 · 0 评论 -
vue3-element-plus按需引入
项目目录下载element-plus yarn add -D element-plus新建plugins文件夹新建element-plus.js文件夹import { ElButton } from "element-plus";const components = [ElButton]export const componentsPlugin = app => components.forEach(app.use, app)import { Edit,Search } f原创 2021-12-19 22:03:07 · 813 阅读 · 0 评论 -
vue中简单使用mock.js
下载mock.jsyarn add -D mockjsutil下的mock.js import Mock from 'mockjs'const data = Mock.mock("/user","get",{ "userinfo|1-10":[{ "key|+1":1, "name":"@cname", "city":"@city", "age|18-28":25, "sex|1":["男","女"], "job|1":["原创 2021-12-19 17:09:44 · 415 阅读 · 0 评论 -
vue-路由
1:路由的两种模式1-1: hash和history模式 const router = new VueRouter({ mode: 'hash', base: process.env.BASE_URL, routes})1-2:hash和history区别hash带"#",history不带“#”hash 能兼容到IE8, history 兼容到 IE10;hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页原创 2021-12-17 21:38:30 · 262 阅读 · 0 评论 -
vue-cli配置
vue-cli配置原创 2021-12-14 19:49:35 · 1016 阅读 · 0 评论 -
前端-vue解决跨域问题
前端解决跨域问题新建server.js yarn add express const express = require("express")const app = new express();app.get('/user', function(request, response) { response.send('hello World')})app.listen(5000, function() { console.log("Server is running ....")}原创 2021-11-22 20:59:57 · 456 阅读 · 0 评论 -
vue3-element-plus
本地安装Vue3.0npm init -ynpm i @vue/cli # 安装脚手架项目搭建npx vue create project # 项目搭建,选择Vue3配置vue.config.js让项目运行的时候自动打开浏览器// vue.config.jsmodule.exports = { devServer: { open: true // 自动打开浏览器 }}安装element-pluscnpm install eleme.原创 2021-11-19 22:44:40 · 649 阅读 · 0 评论 -
vue组件通信的12种方式
##我们知道vue组件通信有很多种,这里我把自己所知道12种vue组件通信总结出来1:父子组件通信 ,(v-bind和props实现父子传值)parent.vue <template> <div class="parent"> <Child name="张三"/> </div> </template> child.vue <template> <div .原创 2021-11-21 17:13:01 · 402 阅读 · 0 评论 -
vue后台管理权限
什么后台管理权限 vue如何控制用户的权限 我们是这样做的,用户登录后,后台会返回这个用户的权限,比如用字段auth表示,我们就根据这个auth字段 从我们实现创建好的路由表中,找到符合其权限的路由表,然后利用this.$router.addRoutes将其 对应的路由表动态添加,这样接可以得到不同用户权限的路由了 权限的目得就是防止一些用户的违规操作,不同的用户就有不同的权限 注意addRoutes([]) 里边是参数是一个数组 以下我举例权限和路由菜单权限原创 2021-11-28 18:57:24 · 1147 阅读 · 0 评论 -
vue批量注册全局组件
第一种新建 utils文件夹,在utils文件夹下新建 globalComponent.js文件import Demo1 from '../components/demo1.vue'import Demo2 from '../components/demo2.vue'import Demo3 from '../components/demo3.vue'import Demo4 from '../components/demo4.vue'export default { install原创 2021-11-29 17:53:28 · 713 阅读 · 0 评论 -
vue中插槽的几种写法
什么是插槽 插槽顾名思义就是一个占位符的意思,可以进行传参,可以设置其它的元素布局,我就简单说下插槽的几种写法vue中有三种插槽默认插槽具名插槽作用域插槽插槽在vue中的具体应用slotA.vue<template> <div class="demo1"> <slot>默认插槽</slot> <slot name="header"></slot> <slot name="co原创 2021-11-29 19:43:02 · 1841 阅读 · 0 评论 -
前端性能优化之vue-cli打包
新建vue.config.jsvue.config.jsnpm i uglifyjs-webpack-plugin -Dcnpm i uglifyjs-webpack-plugin -Dyarn add uglifyjs-webpack-plugin -D(推荐使用yarn)const path = require("path");const CompressionPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按原创 2021-11-30 17:31:24 · 477 阅读 · 0 评论 -
vue-h5适配两种方案
1:第一种方案下载插件yarn add postcss-px2rem@5 -Dyarn add amfe-flexible -D新建postcssrc.jspostcssrc.jsmodule.exports = { plugins: { // 'postcss-import': {}, // 'postcss-url': {}, // to edit target browsers: use "browserslist" field in package.j原创 2021-11-30 18:37:43 · 1653 阅读 · 0 评论 -
vue实现瀑布流的方式
瀑布流原创 2021-12-01 19:28:52 · 3941 阅读 · 3 评论 -
vue中父子组件生命周期的执行顺序
初始化父子组件的生命执行顺序 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted父子组件更新的顺序 父beforeUpdate->子beforeUpdate->子updated->父updated父子组件的销毁顺序 父beforeDestory->子beforeDestory->原创 2021-12-07 20:37:48 · 115 阅读 · 0 评论 -
vue3-ant-design-vue
新建vue3项目 npx vue create project 手动选择vue3项目即可 运行 yarn serve进入antd-design-vue官网,选择v2或者v3即可下载antd-design-vueyarn add ant-design-vue@nextmain.js引入 import { createApp } from 'vue'import App from './App.vue'import router from './router'import stor原创 2021-12-05 16:33:31 · 794 阅读 · 0 评论 -
axios取消快速点击造成的重复请求
axios.CancelToken主要是解决重复请求造成的一系列问题新建service.jsyarn add express -D const express = require("express")const app = new express();app.get('/user', function(request, response) { response.send('hello World')})app.listen(5000, function() { console.log(原创 2021-12-05 15:27:34 · 422 阅读 · 0 评论 -
vuecli中使用缓存提升项目的启动速度和起别名
下载 hard-source-webpack-pluginyarn add hard-source-webpack-plugin -Dconst hardPlugin = require("hard-source-webpack-plugin")const { resolve } = require("path")module.exports = { configureWebpack: { plugins: [ new hardPlugin({ // 缓存启动的文件,提升原创 2021-12-04 23:43:31 · 634 阅读 · 0 评论 -
echarts中国地图在vue中的使用
1:下载echarts最新版本yarn add echarts -D 默认最新版本 5.2.2版本在assets文件夹下新建data.json,中国地图需要用到 {"type":"FeatureCollection","features":[{"type":"Feature","id":"xin_jiang","properties":{"name":"新疆","cp":[84.9023,41.748],"childNum":18},"geometry":{"type":"Polygon","co原创 2021-12-04 22:03:56 · 802 阅读 · 0 评论 -
前端性能优化之vue-keepAlive
(一):普通组件缓存三种写法 <!-- 组件缓存的第一种写法: 字符串逗号分隔符--> <!-- <keep-alive include="ComA"> <componnet :is="status"></componnet> </keep-alive> --> <!-- 组件缓存的第二种写法:正则表达式的写法 // --> <!-- <keep-alive原创 2021-12-04 19:11:04 · 539 阅读 · 0 评论 -
vue5种方式实现页面“刷新“
vue中五种方式实现页面“刷新”1: 使用window.location.reload() 强制刷新 都会使页面有短暂的空白,体验效果不是特别好home.vue <button @click="refreshPageHandler">刷新页面</button> methods: { refreshPageHandler() { console.log("点击刷新页面") window.location.reload() // 第一种原创 2021-12-04 13:38:50 · 6817 阅读 · 1 评论 -
vuex中辅助函数写法
什么是vuexvuex是一种集中管理的状态管理工具,可以用于大型项目的状态管理,比如购物车,登录,权限,收货地址等-一般我们派发dispatch一个actions名字,然后actions去commit提交一个mutations名字,mutations去修改mutate这个state名字,getters类似于vue中的computed的计算属性,而modules可以为store划分不同的业务模块vuex的核心state & mutations & actions & ge原创 2021-11-26 20:25:26 · 622 阅读 · 0 评论