![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 55
weixin_46370867
这个作者很懒,什么都没留下…
展开
-
vue中:class实现样式的绑定
在vue中通过 :class 实现 实现 标签中 条件与样式的绑定示例代码:<div class="right" :class="{ kuan: 条件1, bigkuan: 条件2 }"> <!-- 内容 --></div> 当条件1为真的时候,标签绑定class值为kuan的样式当条件2为真的时候,标签绑定class值为bigkuan的样式...原创 2021-04-22 20:33:06 · 154 阅读 · 2 评论 -
transition实现隐藏显示菜单栏效果
今天使用<transition>标签做了隐藏显示菜单栏的效果,下面和小编一起来看看如何实现吧我们知道<transition>标签是用来做动画效果的,把菜单栏的隐藏和显示看做一个动画效果就可以了菜单容器的css动画样式如下:-webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97); -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25,原创 2021-04-21 22:23:27 · 986 阅读 · 2 评论 -
vue elementui表单清空前一次的数据
文章目录前言关键部分参考代码前言在使用vue elementui写表单的时候,选中了表单的数据后直接关闭表单(没有点击“取消”或“保存”按钮);但是当第二次打开表单的时候,发现选中的数据还在,这是需要清空前一次选中的数据我写的表单是在弹框里的,效果如下关键部分在每一次打开弹框的时候,都清空数据:handleOpenModal() { this.ruleForm = { college: "", xi: "", grade: "", maj原创 2021-04-16 18:07:18 · 2416 阅读 · 0 评论 -
vue + elementui 通过父子组件实现弹框
文章目录子组件父组件子组件<template> <ModalComponent name="import-set" title="设置" size="85%" width="250px" @opened="handleOpenModal" @close="handleCloseMOdal" > <div class="cont"> <!-- 弹框 --> <div原创 2021-04-15 19:05:17 · 1631 阅读 · 0 评论 -
vue elementui表格数据
<template slot-scope="scope"> {{ scope.row.studentid }} <p v-if="scope.row.value == 1">数据重复</p></template>原创 2021-04-14 20:57:49 · 152 阅读 · 0 评论 -
v-if与v-show的区别
实现本质方法区别v-show本质是标签的display设置为none,控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素编译的区别v-show实质是控制cssv-if切换有一个局部编译 / 卸载 的过程,切换过程中合适地销毁和重建内部地事件监听和子组件性能v-show性能优于v-ifv-show只编译一次,后面其实就是控制css,而v-if是不停地销毁和创建...原创 2021-04-02 18:10:39 · 109 阅读 · 0 评论 -
在vue项目中导入element-ui
在vue项目中添加插件导入并注册项目中需要的组件原创 2021-03-07 21:49:50 · 77 阅读 · 1 评论 -
在vue项目中配置axios
安装axios的依赖原创 2021-03-07 21:48:38 · 56 阅读 · 0 评论 -
使用vue创建自己的项目
重置App.vue里面的代码<template> <div id="app"> APP根组件 </div></template><script>export default { name: "app"};</script><style></style>2.整理路由组件 router文件夹下的index.js文件import Vue from 'vue'impor.原创 2021-03-07 21:47:59 · 49 阅读 · 0 评论 -
Vue左边与右边内容相关联
通过:class把左边和右边的内容关联起来<template> <div> <!-- 主体 --> <div class="con"> <!-- 左边 --> <el-card class="box-card left"> <div class="kc items" @click="handleclick(1)"原创 2021-03-05 23:28:07 · 361 阅读 · 0 评论 -
Vue的babel-plugin-transform-remove-console依赖使用方法
在开发阶段可以console.log在项目上线的时候不能运行console.log命令了// 这是项目发布阶段需要用到的 babel 插件const prodPlugins = []if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console')}module.exports = { presets: [ '@vue/cli-plugin-babel/preset..原创 2021-02-21 21:47:00 · 684 阅读 · 2 评论 -
开发环境与生产环境
环境,就是指项目运行的地方,当项目处于开发阶段,项目运行在开发人员的电脑上,项目所处的环境就是开发环境当项目开发完成以后,要将项目放到真实的网站服务器电脑中运行,项目所处的环境就是生产环境。为什么要区分开发环境与生产环境因为在不同的环境中,项目的配置是不一样的,需要在项目代码中判断当前项目运行的环境,根据不同的环境应用不同的项目配置。如何区分开发环境与生产环境通过电脑操作系统中的环境变量区分当前是开发环境还是生产环境。步骤:“此电脑” 右键,点击 “ 属性 ”// process对象原创 2021-02-19 20:40:33 · 793 阅读 · 0 评论 -
Vue折线图表
<template> <div> <!-- 卡片视图 --> <el-card> <!-- 2. 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 750px; height: 400px"></div> </el-card> </div></template>原创 2021-02-17 21:45:44 · 158 阅读 · 1 评论 -
Vue实现进度条
安装nprogress依赖:在main.js中// 导入 Nprogress 包 对应的 JS和CSSimport Nprogress from 'nprogress'import 'nprogress/nprogress.css'import axios from 'axios'// 在 request 拦截器中,展示进度条 Nprogress.start()// 设置拦截器 axios请求拦截axios.interceptors.request.use(config =&g.原创 2021-02-16 23:00:59 · 2981 阅读 · 2 评论 -
Vue实现简单图表~满满的干货
文章目录前提:安装数据报表的插件Vue实现简单图表的步骤导入echarts为ECharts准备一个具备大小(宽高)的Dom基于准备好的dom,初始化echarts实例指定图表的配置项和数据展示数据Vue实现简单图表的示例:前提:安装数据报表的插件Echarts官网:https://echarts.apache.org/zh/index.htmlVue实现简单图表的步骤导入echarts// 1.导入echarts// import echarts from 'echarts'let ech原创 2021-02-15 22:03:16 · 969 阅读 · 1 评论 -
Vue登录退出功能
Vue登录/退出功能登录概述1.登录业务流程在登录页面输入用户名和密码调用后台接口进行验证通过验证之后,根据后台的响应状态跳转到项目主页2.登录业务的相关技术点http是无状态的通过cookie在客户端记录状态通过session在服务器端记录状态通过token方式维持状态如果前端与服务器端之间不存在跨域,可以使用cookie或session如果前端与服务器端之间存在跨域,可以使用token登录 - token原理分析登录功能实现1.登录页面的布局通过El原创 2021-02-13 23:27:31 · 3481 阅读 · 1 评论 -
数据库errno: 1045的解决办法
mysql没有办法停止,而且一直都是自动启动,服务器端报错errno: 1045解决办法:停止Mysql服务的运行后再次打开Mysql服务步骤如下:停止Mysql的服务在开始处右键,选择【计算机管理】—> 【服务和应用程序】找到Mysql服务,并停止它的运行重新打开Mysql服务重新打开Mysql服务即可...原创 2021-02-11 09:56:26 · 1090 阅读 · 1 评论 -
只允许选中三级选择框的方法
根据选中内容后,数组的长度来判断如果数组的长度是1,表示选中了一级选择框如果数组的长度是2,表示选中了二级选择框如果数组的长度是3,表示选中了三级选择框handleChange() { // console.log(this.selectedCateKeys) // 证明选中的不是三级分类 if (this.selectedCateKeys.length !== 3) { this.selectedCateKeys = [] r原创 2021-02-10 22:10:48 · 145 阅读 · 1 评论 -
Vue实现副本编辑器
入口文件:main.js// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// 导入富文本编辑器对应的样式import 'quill/dist/quill.core.css' // import stylesimport 'quill/dist/quill.snow.css' // for snow themeimport 'quill/dist/quill.bubble.css' // for bubble theme// .原创 2021-02-09 22:43:22 · 333 阅读 · 1 评论 -
Vue图片上传删除预览操作
样式是通过element-ui实现的,使用的时候要先导入所需组件html<!-- action 表示图片要上传到的后台API地址 (1.9接口) --><!-- on-preview 预览图片 --> <!-- list-type 预览图片的预览方式 --> <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" l原创 2021-02-08 21:06:53 · 702 阅读 · 1 评论 -
步骤条与Tab栏的联动 ~ 不要错过
步骤条 与 Tab栏 的联动<!-- 步骤条区域 --> <!-- :active="activeIndex" 指定激活项的索引 (activeIndex 用于操作索引)--> <!-- align-center 步骤条居中 --> <!-- activeIndex - 0 将activeIndex字符串转为数字 --> <el-steps :space="200" :ac原创 2021-02-07 21:56:01 · 240 阅读 · 1 评论 -
Tag标签的增加和删除功能
效果图:html<!-- 展开行 --> <el-table-column type="expand"> <template slot-scope="scope"> <!-- 循环渲染Tag标签 --> <!-- 参数项的渲染 el-tag --> <!-- item 循环出来的每一项 --原创 2021-02-06 23:31:50 · 1351 阅读 · 1 评论 -
Vue前端路由~满满的干货
文章目录目标目录路由的基本概念与原理路由后端路由SPA(Single Page Application)前端路由实现简易前端路由Vue Routervue-router的基本使用基本使用步骤路由重定向vue-router嵌套路由嵌套路由用法父路由组件模板子级路由模板嵌套路由配置vue-router动态路由匹配动态匹配路由的基本用法路由组件传递参数props的值为布尔类型 (只接收动态数据)props的值为对象类型:(问题:可以接收props对象里面的静态数据,不能接收动态数据)props的值为函数类型:(可原创 2021-02-01 20:15:21 · 96 阅读 · 1 评论 -
Vue角色的权限管理
根据服务器端的数据,对角色的权限管理使用for循环进行遍历,然后渲染了样式使用element-ui实现布局文章目录角色权限的样式角色权限分配权限分配角色功能的实现接口删除角色指定权限的接口所有权限列表接口角色授权 接口角色权限的样式先获取角色的 一级权限、二级权限、三级权限,然后分别对一级循环、二级权限、三级权限 进行循环下面是 一级权限、二级权限、三级权限 的 数据角色权限权限管理:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0zpIKssV-原创 2021-01-31 23:38:37 · 2539 阅读 · 2 评论 -
Vue分页
下面是对分页功能的整理,希望可以帮助到有需要的小伙伴~文章目录分页样式分页方法分页样式分页样式是使用element-ui实现的,使用element-ui中的组件的时候要提前引用<!-- 分页区域 --> <!-- data() 的 queryInfo值 有 pagenum、pagesize 可以用来表示分页数据 // 当前的页数 pagenum: 1, // 当前每页显示多少条数据 pagesize: 2原创 2021-01-31 00:03:27 · 171 阅读 · 0 评论 -
Vue修改用户信息~不要错过哦
下面是对修改用户信息功能的整理,希望可以帮助到有需要的小伙伴~文章目录修改用户信息按钮的样式修改用户信息按钮的对话框修改用户信息所需的数据修改用户信息的方法接口根据 ID 查询用户信息编辑用户提交修改用户信息按钮的样式<!-- 修改按钮 --><!-- scope.row 获取到 改行 的所有数据 --><!-- scope.row.id 获取到 改行 的数据中的id --><el-button type="primary" icon="el原创 2021-01-30 23:46:23 · 4040 阅读 · 0 评论 -
Vue编写添加用户的表单 ~ 不要错过哦
在写项目的过程中遇到了添加用户信息的功能,今天写出来和大家分享。希望可以帮助到有需要的小伙伴文章目录使用element-ui实现布局和样式javascript中的数据、数据的校验规则 以及 方法添加用户的接口使用element-ui实现布局和样式在使用element-ui的时候,要引入需要使用的ui组件并注册后,才可以使用添加用户的按钮添加用户的表单 – 使用对话框实现点击添加按钮后会出现这个添加用户的表单<!--添加用户的按钮--><!-- addDialogVis原创 2021-01-30 11:59:02 · 946 阅读 · 2 评论 -
Error: ER_ACCESS_DENIED_ERROR: Access denied for user ‘root‘@‘localhost‘ (using password: YES)解决办法
在写Vue项目的过程中,遇到报错:Error: ER_ACCESS_DENIED_ERROR: Access denied for user ‘root’@‘localhost’ (using password: YES)困扰了小编好几天。在服务器文件夹中的config文件夹中,找到default.json文件经过解决,发现是数据库3306的端口号被4302端口号占用了,杀掉4302端口号就可以了。下面以杀死 14706端口为例,向大家介绍。14706端口 占用了 8080 端口杀掉端口号的原创 2021-01-29 16:32:56 · 2568 阅读 · 1 评论 -
插槽作用域渲染按钮开关 ~ 满满的干货哦
在一个项目中,经常会用到开关,我们就需要渲染开关。今天小编总结了以下具体的步骤,希望可以帮助到有需要的小伙伴~文章目录渲染开关的状态通过element-ui实现按钮的样式渲染按钮的步骤渲染开关的状态使用作用域插槽实现开关通过element-ui实现按钮的样式Switch开关:https://element.eleme.cn/#/zh-CN/component/switch渲染按钮的步骤定义一个作用域插槽,接收当前作用域的数据通过 v-model 双向数据绑定,将 数据 和 开关的原创 2021-01-28 20:43:01 · 203 阅读 · 0 评论 -
Vue实现可折叠导航菜单~非常详细
通过Vue编写一个二级,并且是可以折叠的导航菜单文章目录思路在main.js中 配置axios导入element样式Home.vue实现静态页面、样式及功能思路在侧边栏区域只写了一个二级导航,通过axios获取到侧边栏的数据,通过v-fot循环渲染该数据,形成多个二级菜单使用elemen-ui进行样式的设置在main.js中 配置axios导入axios包配置请求的根路径把axios包挂载到vue原型对象上:这样每一个vue组件都可以通过this直接访问到$http,从而去发起ajax请求原创 2021-01-27 22:29:59 · 3789 阅读 · 0 评论 -
Vue前端路由~非常详细哦,不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~文章目录目标目录路由的基本概念与原理路由后端路由SPA(Single Page Application)前端路由实现简易前端路由Vue Routervue-router的基本使用基本使用步骤路由重定向vue-router嵌套路由嵌套路由用法父路由组件模板子级路由模板嵌套路由配置vue-router动态路由匹配动态匹配路由的基本用法路由组件传递参数props的值为布尔类型 (只接收动态数据)props的值为对象类型:(问题:可以接收props对象里原创 2021-01-26 19:44:13 · 320 阅读 · 0 评论 -
Vue前后端交互~非常详细哦~
目标能够说出什么是前后端交互模式能够说出Promise的相关概念和用法能够使用fetch进行接口调用能够使用axios进行接口调用能够使用async/await方式调用接口能够基于后台接口实现案例目录前后端交互模式Promise用法接口调用-fetch用法接口调用-axios用法接口调用async/await用法基于接口的案例前后端交互模式接口调用方式原生Ajax基于jQuery的Ajaxfetch (API)axios (第三方库)URL地址格式传原创 2021-01-25 21:28:42 · 6331 阅读 · 1 评论 -
Vue组件化开发 - 非常详细,不要错过哦~
源码示例链接:https://pan.baidu.com/s/1NEYDmLl2K7nNa-AKWtJqVA提取码:2c7a目标能够知道组件化开发思想能够知道组件的注册方式能够说出组件间的数据交互方式能够说出组件插槽的用法能够说出Vue调试工具的用法能够基于组件的方式实现业务功能组件化开发思想现实中的组件化思想体现标准分治重用组合编程中的组件化思想体现组件化规范: Web Components(有的浏览器不支持)我们希望尽可能多的重用代码自定义组件原创 2021-01-24 22:44:52 · 118 阅读 · 0 评论 -
Vue常用特性~非常详细哦,带源码资料
下面是对Vue常用特性的整理,希望可以帮助到有需要的小伙伴~源码资料:链接:https://pan.baidu.com/s/14rRYtUfXkO6mxUtCh4FCcA 提取码:e0sw文章目录Vue常用特性常用特性概览表单操作表单域修饰符自定义指令为何需要自定义指令自定义指令的语法规则(获取元素焦点)带参数的自定义指令(改变元素背景色)局部指令计算属性为何需要计算属性计算属性的用法计算属性与方法的区别侦听器侦听器的应用场景侦听器的用法过滤器过滤器的作用自定义过滤器过滤器的使用局部过滤器带参数的过原创 2021-01-23 22:51:54 · 81 阅读 · 0 评论 -
Vue分支循环结构~非常详细哦
文章目录分支循环结构分支结构v-if与v-show的区别循环结构分支循环结构分支结构v-ifv-elsev-else-ifv-show:v-show的原理:控制元素样式是否显示display : none示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=原创 2021-01-22 21:26:59 · 180 阅读 · 0 评论 -
Vue前后端交互实现图书管理功能
源码链接:https://pan.baidu.com/s/1MzN9Jcrz-OLv7GVklK7UXQ 提取码:36qe初始化项目:npm init -y安装相应的第三方模块:npm install express --savenpm install body-parser --save在浏览器中输入 http://localhost:3000/books.html 来执行文件文章目录案例效果案例分析接口文档:获取图书列表数据添加图书-提交图书信息编辑图书-根据ID查询图书信息编辑图原创 2021-01-22 10:17:20 · 439 阅读 · 0 评论 -
Vue样式绑定~非常详细哦
下面是对Vue样式绑定的整理,希望可以帮助到有需要的小伙伴~文章目录样式绑定class样式处理样式绑定语法细节style样式处理样式绑定class样式处理对象语法<div v-bind: class="{ active: isActive }"></div>数组语法<div v-bind: class="[activeclass, errorclass]"></div><!DOCTYPE html><html原创 2021-01-21 23:46:16 · 66 阅读 · 0 评论 -
Vue属性绑定~非常详细
下面是对Vue属性绑定的整理,希望可以帮助到有需要的小伙伴~属性绑定Vue如何动态处理属性v-bind指令用法<a v-bind : href='url'>跳转</ a>缩写形式<a : href="ur1">跳转</ a>示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2021-01-21 23:43:29 · 1381 阅读 · 0 评论 -
Vue调试工具的安装方法(动动鼠标就完成,不会意外报错,超爽~)
Vue调试工具的安装方法1. 打开谷歌浏览器的网上应用商店并搜索谷歌浏览器的网上应用商店https://chrome.google.com/webstore/category/extensions2. 点击你要安装的插件3. 把插件安装到浏览器4. 打开管理扩展程序右键Vue的图标,打开该插件的“ 管理扩展程序 ”5. 允许访问文件网址6. 重启浏览器end~好啦,结束啦,觉得有帮助的小伙伴记得点赞收藏哦~...原创 2021-01-19 21:02:21 · 103 阅读 · 1 评论 -
Vue事件绑定(非常详细哦~)
下面是对Vue中事件绑定的整理,希望可以帮助到有需要的小伙伴~事件绑定vue如何处理事件v-on指令用法<input type= ‘button”v-on:click="num++'/>v-on简写形式<input type= ‘button'@click='num++/>事件函数的调用方式直接绑定函数名称<button v-on :click(事件类型)='say(方法名)'>Hello</button>原创 2021-01-19 08:16:44 · 3309 阅读 · 0 评论