vue
文章平均质量分 54
孛儿只斤·苏日娜
这个作者很懒,什么都没留下…
展开
-
封装antdv的仅适用于级联 TreeSelect 树型选择控件
封装antdv的仅适用于级联 TreeSelect 树型选择控件1. 效果支持多选不支持多选2. 组件<template> <a-tree-select style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :value="currentValue" :multiple="multiple" :allow-clear=原创 2022-03-29 10:44:13 · 1160 阅读 · 0 评论 -
优化vue 根据后台反馈状态动态显示相应字段
优化vue 根据后台反馈状态动态显示相应字段1. 只有两个状态使用三元运算符<!-- 未优化版 --><template slot="state" slot-scope="state"> <span v-if="state == 1">已上线</span> <span v-if="state == 2">未上线</span></template><!-- 优化版 --><templat原创 2022-03-29 10:24:50 · 2077 阅读 · 0 评论 -
antv中的TreeSelect连级选择问题
antv中的TreeSelect连级选择问题需求效果所有代码:<template> <a-tree-select show-search style="width: 100%" :tree-data="treeData" :labelInValue = 'true' // 重要 v-model="value" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"原创 2022-03-23 14:30:03 · 1471 阅读 · 0 评论 -
vue权限管理
vue权限管理1. 整体思路后端返回用户权限,前端根据用户权限处理得到左侧菜单;所有路由在前端定义好,根据后端返回的用户权限筛选出需要挂载的路由,然后使用 addRoutes 动态挂载路由。2. 登录 & 权限登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,原创 2022-03-22 10:55:13 · 1466 阅读 · 0 评论 -
vue3.0中使用elementUi(element-plus的使用)
element-plus的使用小朋友,你是不是有很多问号❓❓❓甲:为什么在vue3.0中不能使用Element UI了?乙:由于vue3.0在插件install函数的入参从Vue原型(类)改成了app(vue实例),导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲:那有什么方法能解决吗?乙:使用Element UI的升级版element-plus???? element-plus官方文档入口1、npm 安装npm原创 2021-04-06 13:40:02 · 14256 阅读 · 7 评论 -
vue路由详解
vue路由详解何为 router、routes、route ❗❓router → index.js 文件import Router from 'vue-router'const router = new Router({ routes: [ // 下面的对象就是路由记录 { path: "/a", name: "a", component: A, children: [ // 这也是个路由记录原创 2021-03-26 17:31:49 · 243 阅读 · 0 评论 -
将前端(vue)项目部署到nginx
将前端项目部署到nginx1、登录通过账号、密码登录服务器2、查看当前文件或目录的详细信息使用指令ll罗列出当前文件或目录的详细信息。3、进入首页~ cd /home4、新建文件夹并cd进去~ mkdir 自定义文件夹名~ cd 自定义文件夹名5、上传前端dist包在 /home/自定义文件夹名 下将dist压缩包扔进来6、解压dist包~ unzip dist7、进入nginx目录~ cd /usr/local/nginx8、进入配置文件目录~ cd conf/原创 2021-01-19 16:04:34 · 408 阅读 · 0 评论 -
vue响应式原理解析
vue响应式原理解析1、什么是响应式当修改data中的某一属性值时,调用该属性的界面视图也随着发生改变!2、灵魂拷问2.1 vue内部是如何监听数据的改变答:使用Object.defineProperty监听对象属性的改变2.2 当数据发生改变,vue是如何知道要通知哪些页面的?答:使用发布者订阅者模式3、代码解析定义一个data对象,并获取它所有的属性与属性值<script> const data = { message: "哈哈哈",原创 2020-12-03 14:58:41 · 104 阅读 · 0 评论 -
vue中Axios的封装和Api接口的管理
vue中Axios的封装和API接口的管理1、目的简化代码、利于后期的更新维护、降低耦合度。2、下载axiosnpm i axios -S 或 npm install axios3、配置代理在使用vue-cli3创建项目后,因为webpack的配置均被隐藏了,当我们需要覆盖原有的配置时,则需要在项目的根目录下,新建vue.config.js文件,来配置新的配置。内容如下:module.exports = { // 配置项目基地址 // publicPath: '/abc',原创 2020-08-19 09:48:32 · 254 阅读 · 0 评论 -
在vue项目中使用阿里svg矢量图
在vue项目中使用阿里svg矢量图1、进入阿里svg矢量图官网:官网地址2、进入图标库 => 所有图标库3、搜索图标支持拼音、汉字、英语4、将选中图标加入购物车5、进入购物车,选择【添加至购物车】如若没有创建的项目,请先点击【加入项目】后的【添加】按钮创建新项目6、点击确定进入【我的项目】界面7、选中symbol,并下载到本地8、将iconfont.js文件解压到项目src目录下的assets文件夹下的js文件夹下(如若没有该文件目录请自行创建)文件目录表:9、在m原创 2020-08-07 09:39:58 · 1309 阅读 · 0 评论 -
vue自定义指令——输入框限制
输入框限制在平时开发中我们常会遇到限制输入框输入的问题,如果只是一两个输入框我们可以直接在标签上绑定input事件进行检验,如:实现输入框只能输入正整数,且不能以0开头。<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">但当我们要限制的输入框很多的时候就需要在每个标签上绑定同一方法,不论从代码的可维护性还是可读性又或者从编码量来讲都不是个好方法,因此我们可以利用vue的自定义指令来自定义一个方法。1原创 2020-08-04 16:17:07 · 850 阅读 · 1 评论