vue项目
HaiJing1995
充电ing...
展开
-
Vue.js中使用axios
Vue.js中使用axios最近自己做项目才知道vue2.0作者提倡使用axios代替vue resource,并且不再维护vue resource。在vue-cli中使用axios的大致步骤如下:一、安装axiosnpm install axios二、导入axios在项目的main.js中 import axios form 'axios' this.$http.prototype原创 2017-05-11 10:39:56 · 1232 阅读 · 0 评论 -
微信公众号中登录回到之前页面
开始时的思路在去到登录页时将本页的地址存到跳转的url中,然后在登录页中拿到之前页面的地址,登录成功后利用window.location.href再跳回之前的页面。遇到的问题微信自带的返回是返回到历史页面的上一个,也就是跳转到上面页面后,用户点击返回,就又回到了登录页。解决办法登录成功后不以window.location.href的形式跳转页面,而是直接 window.history.go(-1)返原创 2017-08-18 23:25:08 · 6740 阅读 · 0 评论 -
Vue利用路由钩子token过期后跳转到登录页
Vue利用路由钩子token过期后跳转到登录页在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫。 分为全局导航钩子,单个路由独享的钩子,组件内钩子。 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next。 其中next有三个方法 (1)next(); //默认路由 (2)next(false原创 2017-06-26 09:20:20 · 15388 阅读 · 1 评论 -
Vue实现表格的翻页显示功能
Vue实现表格的翻页显示功能先简单介绍下用到的变量含义及大致思路: 表格的tr是用v-for=(item, index) in data循环显示的 下面的显示数字页是用v-for=page in totlepage循环显示的 totlepage:一共的页数。也就是Math.ceil(数据的个数 / 每页显示的个数); page:表示第几页。也就是下面的数组1、2、3、4、5… curren原创 2017-06-29 18:52:59 · 4151 阅读 · 0 评论 -
vee-validate的使用个人小结
vee-validate的使用个人小结学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则。英文文档可能会有不理解的地方,推荐大家看这篇博客下面来简单总结一下我的使用:一、安装npm install vee-validate@next --save后面加@next是为了安装vue2.0的版本二、引入我使用的是vue-cli脚手架工具,需要在main.js中import原创 2017-06-03 16:22:22 · 17321 阅读 · 2 评论 -
Vue实现点击后文字变色切换
Vue实现点击后文字变色切换这里用文字举例,图片切换的原理也是一样的大概思路是:用两个class相同的span分别是切换前后的文字,class相同主要是为了变换前后的文字位置相同。然后用click事件控制它们的显隐。代码如下:HTML:<span class="response" v-show="!showCommentInput" @click="showCommentInput = !showC原创 2017-06-02 15:31:20 · 22840 阅读 · 1 评论 -
Vue实现动态显示textarea剩余文字数量
Vue实现动态显示textarea剩余文字数量这里我们假设允许用户输入的最多数量为200个 html代码如下:<textarea maxlength="200" @input="descInput" v-model="desc" /><span>{{remnant}}/200</span>javascript代码如下:data(){ return{ remnant: 20原创 2017-05-22 12:27:14 · 2639 阅读 · 0 评论 -
vue移动端裁剪图片结合插件Cropper的使用
之前写了一个上传头像的功能模块,以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。 当然,使用就安装 npm install cropperjs 接着再引入 import Cropper from ‘cropperjs’ 下面是源码<template> <div id="demo"> <!-- 遮罩层 --> <div class="co转载 2017-05-21 17:54:47 · 2208 阅读 · 0 评论 -
Vue中保存用户登录状态
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的。 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的“登录注册”字样变为“用户名”。 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage代码如下: register.vue中用户点击登录触发signIn方法原创 2017-06-05 15:49:40 · 38247 阅读 · 1 评论 -
解决<input>中accept="image/*"反应慢的问题
解决<input>中accept=”image/*”反应慢的问题最近写的小项目中需要用到用户上传图片的功能,第一反应想到的就是<input type="file" accept="image/*" />用accept限制用户只能选择文件中的图片文件,但是,我发现点的时候经常没反应,我多点几下,过一阵才会接着都蹦出来。用户体验极差!原来是这样写过滤起来太慢了,可以改成这样<input type="fi原创 2017-05-20 16:45:12 · 622 阅读 · 0 评论 -
解决<input>中accept="image/*"反应慢的问题
解决<input>中accept=”image/*”反应慢的问题最近写的小项目中需要用到用户上传图片的功能,第一反应想到的就是<input type="file" accept="image/*" />用accept限制用户只能选择文件中的图片文件,但是,我发现点的时候经常没反应,我多点几下,过一阵才会接着都蹦出来。用户体验极差!原来是这样写过滤起来太慢了,可以改成这样<input type="fi原创 2017-05-20 16:45:02 · 3424 阅读 · 0 评论 -
如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
原文链接使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码// 在开头引入webpack,后面的plugins那里需要var webpack = require('webpack')// resolvemodule.exports = { // 其他代码... reso转载 2017-05-28 19:21:23 · 962 阅读 · 0 评论 -
JS平滑效果实现回到顶部
JS平滑效果实现回到顶部最近用Vue做的小项目中需要实现回到顶部的效果。主要思路就是: 利用document.documentElement.scrollTop || document.body.scrollTop获得滚动条的位置,然后利用window.scrollTo()每隔一秒向上滚动一点,从而实现平滑滚动的效果。主要代码如下: toTop(){ var gotoTop=原创 2017-05-28 11:39:45 · 4424 阅读 · 0 评论 -
Vue.js中实现通过一个dom的事件,使得另一dom也触发事件
Vue.js中实现通过一个dom的事件,使得另一dom也触发事件最近做的项目中要求用户点击搜索按钮进入一个搜索界面,同时按下确认键也要进入搜索界面,这里我进入搜索界面时使用的是路由html代码如下<input type="text" class="inputText" v-model="searchText" /> <router-link to="/search" class="search_i原创 2017-05-17 17:54:14 · 7042 阅读 · 0 评论 -
Vue.js中使用Scss
Vue.js中使用Scss使用vue-cli创建项目后,如果想使用scss或sass 首先,安装相关的依赖npm install --save-dev node-sass sass-loader然后在webpack.base.conf.js中添加{ test: /\.s[a|c]ss$/, loader: 'style!css!sass'}这样就可以写scss或sass的样式了<原创 2017-05-09 00:02:01 · 897 阅读 · 0 评论 -
Vue.js鼠标悬浮更换图片
Vue鼠标悬浮更换图片最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现。首先将所有的选中后图片都覆盖到没选中图片上html代码如下 <ul> <li> <a href=""> <img src="../../..原创 2017-05-17 12:12:58 · 8607 阅读 · 2 评论 -
Vue模拟数据,实现路由进入商品详情页面
Vue模拟数据,实现路由进入商品详情页面一、路由首先需要配置路由,就是点击good组件进入goodDetail组件 配置路由如下 { path: '/goodDetail', component:goodDetail }同时在good组件中写入如下点击事件,路由中加入查询参数,也就是商品的id//点击路由到商品详细信息页 selectGood(){原创 2017-05-27 10:24:39 · 13022 阅读 · 1 评论 -
使用Vue制作幻灯片
一、数据准备在页面中的幻灯片一般都会作为一个组件,由父组件将幻灯片组件需要的数据传入,数据slides如下:slides: [ { src: require('../assets/slideShow/pic1.jpg'), title: 'xxx1', href: 'detail/analys原创 2017-10-24 18:30:37 · 5464 阅读 · 0 评论