VUE2.0
关注
分享
扫一扫
闫炳岳
没有做不到的，只有想不到的！
展开
-
vue列表全选反选
3、点击选择调用方法。2、 选中时添加样式。4、全选反选调用方法。原创 2023-08-04 17:42:43 · 181 阅读 · 0 评论 -
vue后台常用模板
vue后台常用模板：element文档:http://element-cn.eleme.io/#/zh-CN/component/installationvue API:https://cn.vuejs.org/v2/api/以下是在下收集的三个常用的vue模板1、vue-manage-systemgit地址：https://github.com/lin-xin/vue-manage-system线上地址：http://blog.gdfengshuo.com/example/wor...原创 2020-09-03 11:04:08 · 449 阅读 · 0 评论 -
使用html2canvas将HTML转图片
我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。具体如何使用这款插件呢？接下来请让我用一个简单的示例来为大家讲解。现在假设要生成如下图片，而所有图片和文字都是动态获...原创 2020-03-31 11:46:04 · 638 阅读 · 0 评论 -
vue 提现动态变化原理
1.创建一个新的数组，点击选择的时候判断这个数组中有没有这个对象，没有则添加，有则删除2.每次点击循环这个对象，计算对应的价格，税，总额，清空数组，push新的数组，每次遍历新的数组计算...原创 2018-10-22 11:21:45 · 875 阅读 · 1 评论 -
vue验证码60秒倒计时功能
html部分<span v-show="show" @click="getCode">获取验证码</span><span v-show="!show" class="count">{{count}} s</span>js部分data(){ return { show: true, c原创 2018-08-24 15:38:07 · 621 阅读 · 1 评论 -
vue2.0创建的项目的步骤
1.由于vue项目依赖 node.js npm 需要先安装. 若没有请先安装，请百度//检查是否有node.js npm vuewin+r 输入cmd 输入node -v 回车 会出现node,js的版本 输入npm -v 回车 会出现npm的版本输入vue -V 回车 会出现vue的版本 2.安装vue：[plain] view plain co...原创 2018-08-14 11:06:19 · 1811 阅读 · 0 评论 -
VUE中只能输入数字
第一种1.使用@input方法和type=tel2.利用正则处理 第二种1..使用keyup方法2.利用正则1.可以输入汉字，空格自动回退onkeyup="this.value=this.value.replace(/(^\s+)|(\s+$)/g,'');"2.不可点击空格，汉字都不能打onkeyup="this.value=this.value...原创 2018-07-27 17:06:14 · 23500 阅读 · 1 评论 -
VUE不兼容手机百度浏览器，当前URL不会变问题
首页面滑到底部跳转到其他页面1.在app.vue中添加监听事件2.添加方法原创 2018-07-02 11:50:06 · 2172 阅读 · 0 评论 -
Vue-cli使用prerender-spa-plugin插件预渲染
使用prerender-spa-plugin插件预渲染众所周知单页面应用不利于SEO，为了解决这个问题网上所给出的2个解决方案1、服务器端渲染2、预渲染由于页面较少，且预渲染相对于SSH比较简单，于是选择预渲染页面，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，基本可以满足SEO需求。说明：使用这种方式，路由需要设置History 模式第一步：安装prerender-spa...原创 2018-06-19 16:17:03 · 7313 阅读 · 10 评论 -
vue内网穿透
1.打开https://natapp.cn/2.填写对应端口3.下载客户端，打开natapp.exe，运行natapp -authtoken=457e7ed5590b56774.打开config/index.js5.打开build/base.config.js,添加如下代码原创 2018-06-01 09:15:55 · 4213 阅读 · 0 评论 -
vue 动态生成二维码
一、使用jquery.qrcode生成二维码1、首先在页面中加入jquery库文件和qrcode插件<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js">&am原创 2018-09-17 11:18:15 · 1284 阅读 · 0 评论 -
vue项目seo（prerender-spa-plugin预渲染）
对于vue、react、angular这类项目而言，seo真的是一大痛点。为什么seo是spa项目的痛点网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：从 meta 标签中读取 keywords 、 description 的内容。根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。读取 a ...原创 2018-10-16 11:24:49 · 482 阅读 · 0 评论 -
Nuxt框架项目实战
前言今天抽空过了遍nuxt文档，写了个实践demo，关于nuxt我已经断断续续看了好几遍了，自我感觉也算是入门了吧，从开发到上线心里都有底。后期打算在项目用起来的是nuxt框架，一些函数工具库，比如ramda，lodash等等，后台服务估计会使用### fastify 这个库，目测非常方便，尝试尝试。基础只是还是以官方文档为主，尝试过程中如果有什么问题可以留言，看到会回复，文章如有错误，...原创 2018-10-19 11:21:06 · 4142 阅读 · 0 评论 -
Vue项目用百度地图定位
1.首先我们先在本地获取到城市定位<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scala原创 2018-10-30 09:49:48 · 3076 阅读 · 0 评论 -
vue监听Android_ios
//判断是否是安卓还是ios function isAndroid_ios(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //andro...原创 2018-03-27 18:16:33 · 648 阅读 · 0 评论 -
vue截取android和ios传递的参数
var url = "http://192.168.1.156/web/upH5/consult.html?id=1&url=27";getUrlId("url");function getUrlId(name){ var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)"); var r原创 2018-04-11 12:12:52 · 439 阅读 · 0 评论 -
vue实现微信分享
1.引入微信js<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>2.从后台获取签名并分享fenxiangFun(){//详情分享 var that = this; this.$http({ url:this....原创 2018-05-14 10:15:29 · 1549 阅读 · 0 评论 -
vue中vuex数据持久化
vuex数据持久化，vuex-persist第一步，安装vuex-persistnpm install -S vuex-persist第二步，在store文件中引用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import VuexPersist from 'vuex-persist'const v...原创 2018-10-26 14:54:04 · 1888 阅读 · 0 评论 -
vue 上传多张图片到阿里云
1.引入阿里云js<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>2.代码部分 <template> <div class="user"> <div class="nav"原创 2018-10-26 14:35:18 · 1661 阅读 · 0 评论 -
vue 地图找房功能
<template> <div class="mapSeekShop"> <div class="nav clearfix"> <img class="navBack fl" src="../../../static/images/common/back.png" alt="原创 2018-10-29 11:17:37 · 2118 阅读 · 1 评论 -
vue 上传单张图片到阿里云
1.引入阿里云js<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>2.html部分<div class="businessLicense"> <dl class="businessLicense3"> &a原创 2018-10-25 16:22:56 · 1234 阅读 · 0 评论 -
VUE登录后返回上一个页面
1.在main.js中2.在登录页面原创 2018-10-17 16:18:01 · 4259 阅读 · 0 评论 -
vue如何定义全局变量 全局函数
定义全局变量原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：Global.vue文件：<script>const serverSrc='www.baidu.com';c...原创 2018-06-01 09:00:41 · 12193 阅读 · 1 评论 -
vue微信、H5、支付宝支付接口
1.H5微信支付后台会返回一个URL，前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下)2.H5支付宝支付后台会返回一段html代码，前端直接用3.PC微信支付前端拼接后台地址直接生成二维码，然后放到img标签中，然后调用后台接口判断是否支付成功4.PC支付宝支付前端拼接参数直接跳转后台给的url2.微信公众号支付1.进入当前...原创 2018-06-13 16:00:59 · 3875 阅读 · 2 评论 -
vue多页面背景图片太大
1.多页面demohttps://github.com/yanby/vue-multiple-pages2.背景图片太大无法显示打开build/webpack.base.conf.js原创 2018-04-25 16:48:58 · 1388 阅读 · 0 评论 -
vue中使用图片懒加载
使用方式使用vue的 vue-lazyload 插件插件地址:https://www.npmjs.com/package/vue-lazyload案例demo： 懒加载案例demoInstallation 安装方式npm$ npm i vue-lazyload -DCDNCDN: https://unpkg.com/vue-lazyload/vue-lazyload.js<script...原创 2018-05-09 18:30:44 · 1372 阅读 · 0 评论 -
在Vue项目里正确地引用jQuery插件
1.安装jquery依赖npm install jquery --save-dev2.修改两处配置文件module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], ...原创 2018-04-18 09:12:54 · 7870 阅读 · 0 评论 -
vue发布遇到的问题
1.兼容ie9首先通过npm来安装babel-polyfillnpm install babel-polyfill --save-dev在webpack里面引用babel-polyfill修改build文件夹下的webpack.base.conf.js代码。entry: { app: ["babel-polyfill","./src/main.js"]} 2.背景图...原创 2018-04-04 21:52:31 · 224 阅读 · 0 评论 -
Vue中如何定义全局函数
方法一:http://www.jianshu.com/p/04dffe7a6b74//在mian.js中写入函数Vue.prototype.changeData = function (){ alert('执行成功');}//在所有组件里可调用函数this.changeData();方法二:// 写好自己需要的base.js文件exports.install = function (Vue,...原创 2018-04-17 17:41:17 · 1244 阅读 · 0 评论 -
vue mint-ui 下拉刷新，上拉加载
1.引用插件2.动态获取数据的高度3.下拉刷新4.上拉加载，加载完成以后显示没有更多数据了..原创 2018-04-16 17:56:26 · 2015 阅读 · 1 评论 -
vue中v-html中标签添加CSS样式
在Vue组件中，我们可以使用<style scoped>标签来添加针对该组件的CSS样式。<template> <div class="foo"> <div v-html="myHtml"></div> </div></template>原创 2018-04-16 17:35:40 · 7712 阅读 · 1 评论 -
vue选项卡
原创 2018-04-16 17:29:45 · 568 阅读 · 0 评论 -
【vue+axios】一个项目学会前端实现登录拦截
登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Index }, { ...原创 2018-03-20 13:47:20 · 288 阅读 · 0 评论 -
vue mint-ui 上拉加载，下拉刷新
1.html部分<div class="detail" ref="wrapper"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" ref="loadmo原创 2018-03-20 10:10:27 · 1119 阅读 · 0 评论 -
vue中Element ui-分页
1.引入Element ui2.html代码3.点击页数触发的方法原创 2018-05-10 10:57:33 · 1315 阅读 · 0 评论 -
vue项目中关闭ESLint
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。但是有时候会被ESLint的报错阻止程序的运行，这时候我们就想关闭这个ESLint了。在vue项目中关闭ESLint方法：找到build文件夹--->webpack.base.conf.js---->module将这些代码注释掉，如图：然后重启服务，npm ru...原创 2018-05-10 10:59:17 · 4232 阅读 · 0 评论 -
vue 中解决移动端使用 js sdk 在ios 上一直报invalid signature 的问题解决
最近项目需求，需要一个上传多张图片的功能，但是出现的问题是在安卓端是没有问题的，但是在ios上一直都是 invalid signature，但是刷新页面就没有问题了。Vue主打，router使用history模式，外加微信JSSDK套餐 排查了各种情况总是找不出原因，而且神奇的是在安卓上可以正常获取位置，就只是在ios上一直“invalid signature”，打印出来的当前url跟签名的url...原创 2018-06-13 14:17:20 · 2635 阅读 · 2 评论 -
vue项目中，图片无法显示时，显示默认图片
在vue项目中，同样的图片，设置在img的src中能正常显示 设置在img的onerror中不能正常显示原因项目启动后， 图片的路径并不是我们写的路径了。示例： 源代码：// 直接加载<img src="../../assets/img/timg.jpg">// 设置为logo.png加载失败后显示的默认图片<img src="/logo.png" onerror="thi...原创 2018-06-13 13:29:53 · 9693 阅读 · 0 评论 -
placeholder
1.获取焦点清空内容，失去焦点显示内容2.改变颜色input::-webkit-input-placeholder{ color: #ccc;}input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color: #ccc;}input:-moz-placeholder{ /* Mozilla Firefox 4 to...原创 2018-05-24 10:53:39 · 2876 阅读 · 0 评论 -
vue 解决ie9的兼容问题
当vue遇见ie9的时候，部署到服务器之后，打开居然是一片空白，vue是支持ie9的，这个时候就需要来一波兼容了参考尤大的解答 https://github.com/vuejs-templates/webpack/issues/26012首先npm install –save babel-polyfill然后在main.js中的最前面引入babel-polyfillimport 'babel-...原创 2018-05-14 11:17:56 · 6560 阅读 · 0 评论