Vue
关注
分享
扫一扫
辣子鸡丁上将
这个作者很懒，什么都没留下…
展开
-
js根据银行卡号进行判断属于哪个银行并返回银行卡类型
1. checkCard.js//cardType:DC->储蓄卡,CC->信用卡export function bankCardAttribution(bankCard) { var cardTypeMap = { DC: "储蓄卡", CC: "信用卡", SCC: "准贷记卡", PC: "预付费卡" }; funct...原创 2018-08-30 17:23:20 · 4475 阅读 · 1 评论 -
vue密码强度组件
1. checkpassStrong.jsexport function checkStrong(sValue) { var modes = 0; //正则表达式验证符合要求的 if (sValue.length < 1) return modes; if (/\d/.test(sValue)) modes++; //数字 if (/[a-z]/.test(sVal...原创 2018-08-30 16:53:18 · 6075 阅读 · 0 评论 -
vue中的事件修饰符
<template> <div id=''> <!--原创 2018-08-17 17:15:20 · 177 阅读 · 0 评论 -
Vue中导出Excel文件
1 . 在文件中引入Blob.js & Export2Excel.js文件 ；例如我将文件放在src/plugins/vendor/ ;2. Blob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * ...原创 2018-08-13 17:20:22 · 1779 阅读 · 3 评论 -
使用mintUI中的loadmore组件实现下拉加载，下拉刷新的功能
1. import MintUI from 'mint-ui'; //按需引入import 'mint-ui/lib/style.css'Vue.use(MintUI);// Vue.component('mt-loadmore',Loadmore);2. <template> <div class="page-loadmore"> &l...原创 2018-08-13 11:59:37 · 852 阅读 · 0 评论 -
在vue项目中设置网站icon
1. 将icon放在与index.html同级的目录下2. 在webpack.dev.conf.js中，新增代码var path = require('path') //新增new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, ...原创 2018-08-08 08:47:59 · 1277 阅读 · 0 评论 -
使用mintUI实现下拉刷新上拉加载
<template> <div class="page-loadmore"> <h1 class="page-title">Pull up</h1> <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p&am转载 2018-08-11 16:49:15 · 1881 阅读 · 0 评论 -
认识vuex中的modules
本文参考文献store/modules/user.jsexport default{ // 通过添加namespaced将actions,mutations,getters限定在模块命名空间中 // 当所有的actions, mutations, getters 都被限定到模块的命名空间下，我们dispatch actions, commit mutations 都需要用到...原创 2018-08-01 16:15:55 · 792 阅读 · 0 评论 -
使用vconsole查看移动端的控制台
1. cnpm i vconsole2. 在static文件下新建utils/vconsole.jsimport Vconsole from 'vconsole';let vConsole = new Vconsole();export default vConsole;3. 在main.js中引入/* eslint-disable no-unused-vars */i...原创 2018-08-27 17:54:19 · 2645 阅读 · 0 评论 -
vuex永久存储数据
vuex-persisthttps://www.npmjs.com/package/vuex-persist原创 2018-08-28 15:51:37 · 2441 阅读 · 0 评论 -
WebStorageCache 给local storage添加过期日期
webStorageCacheimport WebStorageCache from 'web-storage-cache'var wsCache = new WebStorageCache();// cache 'wqteam' at 'username', expired in 100 secondswsCache.set('username', 'wqteam', {exp : ...原创 2018-08-28 16:24:29 · 674 阅读 · 0 评论 -
Vue中央事件总线bus
大家都知道，一个，可以作为一个简单的组件传递数据，用于解决跨级和兄弟组件通信问题，那么，这篇文字，我将使用这种思想，将bus封装为一个Vue的插件，可以在所有的组件间任意使用，而不需要导入bus。首先，我们使用vue-cli创建一个项目vue-bus, 在src目录下，新建vue-bus.js文件，vue-bus插件像vue-router 和 Vuex一样，给Vue对象添加一个属性$bus...转载 2019-04-19 11:08:49 · 594 阅读 · 0 评论 -
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案首先sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端：sockjs-node（https://github.com/sockjs/sockjs-node）客户端：sockjs-clien（http...转载 2019-04-18 18:15:42 · 4107 阅读 · 2 评论 -
Vue打包后部署NGINX，router mode history
server { listen 80; server_name localhost; index index.html; root / root / dist; location / { root / root / dist; try_files $uri $uri / /index.html = 404 ; }}...转载 2019-04-22 12:35:12 · 588 阅读 · 0 评论 -
vue--identify 生成随机验证码
随机验证码原创 2018-08-29 17:48:01 · 2328 阅读 · 0 评论 -
使用electron将vue项目打包为web或者是app应用
1.vue中添加electron 和 electron-packagecnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件，之后要用，提前下载好2. vue项目中package.ison文件中“scripts”添加"electron_dev": "np...原创 2018-07-28 11:37:23 · 12335 阅读 · 3 评论 -
vue elementui 中使用国际化
1.定义i18n文件夹，并添加index.js,en.js,zh.js index.jsimport Vue from 'vue';//引入vue-i18n cnpm i vue-i18n;import VueI18n from 'vue-i18n';import enElementLocale from 'element-ui/lib/locale/lang/en'impor...原创 2018-07-30 18:29:54 · 2256 阅读 · 1 评论 -
js查看使用设备的信息
1. device.js2.使用方法：cnpm install current-deviceconst device = require('current-device').default原创 2018-07-30 13:53:54 · 225 阅读 · 0 评论 -
Vue结合webpack实现路由懒加载和分类打包
Vue项目中路由设置一般会引入组件，然后使用。但是这会造成项目一次加载很多组件，影响响应时间。解决这个问题就可以使用路由的懒加载。有三种方法可以实现：export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component:r=>require.ensure([],(...原创 2018-06-20 10:32:29 · 4372 阅读 · 0 评论 -
Vue模拟数据的使用mockjs
1. npm i mockjs --save-dev2. 创建mock\mock.js3. import Mock from 'mockjs';Mock.mock('user',{ 'name':'@name', 'age|1-100':50, 'sex|0-1':0})export default Mock;4. 在main.js中引入import './mock/mock';...原创 2018-06-30 18:15:01 · 768 阅读 · 0 评论 -
Vue封装请求
import axios from 'axios';import qs from 'qs';// axios 配置axios.defaults.timeout = 5000;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';axios.defaults.wi...原创 2018-06-30 17:15:15 · 5805 阅读 · 1 评论 -
Vue项目加载本地的json文件模拟请求后台数据
1. 安装express和axioscnpm i express --save & cnpm i axios --save2. 在main.js中引入axiosimport axios from ‘axios’；Vue.prototype.$axios = axios;3. 在build/webpack.dev.conf.js中配置express并设置路由规则const CopyWebp...原创 2018-06-30 15:04:32 · 2913 阅读 · 0 评论 -
vue 中$mount
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。////main.jsnew Vue({ router, render:h=>h(App)}).$mount('#app')new Vue({ el: '#app', router, // compone...原创 2018-06-19 11:00:38 · 1063 阅读 · 0 评论 -
vue中computed & methods & watch 的区别
1. computed 和 methods 最终实现的结果是一样的，然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。我们为什么需要缓存？假设我们有...原创 2018-06-30 10:24:21 · 262 阅读 · 0 评论 -
vue.filter&computed
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>vue自定义过滤器</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js&原创 2018-06-25 17:35:57 · 636 阅读 · 0 评论 -
Vue单页面应用修改title
Vue单页面应用修改title，两种方法在router/index.js中写路由添加title path: '/', name: 'Index', component: Index, meta:{ title:'款项管理' },//修改title 1.router.beforeEach((to, from, next) => { document.title = to.meta.tit...原创 2018-06-20 11:15:39 · 1142 阅读 · 0 评论 -
vue 自定义指令 Vue-directive
1. 自定义指令的钩子函数Vue.directive('focus',{ bind:()=>{}, //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:()=>{}, //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update:()=>{}, //所在组件的 VNode 更新时调用，但是可...原创 2018-06-20 15:48:26 · 701 阅读 · 0 评论 -
vue 路由传参用query或params
两种方法都可以使用，不用点是：1. this.$router.push({path:'/msite', query:{geohash}})this.$router.push({name:'msite', params:{geohash}})query 和path 在一起使用 ， 而params和name一起使用获取参数的方法：this.$route.query.XXX ; this.$route....原创 2018-07-09 18:18:53 · 587 阅读 · 0 评论 -
Vue项目elementUI中封装表单验证
1.直接在Vue文件中使用验证：<template> <div class="login-wrap"> <div class="ms-title">后台管理系统</div> <div class="ms-login"> <el-原创 2018-07-20 10:27:53 · 4795 阅读 · 0 评论 -
vue keepalive路由跳转保留离开时的位置，回到原页面时是在离开时的位置
与keepAlive结合，如果keepAlive的话，保存停留的位置：scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (from.meta.keepAlive) { from....原创 2018-07-06 10:38:35 · 10126 阅读 · 5 评论 -
vue 中使用fastclick
1. cnpm i fastclick --save2. 在main.js中引入并绑定到body import fastclick from 'fastclick';3. fastclick.attach(document.body);原创 2018-07-05 16:39:17 · 3538 阅读 · 0 评论 -
vue路由验证和请求拦截
1.在定义路由时添加自定义字段meta: { requireAuth: true,},2.使用路由定义的钩子函数router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { if (store.state.token) { next(); } e...原创 2018-07-05 15:11:55 · 1320 阅读 · 0 评论 -
vue-cli 使用less
npm install less less-loader --save-dev安装完成就可以使用了。原创 2018-07-05 09:48:15 · 184 阅读 · 0 评论 -
vue mixins & extends
1.const myMixin = { created(){ console.log(this.msg + '1') }, methods:{ hello(){ console.log(this.msg + '2') } } }; Vu...原创 2018-07-10 15:39:24 · 344 阅读 · 0 评论