vue
xinzi11243094
这个作者很懒,什么都没留下…
展开
-
vue-cli搭建项目引入jquery和jquery-weui步骤详解
vue简介 Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。vue引入jquery 1. 在package.json里加入依赖:dependenc...转载 2018-05-25 13:36:48 · 2395 阅读 · 0 评论 -
vue修改浏览器的标题
第一步:在main.js里面添加一个全局指令Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title }})第二步:在要调用的组件里面,随便找一个div加入如下代码v-title data-title="我的"...原创 2018-06-01 16:36:24 · 6714 阅读 · 1 评论 -
vue axios请求拦截器,判断是否登录超时,或对请求结果做一个统一处理
当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截。1.安装配置axios[plain] view plain copycnpm install --save axios 我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下[javascript] view ...转载 2018-06-01 17:57:44 · 2886 阅读 · 0 评论 -
vuex存储和本地存储(localstorage、sessionstorage)的区别
1. sessionStorage sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。 用法: 储存: 1. 点(.)运算符 sessionStorage.lastname = 'JSAnntQ'; 2. 方括号([ ])运算符 ...转载 2019-02-22 12:54:51 · 793 阅读 · 0 评论 -
vue中多个倒计时实现
下面给出一个效果图,我今天要说的就是实现下图这种多个倒计时很多时候我们做只有一个倒计时的情况比较多,比较简单只需要一个定时器setInterval,算出来赋赋值就好,但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了拿我自己的vue项目举个例 <!-- template --> <div v-for="(item,index) in li...转载 2019-02-28 14:12:46 · 1332 阅读 · 0 评论 -
vue qs插件的使用(get请求很有用)
安装npm install qs 使用let data = qs.stringify({ "username":this.username, "password":this.password});格式是这样的:username=renping&password=123456转载 2019-02-19 16:35:49 · 2264 阅读 · 0 评论 -
vue中使用微信jssdk
首先,确保你安装了weixin-js-sdk。如果还没有安装npm install weixin-js-sdk在页面中import wx from 'weixin-js-sdk';接下来,就需要在mounted里面进行wx.config()了。由于使用微信js需要进行授权配置,所以需要使用ajax请求从服务端获取微信jssdk的授权参数,ajax请求我这里使用的axios...转载 2019-03-05 11:53:49 · 2260 阅读 · 0 评论 -
vue中v-text,v-html, v-model, {{}}之间的异同
首先我们知道vue中有很多自定义指令,以v- 开头,例如:v-text,v-bind,v-model, v-if,等在这些指令中,部分指令之间是很容易被混淆,所以今天决定自己总结一下以下几个相似指令之间的异同:1.v-textv-text是用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变...转载 2019-03-02 19:21:45 · 958 阅读 · 0 评论 -
vue-seamless-scroll实现无缝上下滚动与左右滚动
上下滚动与左右滚动是我们很常见的一个功能,利用vue-seamless-scroll可以实现上下滚动与左右滚动,其官方网站地址是https://www.npmjs.com/package/vue-seamless-scroll,可以查看其用法。首先查看一下效果图:一、npm安装npminstallvue-seamless-scroll--save二、vue页面引用(1)imp...转载 2019-03-09 21:45:35 · 3591 阅读 · 0 评论 -
vue中多个倒计时实现
下面给出一个效果图,我今天要说的就是实现下图这种多个倒计时很多时候我们做只有一个倒计时的情况比较多,比较简单只需要一个定时器setInterval,算出来赋赋值就好,但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了拿我自己的vue项目举个例 <!-- template --> <div v-for="(item,index) in li...转载 2019-03-15 14:08:32 · 595 阅读 · 0 评论 -
vue实现公告栏文字上下滚动效果
<template> <div> <h2>公告栏文字停顿滚动</h2> <div class="textBox"> <transition name="slide"> <p class="text" :key="text.id">{{text.val}}</p...转载 2019-03-20 10:15:55 · 5903 阅读 · 1 评论 -
vue项目中如何利用base64上传图片与文件
前端在进行资源文件上传的时候,可以借助HTML5中,fileReader对象进行图片和文件的上传。利用该对象提供的一些属性方法更加方便的获取所上传的文件信息。在vue项目中操作方法如下:1)绑定input[type=‘file’]的change事件<input @change="uploadPhoto($event)" type="file" class="kyc-passin...转载 2019-03-31 22:07:48 · 1648 阅读 · 0 评论 -
vue实现消息的无缝滚动效果
<ul id="con1" ref="con1" :class="{anim:animate==true}"><li v-for='item in items'>{{item.name}}</li></ul><script>export default {data() { return { animate...转载 2019-03-27 20:03:49 · 2672 阅读 · 0 评论 -
Vue2路由切换动画效果实现
这篇文章主要讲的是路由切换的时候动画效果的实现,可以根据不同的路径去改变动画的效果,以下就是源码,可供参考:[html] view plain copy<template> <div id="app"> <transition :name="transitionName"> <router-view class="chil...转载 2018-05-31 18:12:37 · 3863 阅读 · 0 评论 -
浅谈vue2 单页面如何设置网页title
前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。推荐使用vue-wechat-title插件下载安装插件依赖?1npm install vue-wechat-title --...转载 2018-05-31 17:56:47 · 962 阅读 · 0 评论 -
vue引入bootstrap——webpack
vue引入bootstrap——webpack想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行。1、引入jquery2、引入bootstrap阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考文章:http://blog.csdn.net/wild46cat/article/details/76360229好,下面上货。1、首先按照上面文章中的内容,新建...转载 2018-05-25 13:37:27 · 452 阅读 · 0 评论 -
关于React Native 报Export declarations are not supported by current JavaScript version错误的解决问题
设置.js文件默认以jsx的语法打开在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示:当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个一劳永逸的方法把它给去掉吧:然后Apply/OK即可。设置.js文件中支持react-native语法高亮首先会发现在js文件中有不少的警告,类似这样:这个警告的原因是因为编辑器不知道所引用的这些东西是在...转载 2018-05-24 15:37:56 · 278 阅读 · 0 评论 -
Vue+element图片上传
这是一个上传图片子组件demo<template> <el-upload class="upload-demo" action="" ref="upload" :auto-upload='false' :on-change='changeUpload' accept="image/jpeg,image/gif,image/png,image/bmp"> &转载 2018-06-05 22:32:33 · 22994 阅读 · 1 评论 -
vue中使用MD5加密
前后台数据交互的时候,尤其是登录注册的时候MD5加密就用到了。 在vue中使用MD5加密 安装: 使用npmnpm install crypto --save12使用cdn<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>12引入import crypto from...转载 2018-06-05 22:36:53 · 1289 阅读 · 0 评论 -
vue中使用base64和md5
1.在项目根目录下安装cnpm install --save js-base64cnpm install --save js-md52.在项目文件中引入import md5 from 'js-md5';let Base64 = require('js-base64').Base64;3.在项目文件中使用base64:Base64.encode('dankogai'); // ZGFua29...转载 2018-06-05 22:37:40 · 3637 阅读 · 0 评论 -
vue2集成amap(高德地图)位置搜索和定位
有几个注意事项是,我是2017-6-15开发的,目前的vue-amap api太简陋了,而且定制化很恼火,所以建议集成vue-amap后,再结合官方文档。随便值得高兴的是,终于摆脱了百度地图恶心的api,不需要头部直接引用百度地图那个js了,因为我整个项目就只有一个页面要用到地图功能,全局引入太恶心了。下面进入正题:1. 到高德地图注册一个帐号,创建应用,创建一个key2. 安装[plain] ...转载 2018-06-05 22:40:40 · 7688 阅读 · 1 评论 -
vue配置代理
然后在main.js里面进行调用最后在需要的模块下面进行调用this.HOST原创 2018-05-30 12:16:51 · 988 阅读 · 0 评论 -
Vue项目分环境打包的实现步骤
在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。网上搜集了许多资料,现在可以分环境打包程序了,至于怎么打,接着住下看吧。第1步:安装cross-env在项目目录下运行如下命令安装cross-env,我的ide是webs...转载 2018-05-31 11:41:52 · 5613 阅读 · 1 评论 -
vue 在微信端实现前进左滑,返回右滑的动画效果
记录项目中遇到的问题: 1.前进页面左滑,返回页面右滑 的动画效果 2.前进页面数据刷新,返回页面不刷新 目的:通过缓存数据,减少调用接口的次数App.vue<template> <div id="app"> <transition :name="transitionName"> <keep-alive> &转载 2018-06-07 11:49:50 · 1641 阅读 · 1 评论 -
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件。因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些。先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件。效果预览关键代码及分析...转载 2018-06-07 11:55:06 · 3491 阅读 · 0 评论 -
vue.js实现点击后动态添加class及删除同级class
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class。如图:开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下html: 1 <div class="weui-mask" id="guige"> 2 <div class="gu...转载 2018-06-07 13:05:18 · 2370 阅读 · 0 评论 -
vue动态绑定class,tab切换非常好用
直接上代码<div @click="tab('left')" v-bind:class="{'decoration-line':showLeft}" class="col-xs-6 col-md-6 text-center theme-color item"> 排班信息</div><div @click="tab('right')" v-bind:cl原创 2018-06-07 13:46:16 · 3107 阅读 · 0 评论