![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VueJs
竹立荷塘
这个作者很懒,什么都没留下…
展开
-
改变vue单个页面body的背景颜色
如何改变vue单个页面body的背景颜色。原创 2023-02-14 15:24:32 · 1460 阅读 · 0 评论 -
vue 清除定时器失效 clearInterval
最近需要再页面里做个倒计时,发现用clearInterval()清除定时器失效,解决办法就是挂载到window上。原创 2022-08-12 15:48:17 · 2172 阅读 · 0 评论 -
vuex中action和mutation区别
vuex中action和mutation区别转载 2022-08-01 10:01:30 · 1740 阅读 · 0 评论 -
vue中怎么做锚点定位
一个非常简单的方法就是在你想要跳到的位置设置一个唯一id,然后通过 document.querySelector("#你设置的位置").scrollIntoView(true);语句就可以跳转到你设定的位置 ,另附Element.scrollIntoView() 的 MDN文档地址...原创 2021-04-09 16:42:43 · 1636 阅读 · 0 评论 -
vue 数据修改但页面没刷新
1.watch监听到数据的变化但页面没有刷新在数据改动的代码后加this.$forceUpdate();添加this.$forceUpdate();进行强制渲染,效果实现。因为数据层次太多,render函数没有自动更新,需手动强制刷新。2.没有监听到数据的变化例如:改变了数组中的某一项或者改变了对象中的某个元素时,监听则未生效。数组若要触发监听,下面方法即可触发如:splice(),push()等js方法当然了,也可以使用vue中的方法this.$set(object, ...转载 2020-08-10 14:25:26 · 5525 阅读 · 1 评论 -
vue对象或者数组中数据变化但是视图没有更新
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。但是我们还是有一些办法来回避这些限制并保证它们的响应性。一、对于对象Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如:var vm = new Vue({ data:{ a:1 }})// `vm.a` 是响应式的vm.b原创 2020-05-26 18:06:43 · 2676 阅读 · 0 评论 -
17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-登录页面
我这里的页面一般分为三部分:html、js和css。接下来开启我们的页面构建之旅。一、 想实现的效果二、 页面实现1. html首先我们想将登录的布局写出来。<template> <div class="login-container"> <el-form class="login-main sub-center-center" :model="formData" :rules="formRules" ref="formData" label-posit原创 2020-05-19 08:52:06 · 1240 阅读 · 0 评论 -
16. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-自定义Element主题
Element主题颜色和我项目设计默认的颜色不一致,我自定义了一下主题。一. 创建文件,修改主色调Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量。我这里是在src目录下的themes/element目录下创建了一个样式文件element-variables.scss,并写入以下内容:/* 改变主题色变量 */$--color-primary: $color-main;/* 改变 icon 字原创 2020-05-14 10:07:37 · 793 阅读 · 0 评论 -
15. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-axios请求封装以及接口统一管理
在src目录下创建config目录,并在此目录下创建两个文件http.js和interface.js,其中http.js用来对axios请求进行封装,interface.js用来对此项目中用到的接口进行统一封装。一、axios请求封装http.js1. axios 全局配置:import axios from 'axios'import store from '../store'import router from '../router'import common from '../asset原创 2020-05-14 10:06:35 · 1052 阅读 · 1 评论 -
14. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-路由管理
在main.js同级目录下创建router.js文件用来管理路由:我这里的路由采用的是history模式:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const originalPush = Router.prototype.pushRouter.prototype.push = function push (location) { return originalPush.call(this, lo原创 2020-05-14 10:05:35 · 1096 阅读 · 0 评论 -
13. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-状态管理设置Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。我这里主要使用它来存储一些全局变量以及用户的状态。一、创建mutation-types.js文件,对mutations统一管理这样做的目的主要是:1)为了减少编码,比如多个地方存在“save_user_info”时,用常量来引用,可维护性更高,减少手抖多一个字母少一个字母的错误。2)大项目多人开发时,对mutations统一管理,找函数很直观。原创 2020-05-14 10:04:15 · 1101 阅读 · 0 评论 -
12. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端入口文件main.js设置
一、main.js解释说明main.js是vue项目的入口文件,项目中所有的页面都会加载main.js,main.js主要有三个作用:1.实例化Vue;2.放置项目中经常会用到的插件和CSS样式;3.存储全局变量。二、此项目中的main.js的核心代码import 'babel-polyfill'import Vue from 'vue'import './assets/styles/reset.css'import ElementUI from 'element-ui'import '原创 2020-05-14 10:02:20 · 1053 阅读 · 0 评论 -
11. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-vue.config.js 配置
Vue-cli3 搭建的项目,之所以界面想对之前较为简洁,因为webpack的配置均被隐藏了,当你需要覆盖原有的配置时,则需要在项目的根目录下,新建vue.config.js文件,来设置新的配置。一、创建vue.config.jsvue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.jso原创 2020-05-14 09:51:45 · 1084 阅读 · 0 评论 -
10. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端创建vue单页面项目
一、创建vue单页面项目我这里创建vue项目使用的是Vue-CLI脚手架,Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。1. 安装Vue-CLInpm install -g @vue/cli# ORyarn global add @vue/cli安装之后,你就可以在命令行中访问vue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮...原创 2020-04-26 13:43:13 · 1999 阅读 · 0 评论 -
9. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-后台周报接口编写
一、后台周报接口编写在已有的controls文件夹,然后下面创建一个weekly.js文件,用来管理周报相关接口。1. 引入所需文件首先将需要用到的已封装的方法文件引入到weekly.js文件中const $sql = require('../sql/sqlMap')const $http = require('../sql/http')const $time = requi...原创 2020-04-23 13:17:56 · 928 阅读 · 0 评论 -
8. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-后台用户接口编写
接口主要涉及到登录、增删改查等功能,主要分为两部分,用户相关接口和周报相关接口。在项目根目录下创建一个controls文件夹,然后下面创建一个user.js文件,用来管理户相关接口。...原创 2020-04-22 13:17:30 · 2435 阅读 · 4 评论 -
7. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-请求封装和sql语句封装
一、请求封装有一些请求方法使用非常频繁,这里我们将它封装一下;在项目根目录下创建一个sql文件夹,然后下面创建一个http.js文件,用来管理共用的请求方法。let mysql = require('mysql');let db = require('../config/db');let pool = mysql.createPool(db);const jwt = require...原创 2020-04-20 12:56:22 · 1398 阅读 · 0 评论 -
element中el-image如何显示本地图片
把正常img标签中的src="@/assets/logo.png"换成:src="require('@/assets/logo.png')"就可以了。原创 2019-12-07 16:12:59 · 37141 阅读 · 4 评论 -
1. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前言
最近一段时间因为项目需要学了一段时间nodeJs,并用Vue+nodeJs+MySql实现了一套周报管理系统,整体逻辑比较简单。但是可以我们完整的了解一个项目从数据库到后台到前端的实现过程,适合有一定前端基础(包括HTML5、CSS3和JavaScript,对ES6最好有一些了解)但是不太了解这一块又对此有兴趣的的小伙伴们可以拿来练手。内容主要分为三大块:1) 数据库(mysql)2)...原创 2019-10-29 23:49:16 · 7699 阅读 · 16 评论 -
vue中获取上一页的路由信息
这两天做项目的时候,碰到产品提的一个需求,每次进到首页都要刷新,但是需要根据上一页路由的path的地址对首页里的内容进行不同的操作。实现方式并不复杂,主要是利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传递回调来访问当前组件的实例,至于为什么不直接利用 this 访问组件实例,是因为beforeRouteEnter 守卫不能访问 thi...原创 2019-10-18 10:29:23 · 10412 阅读 · 1 评论 -
VUE中全局组件的封装与使用方法
最近整理了一下vue的知识点,正好今天有些时间把VUE中全局组件的封装与使用方法写一下。1.自定义组件<template> <div class="breadcrumb"> 面包屑 <slot/> <!-- 插槽 --> </div></template> <script>...原创 2019-08-23 16:47:30 · 10020 阅读 · 2 评论 -
axios 设置超时时间 timeout
全局设置网络超时axios.defaults.timeout = 30000;单独对某个请求设置网络超时let timeout = parseInt(paramsTimeout);this.$ajax.post(url, params, {timeout: timeout}) .then(res => { console.log('response='+r...原创 2019-05-31 13:19:29 · 79078 阅读 · 2 评论 -
Element表单验证(2)
上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇。上篇讲到async-validator由3大部分组成Options Validate Rules基本验证流程如下先按照rule的规则,制定每个字段的规范,生成rules 根据rules生成验证器const validator = new Validator(rule...转载 2018-11-20 09:53:47 · 282 阅读 · 0 评论