首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
vue 项目中实用的小技巧
】的更多相关文章
vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQuery npm install jquery 2.安装Bootstrap npm 以上两步,也可以先在package.json 配置文件中指定版本号,然后运行 npm install 安装完了以后项目是跑不起来的,尽管二者都已经安装成功了,但还是会报错 "Bootstrap's JavaScript…
Extjs 项目中常用的小技巧,也许你用得着(2)
接着来,也是刚刚遇到的 panel怎么进行收缩 collapsible: true, 这会panel就会出现这个 点这个就可以收缩了 panel怎么随便拉伸,也就是让那个小黑三角出现 split: true, 效果如下: 怎么添加日历显示 var panel = new Ext.Panel({ header : true, title:'日历', frame:true,//渲染面板 collapsible : true,//允许展开和收缩 autoHeight : true,//自动高度 wid…
Extjs 项目中常用的小技巧,也许你用得着(1)
我在项目中遇到的一些知识点: 1.在GridPanel中显示图片,效果 对应的代码实现 { text: '是否启用', width: 80, // xtype: 'checkcolumn', dataIndex: 'IsEnabled', renderer: function boolFromValue(val) { if (val) { return '<img src=../../Content/images/true.png>' } else { return '<img src=…
Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ext.panel.Panel', { title: 'Results', width: 600, height: 400, renderTo: Ext.getBody(), bodyStyle: 'background:#ffc; padding:10px;', layout: { type: 'vb…
Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置
1.ExtJs设置cookie两种方式 其一:设置cookie如下 saveacct=isForm.getForm().findField('itemselector').getValue(); Ext.util.Cookies.set('saveacct',saveacct); 取cookie中数据如下 var validStatus = Ext.util.Cookies.get("saveacct"); alert(validStatus); 其二:设置cookie var coo…
Extjs 项目中常用的小技巧,也许你用得着(3)
几天没写了,接着继续, 1.怎么获取表单是否验证通过: form.isValid()//通过验证为true 2.怎样隐藏列,并可勾选: hidden: true, 如果是动态隐藏的话: grid.getColumnModel().setHidden(1,true); //1 代表要隐藏的列所在位置,true代表隐藏 3.怎样隐藏列,并不可勾选(这个必须配合上边那个一块用) hideable: false, 4.怎样设置简单查询,如果所示: tbar: { xtype: 'toolbar', fr…
scanf和printf格式化输入输出中非常实用的小技巧
输入输出几乎是每个C程序必须具备的功能,因为有了它们,程序才有了交互性.C提供的输入输出函数除了具有必须的输入输出功能外,还有一些其他实用的小技巧,了解这些小技巧将会为程序带来更友好的用户体验. 一.printf字段宽度.精度修饰符 当我们要输出类似表格形式的样式时,我们会用到字段宽度修饰符.它能够让printf函数的输出更加规整.我们先看下面的程序: 程序定义了一个容纳20个数字的数组,然后利用两个for循环将20个数字以四行五列的格式进行输出,虽然我们在printf的格式说明符%d的前面已经…
vue项目中使用bpmn-自定义platter
前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我们本次要实现的目标:基于左侧platter原有元素类型,创建出一个新的自定义节点.暂且叫它“草莓蛋糕”节点,类型是 bpmn:Task, 样式我们自己找一个好看的小草莓蛋糕图案.所以,开动吧~首先新建一个“customPalette”文件夹,里面放我们今天所有自定义的文件. 步骤1:建立platter类函数,命名为C…
vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 前面我们讨论了bpmn流程图的基本绘制.添加节点颜色等,本次我们来说,如何把xml文件中各种标签包裹的节点属性,转成前端常用的json格式,方便回显在页面.首先,我们通过一张图看一下…
vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 上一节我们讨论了将xml中的节点属性,转成前端常用的json格式.这一篇,我们来讨论更改了json后,如何写入到xml中去.首先,我们通过一张图看看流程图xml和json结构的对应关…
如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.org/docs/user-guide/configuring module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使…
vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准…
解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因分析 通过查看package.json文件我们可以发现,在文件中默认安装了eslint-loader模块,eslint-loader模块是目前相对比较流行的代码检测工具,可以检测书写的代码是否符合统一规范,可以在一些比较大型的项目开发中统一开发人员的代码风格,这也就是为什么代码缩进有可能导致页面报错…
Vue项目中使用HighChart
记:初次在Vue项目中使用 HighChart 的时候要走的坑 感谢这位哥们的思路 传送门 Vue-cli项目使用 npm install highcharts --save 让我们看看 highcharts 的使用方法,传送门 Highcharts.chart(targetTag, option) 重启项目,建立chart.vue文件 <template> <div class="x-bar"> <p :id="id" :option…
实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件 i…
ES6中常用的小技巧,用了事半功倍哦
ES6中常用的小技巧,如果能在实际项目中能使用到,必定事半功倍: 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了一个required()函数作为参数a和b的默认值.这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误. const required = () => {throw new Error('Missing parameter')}; const add =…
dom元素的tabindex属性介绍及在vue项目中的应用
dom元素的tabindex属性介绍及在vue项目中的应用 tabindex属性作用 让普通dom元素变为可聚焦的元素 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名). tabindex属性的取值和影响 它接受一个整数作为值,具有不同的结果,具体取决于整数的值: tabindex=负值 (通常是tabindex="-1"),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用. tabindex="0&quo…
Vue项目中出现Loading chunk {n} failed问题的解决方法
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug.在github.stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论: Loading ch…
vue项目中使用bpmn-流程图预览篇
前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modeler 和 Viewer,Modeler带有左侧节点栏和右侧属性栏,点击节点可进行相应操作,Viewer是“查看”,不能更改节点,两者相互独立,可按实际需求按需引入 绘制流程图:import BpmnModeler from 'bpmn-js/lib/Modeler'; 预览流程图:import Bpm…
vue项目中使用bpmn-节点篇
前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 step1:为节点添加点击.鼠标悬浮等事件 方案:bpmnModeler中的eventBus,只要你要,只要它有 代码: const eventBus = this.bpmnModeler.get('eventBus'); // 注册节点事件,eventTypes中可以写多个事件 const ev…
vue项目中使用bpmn-为节点添加颜色
内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方…
vue项目中使用bpmn-基础篇
内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 vue项目中的用到流程图bpmn,而bpmn-js官方的文档是英文的,也没有找到api文档.所以只能在使用过程中,自己不断爬坑填坑了. 首先,看一眼效果图 1.安装bpmn-js…
vue项目中使用bpmn-番外篇(留言问题总结)
前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创:我是作者原文 问题汇总 问题1: 来自@精灵铭心,第三篇“自定义platter”中,自定义节点拖拽到画布中,节点的标题显示不出来. 原因:自定义的节点,本质是一张图片填充了节点的位置,双击节点可以看到设置的标题.但是失去焦点后文字就看不到了.因为此时设置的标题被图片覆盖了. 解决办法:为该节点的标…
ACM 做题过程中的一些小技巧。
ACM做题过程中的一些小技巧. 1.一般用C语言节约空间,要用C++库函数或STL时才用C++; cout.cin和printf.scanf最好不要混用. 2.有时候int型不够用,可以用long long或__int64型(两个下划线__). 值类型表示值介于 -2^63 ( -9,223,372,036,854,775,808) 到2^63-1(+9,223,372,036,854,775,807 )之间的整数. printf("%I64d",a); printf("%l…
C语言中的调试小技巧
C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的优化后,会变得“难以辨认”,使用调试器也变得有些头疼.先举个简单的例子: 1 #include <stdio.h> 2 3 int main(){ 4 int a[6], i, sum = 0; 5 for(i = 0; i<6; i++) 6 a[i] = i<<2; 7 a[…
jquery获取json对象中的key小技巧
jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 18}; 想分别获取它的key 和 value 小技巧来啦 for (var key in json) { console.log(key); //获取key值 console.log(json[key]); //获取对应的value值 } 还要一种方法用jquery回调函数完成的 $.each(json, f…
在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下更改 var appData = require('../test/data.json')// 获取数据var apiRoutes = express.Router(); //get请求apiRoutes.get('/seller',function(req,res){ res.send({ app…
浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http请求 支持Promise API 拦截请求和响应 转化请求和响应(数据) 取消请求 自动转化json数据 客户端支持抵御XSRF(跨站请求伪造) 安装 Vue项目中使用如下命令安装 npm install axios --save 使用 Axios拥有诸多配置项,由于项目中请求数量很多,因此考虑将其…
去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path:…
vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in…