一、全局引入文件 1、先定义共用组件 common.vue <script type="text/javascript">// 定义一些公共的属性和方法const httpUrl = http://39.105.17.99:8080/function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {httpUrl,commonFun} </script> 2、在需要使用的地方导入 <script> // 导入共用组件 import global from ./common.vue export default {data () {return {username: ,password: ,// 赋...
本文实例讲述了原生js封装的ajax方法。分享给大家供大家参考，具体如下： 众所周知，框架之间会有冲突，这是源生js就起到作用了，下面介绍一种源生js封装的ajax请求。 function ajax(options) {options = options || {};options.type = (options.type || "GET").toUpperCase();options.dataType = options.dataType || "json";var params = formatParams(options.data);//创建xhr对象 - 非IE6if (window.XMLHttpRequest) {var xhr ...
我们开发项目的时候，用vue-cli 2.x版本新建的项目，只有dev, pro两种开发环境, 有时需要个test环境来给测试使用，所以找了很多方法，总结了个最简单的方法来给大家使用 1、package.json 在build下面添加一个test运行命令 "test": "node build/build.js" 2、prod.env.js在config -> prod.env.js 中修改代码use strict// 读取系统运行时候的变量const target = process.env.npm_lifecycle_event;// 控制台日志输出console.log('env ...
使用全局路由守卫实现 前端定义好路由，并且在路由上标记相应的权限信息 const routerMap = [{path: /permission,component: Layout,redirect: /permission/index,alwaysShow: true, // will always show the root menumeta: {title: permission,icon: lock,roles: [admin, editor] // you can set roles in root nav},children: [{path: page,component: () => import(@/views/permission/page),name: pagePermission,meta: {titl...
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子: function throttle (method, context) {clearTimeout((method.tId))method.tId = setTimeout(function () {method.call(context)}, 100)}function resizeDiv () {var div = document.getElementById(myDiv)div.style.height = div.offsetWidth + px}wi...
需求： 点击tab页，切换四个不同的图表，ajax向后台请求数据，展示在四个不同的图表中。其余的就不多说，直接上js代码了 示例代码： $(function() {$("#heart").on("click", function() {$(.heart-car).show();$(.sleep-car).hide();$(.breathe-car).hide();$(.sport-car).hide();});$("#breathe").on("click", function() {$(.heart-car).hide();$(.sleep-car).hide();$(.breathe-car).show();$(.sport-car).hide();});$("#sport"...
本文实例讲述了JS伪继承prototype实现方法。分享给大家供大家参考，具体如下： 众所周知JS中没有类的概念，但是要想实现类的功能可以同过function模拟。如： 第一种继承 （属性继承）//该函数相当于是一个构造器，也是一个伪类function Fn(){this.a = 4;this.b = 5;this.log = function(){console.log(this.a,this.b);}}function Fn1(){Fn.call(this);//调用父类的构造函数}Fn1.prototype = Fn.prototype;var fn = new Fn();var fn...
前言的前言 最近被一款来自京东凹凸实验室的多终端开发框架Taro吸粉了，官方对 Taro 的简介是使用React语法，一键生成多终端应用（包括小程序 / H5 / 快应用 / RN 等），而目前 Github 的 Star 也达到了非常可观的数量：4k+。对此，笔者也尝了把鲜，体验了下如何使用Taro写微信小程序。感觉还是十分灵活易用（一气呵成，都没遇到bug！），并且 Taro 还集成了 Redux，解决了小程序没有数据流框架的痛点。 这里贴一个 Taro 的官方文档...
本文介绍了vue树形结构获取键值的方法示例，分享给大家，具体如下： 把键值文件放入引入控件 import { getTypeValue } from @/api/dict/dictValue/index; 点击搜索，打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"><el-input readonly type="text" v-model="form.orgName"><el-button slot="append" icon="el-icon-search" @click="openDepartDialog()"></el-button></el-input></el-form-item...
本文实例讲述了JS实现区分中英文并统计字符个数的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js区分中英文统计字符个数</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel=" rel="external nofollow" stylesheet"> </head> <body><input type="text...
本文实例讲述了JavaScript实现读取与输出XML文件数据的方法。分享给大家供大家参考，具体如下： 一、介绍 通过JavaScript读取XML文档中数据的方法很多。 其根本的思路就是：首先在后台加载XML文档，然后通过JavaScript获取文档中所需的数据，最后应用HTML展示获取的数据。 二、获取XML元素的属性值的应用 下面应用attributes属性和getNamedItem()方法获取一个指定的XML文档中的属性值。 三、代码 首先创建一个XML文档，并且为指定的...
本文实例讲述了JS使用正则表达式获取小括号、中括号及花括号内容的方法。分享给大家供大家参考，具体如下： JS 正则表达式 获取小括号 中括号 花括号内的内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.gxlcms.com JS获取括号内容</title> </head> <body> <script type="text/javascript"> var str="123{xxxx}456[我的]789123[你的]456(1389090)789"; var regex1 = /\((.+?)\)/g; // () 小括号 var reg...
我的GitHub前端经验总结，喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法： 用一个数组存导航条，用v-for循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历重点是在：routerLink(index, path)函数，传入当前点击的下标，自定义一个下标，判断是否相等就用三元符号判断多给一个高亮样式如何解决刷新就不高亮或第一个高亮了，很简单...
最近做了一次关于vue组件自动化测试的分享，现在将vue组件单元测试环境搭建过程整理一下。这次搭建的测试环境和开发环境隔离，所以理论上适用所有使用vue的开发环境。 准备 这篇文章的重点在于搭建测试环境，所以我随便写了个webpack的vue开发环境。 代码地址：https://github.com/MarxJiao/vue-karma-test 目录结构如下目录结构app.vue和child.vue代码app.vuechild.vue运行效果如下： 运行效果测试环境搭建 注意：这里使用的是w...
本文实例讲述了vue.js使用3DES加密的方法。分享给大家供大家参考，具体如下： 如何在VUE-CLI手脚架建立的工程中使用3des加密： npm install crypto-js --save-dev import CryptoJS from crypto-js //DES加密 Pkcs7填充方式 encryptByDES(message, key){const keyHex = CryptoJS.enc.Utf8.parse(key);const encrypted = CryptoJS.DES.encrypt(message, keyHex, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return en...