关注
分享
vue学习 vue+element项目github地址:https://github.com/heng1234/vuePro
在线访问地址:https://heng1234.github.io/vuePro/hlvy/
hlvy
这个作者很懒，什么都没留下…
展开
-
vue-cli3.x+element后台管理系统
hlvy后端管理系统改系统采用vue+element+axios+vue-router等github地址:https://github.com/heng1234/vuePro在线展示地址:https://heng1234.github.io/vuePro/hlvy/QQ群:553997290使用git下载项目:1、 git clonegit@github.com...原创 2019-01-16 15:35:01 · 9801 阅读 · 25 评论 -
vue-cli3.0 + echarts展示中国地图
项目地址:https://github.com/heng1234/vuePro在线展示地址:https://heng1234.github.io/vuePro/hlvy/首先添加echarts插件npm install echarts -Smain.js加入// 引入echartsimport echarts from 'echarts'Vue.prototype.$e...翻译 2019-01-09 16:45:42 · 4348 阅读 · 0 评论 -
vue 自定义指令
官网例子// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})如果想注册局部指令，组件中也接受一个 directives 的选项：directives: { focu...转载 2018-12-19 19:13:32 · 137 阅读 · 0 评论 -
vue2.5.16 控制台报错组件内不推荐修改Propsvoid mutating a prop directly since the value will be overwritten whenev
修改 Props 弃用组件内修改 prop 是反模式 (不推荐的) 的。比如，先声明一个 prop ，然后在组件中通过 this.myProp = 'someOtherValue' 改变 prop 的值。根据渲染机制，当父组件重新渲染时，子组件的内部 prop 值也将被覆盖。大多数情况下，改变 prop 值可以用以下选项替代：通过 data 属性，用 prop 去设置一个 data 属...转载 2018-12-18 23:17:11 · 539 阅读 · 0 评论 -
vue3.x部署到tomcat和部署在github在线访问路径问题
vue3.x npm run build后dist里面文件接着我把这个dist 放在tomcat下发现访问报错于是我在vue.config.js改了这个 /位./结果访问可以但是跳转报找不到js我发现路径问题于是我换成/dist/就可以启动了我把项目上传到github上面然后设置了在线访问 参考搜索github设置在线访问 访问url发现报...js路径不对...原创 2018-12-18 12:30:17 · 691 阅读 · 0 评论 -
vue-cli 3.0 打包后报错，页面空白
npm run build 命令执行完出现 访问index.html空白 控制台报找不到文件将baseUrl属性的值'/'改为'./'。 module.exports = { // 基本路径 baseUrl: './', // 输出文件目录 outputDir: 'dist', // webpack-dev-server 相关配置 devSe...转载 2018-12-17 20:32:12 · 4809 阅读 · 3 评论 -
vue3.x移动端自适应
原文:http://www.cnblogs.com/skylineStar/p/10036525.html一、项目中安装lib-flexiblenpm install lib-flexible -S二、在项目的入口main.js文件中引入lib-flexibleimport 'lib-flexible'第二部分：使用postcss-px2rem自动将css中的px转换成re...转载 2018-12-17 20:06:02 · 846 阅读 · 0 评论 -
vue 使用elementUI 打包后样式错乱
1、你的问题就是css权重问题 如果相同权重可能存在引入顺序问题简单粗暴解决办法 如果是单页面 写入index.html里面 直接修改源码的css 很简单~~~加个！important2、你看下main.js中引入的顺序，是否和下面一样：import 'element-ui/lib/theme-chalk/index.css'import App from './...转载 2018-12-14 20:43:28 · 5194 阅读 · 0 评论 -
vue 打包后部署到WebSphere上静态资源丢失问题
1、在vue main.js配置好地址后 2、npm run build之后生成dist文件夹里面有2个文件如图 在eclipse建个动态web工程 把这2个文件放在WebContent目录下 可以先用tomcat测试下再打包......测试完成后 file----Export...搜索war 点击war file --ne...原创 2018-12-09 13:11:12 · 980 阅读 · 0 评论 -
vue使用todolist
storage.js /** * 封装本地存储的方法 模块化文件 */var storage={ set:function (key,val) { localStorage.setItem(key,JSON.stringify(val)); }, get:function (key) { return JSON.parse(l...翻译 2018-12-06 10:24:40 · 124 阅读 · 0 评论 -
vue-cli3.0全局函数定义
首先新建一个fnc.js代码://测试调用方法let test = str =>{alert(str)};export default { test}mian.js/** * 全局方法 */import fnc from './base/fnc.js'Vue.prototype.$fnc=fnc;页面使用效果:...原创 2018-12-05 11:10:14 · 3552 阅读 · 8 评论 -
vue3.0 修改element-ui标签名
nmp add element-ui main.js /*自定义element标签名开始*/import {Input, Button, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Sel...翻译 2018-12-05 10:30:50 · 1570 阅读 · 1 评论 -
vue3.0使用全局scss
首先创建一个scss文件 接着在项目根目录下创建 vue.config.js vue.config.js内容注意这段代码 css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // @/ 是 src/ 的别名...翻译 2018-12-05 10:23:34 · 9667 阅读 · 0 评论 -
VUE/使用echarts格式化浮窗自定义按钮及事件
注意看这一段代码 mounted() { let that=this; window.detal = function () { that.$router.push({ path: "/traheader/accountInfo" //需要这样跳转 }) } }, ...原创 2018-12-01 17:17:14 · 2756 阅读 · 4 评论 -
vue设置浏览器主题标签
index.html加上 <link rel="shortcut icon" href="static/hlvy.ico" mce_href="static/hlvy.ico" type="image/x-icon">翻译 2018-12-01 16:27:55 · 540 阅读 · 0 评论 -
vue关于img src动态赋值问题
问题: 我刚开始代码是这样的 结果图片加载不出来 <img :src="'../assets/images/'+imgsrc+'.png'"/> props:{ /** * 提示内容 */ msg:{ type:String, default:'业务暂未开放,敬请期...原创 2018-11-30 10:34:16 · 60421 阅读 · 3 评论 -
vue点击事件会刷新浏览器回到主页解决办法
加个prevent阻止冒泡就好了 @click.prevent="toLink"原创 2018-11-26 17:56:33 · 6208 阅读 · 1 评论 -
vue回车事件绑定
created:function(){ //登录添加键盘事件,注意,不能直接在焦点事件上添加回车 let that = this; document.onkeydown = function (e) { let key = window.event.keyCode; if (key === 13){ that...原创 2018-11-16 21:59:27 · 5051 阅读 · 0 评论 -
Vue实现复制到粘帖板功能
1. 安装vue-clipboardnpm install --save vue-clipboard22.main.js引入import VueClipboards from 'vue-clipboards2'Vue.use(VueClipboards);3.案例<template> <div class="yeluosen"> &l...转载 2018-11-12 16:17:02 · 234 阅读 · 0 评论 -
async/await来处理异步
async function hello(){ return 'hello world';}await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。async function awaitDemo() { await normalFunc(); console.log('something, ~~'...转载 2018-11-11 15:40:13 · 136 阅读 · 0 评论 -
vue使用highcharts遇到的坑
问题是首先我在data里面定义了个titleName:'title'，titlestr:'heng'接着在data里面定义了个options:{title:' '.............此处代码省略 } 我想直接把titleName和titlestr拼接在一起赋值给title然后写了这样一段代码options:{title:this.title...原创 2018-10-27 16:33:13 · 3969 阅读 · 0 评论 -
vue遇到的坑
技巧/坑点1.setTimeout/ setInterval场景一 ：this指向改变无法用this访问vue实例 mounted(){ setTimeout( function () { //setInterval同理 console.log(this); //此时this指向Window对象 }，1000) ; }解决方法 :使用箭头函数或者...转载 2018-10-27 22:31:49 · 962 阅读 · 0 评论 -
Vue父组件向子组件传递动态的值，子组件实时更新
1、普通watch data() { return { frontPoints: 0 }},watch: { frontPoints(newValue, oldValue) { console.log(newValue) }}2、数组的watchdata() { return { ...转载 2018-10-27 22:43:22 · 4405 阅读 · 0 评论 -
vue安装或升级3.0
关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可...转载 2018-10-30 11:06:14 · 41171 阅读 · 3 评论 -
vue3.x 快速原型开发
快速原型开发你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：npm install -g @vue/cli-service-globalvue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。#vue serveUsag...转载 2018-10-30 11:20:28 · 2732 阅读 · 3 评论 -
vue3.x修改端口号配置vue.config.js
首先在根目录创建vue.config.js vue.config.js 里面代码:module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * b...翻译 2018-10-30 16:52:47 · 42367 阅读 · 26 评论 -
简易的键盘 只需要此js文件和jQuery.js 就可以实现
效果: keys.js/** * 简易的键盘 只需要此js文件和jQuery.js 就可以实现 * @param $ *//******************************************************************************* * * 页面样式 * <ul> * <li><inpu...原创 2018-10-12 11:14:29 · 160 阅读 · 0 评论 -
jsp显示验证中请稍后代码编写
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>进度条</title> <script type="text/javascript" src="http://lib.sinaapp.com/j转载 2018-07-09 21:01:41 · 339 阅读 · 0 评论 -
vue写个计时器 暂停 开始 重置
<template> <div class="wrapper"> <h1 id=mytime>{{str}}</h1> <!-- <input id="mytime" type="text" name="" value="显示时间">翻译 2018-09-17 17:05:06 · 12611 阅读 · 2 评论 -
vue.js格式化时间并每秒更新
公用过滤器页面//在月份、日期、小时等小于10前面补0let padDate = function (value) { return value <10 ? '0' + value:value;};let formatDateTime = value => { var date = new Date(value); var year = date.getFu...转载 2018-09-17 17:06:51 · 2173 阅读 · 3 评论 -
VUE一劳永逸的组件注册
我们写了一堆基础UI组件，然后每次我们需要使用这些组件的时候，都得先import，然后声明components，很繁琐！秉持能偷懒就偷懒的原则，我们要想办法优化！ 招式解析：我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，...转载 2018-09-20 14:21:26 · 426 阅读 · 0 评论 -
vue开发常用方法
//格式化table字段 如果超过字符长度超过7位则用...代替 Vue.prototype.formatFont = function (row, column, cellValue){ let str = '...'; let value = ''; if(cellValue.length > 7){ value = cellValue.s...翻译 2018-09-28 17:31:04 · 325 阅读 · 0 评论 -
vue单页应用页面缓存方案----纯干货
公司项目是用vue进行开发，在开发过程中，我们发现一个极差的体验。场景是这样的，我们的产品首页是一个列表，当用户滚动到距离顶部一定的距离，然后点击列表项进入详情再返回的时候列表数据重新加载，且滚动到了顶部，这简直是一个不能忍受的事情。于是准备对我们的项目体验进行优化，从最开始了解的keep-alive着手，用keep-alive包裹router-view这样的结果可以对页面进行内存缓存，结构如下...转载 2018-09-28 19:31:35 · 929 阅读 · 0 评论 -
element-ui中 table表格hover 修改背景色
重写element-ui table hover样式 .el-table--enable-row-hover .el-table__body tr:hover>td{background-color: #212e3e !important;}或者.el-table__body tr:hover>td{ background-color: #e1e7f0!im...转载 2018-10-11 17:05:39 · 26549 阅读 · 4 评论 -
vue公用组件
github地址:https://github.com/heng1234/vue_components 公用按钮公用table 公用日历 公用radio原创 2018-10-12 11:46:49 · 1222 阅读 · 0 评论 -
vue element-ui封装全局Dialog
需要安装element-ui插件公用页面dia.vue<template> <!--参数 说明 类型 可选值 默认值visible 是否显示 Dialog，支持 .sync 修饰符 boolean — falsetitle Dialog 的标题，也可通过具名 slot （见下表）传入 string — —width Dialog 的宽度 string ...原创 2018-09-05 16:30:50 · 8183 阅读 · 4 评论 -
封装vue element-ui下拉框组件
原文:https://www.jianshu.com/p/aaf0acba97a0 公用组件sltopn.vue <template> <div> <el-select v-model="svalue" placeholder="请选择" filterable> <el-option v-for...翻译 2018-09-05 18:36:41 · 5274 阅读 · 3 评论 -
vue封装axios请求springboot 及跨域问题
vue页面安装element-uinpm install element-ui --save 安装axios插件npm install axios --save创建个http.js import axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5...原创 2018-09-10 17:33:01 · 8852 阅读 · 1 评论 -
vue-router 切换tab标签关闭时缓存问题方案
在router入口页面加上 keepAlive: true // 需要被缓存 false则不需要 { path: 'fundProListG', component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve), ...原创 2018-09-11 17:14:00 · 11157 阅读 · 4 评论 -
echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）
在操作echarts时，echarts的柱状图、地图等各种图形显示的时候往往会有legend图标的显示，有时候需求要求，legend图标不全部显示，只显示一个或指定的图标显示。默认的图形（以柱状图及地图为例）：需求要求的图：解决办法：代码展示：function randomData() { return Math.round(Math.random()*1000); } ...转载 2018-05-12 20:37:04 · 13586 阅读 · 0 评论