vue
doublesXu
这个作者很懒,什么都没留下…
展开
-
Vue中监听键盘事件及自定义键盘事件
背景:在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题:我们必须知道某个按键的keyCode值才能完成匹配,使用起来十分不便。方案:在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听...转载 2019-08-02 16:32:44 · 1804 阅读 · 0 评论 -
vue绑定class和style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>class和style属性</title> <script src="js/vue.js"></script> <script> windo...原创 2019-08-02 17:25:14 · 363 阅读 · 0 评论 -
vue使用 v-for循环回来的数据动态绑定id值
<el-main> <el-row :gutter="30" style='height:262px;margin:0px;margin-top: 15px' v-for='(item, index) in infoArr' :key='index'> <el-col :span="5" class='w100P h100P t-a_c flex' styl...原创 2019-08-02 17:53:38 · 2180 阅读 · 0 评论 -
vue.js打包部署上线
我们使用cnpm run dev运行项目,只是在本地开发环境中进行测试,一旦将项目部署到服务器上就会出现各种问题,如axios请求跨域、css样式失效、图片失效、地址跳转404等一系列问题。。。这里主要简单介绍一下解决方案需求:将项目成功打包部署到linux下,能成功访问到页面。步骤一:把绝对路径改为相对路径,打开config/index.js 会看到一个build属性,这里就我们打包的...转载 2019-07-25 16:37:27 · 724 阅读 · 0 评论 -
解决vue路由History mode打包代码后,上线服务器后白屏问题及关于每次点击链接都要刷新页面的问题
vue项目打包上线以后出现白屏的情况第一种情况:由于把路由模式mode设置成history了,默认是hash。在项目开始的时候就设置了这个,然后一直没找到问题所在,后面百度了好久才发现是这个问题解决方法:路由里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行。如...原创 2019-07-25 17:11:44 · 3560 阅读 · 0 评论 -
vue.js的 mode:'history' 对IE9的兼容
Vue 兼容 ie9 的全面解决方案1、因为vue-router对于ie9默认是退回到hash模式的,所以在new router的时候,需要设置fallback:false(默认值为true)首先mode:'history'在IE9下是不能使用的,如果是IE9,会变成hash的模式(在2项满足fallback:true条件后)如果使用fallback(跟mode同一级别的属性,该属...转载 2019-07-25 17:22:49 · 958 阅读 · 0 评论 -
vue中使用less
a.安装相关模块:less、less-loader cnpm install less less-loader --save-devb.在webpack.config.js中添加loader { test: /\.less$/, //加载less loader: 'less-loader' } c.编写less,必须要指定lang="...原创 2019-07-26 16:07:31 · 847 阅读 · 0 评论 -
在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率ElementUI PC端MintUI 移动端一、全部引入安装element-uicnpm install element-ui -S 在main.js中引入并使用组件 import ElementUI from 'element-ui' import 'ele...原创 2019-07-26 16:45:50 · 551 阅读 · 0 评论 -
在vue中使用sass
安装sass的依赖包cnpm install node-sass --save-dev //安装node-sasscnpm install sass-loader --save-dev //安装sass-loadercnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样...原创 2019-07-26 17:05:47 · 238 阅读 · 0 评论 -
Vue全局使用axios的方法
axios 是一个基于 promise 的 HTTP 库,axios并没有install方法,所以是不能使用vue.use()方法的。1. 结合vue-axios使用看了[vue-axios](https://www.npmjs.com/package/vue-axios)的源码说明,它是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use()方法了。安装:n...转载 2019-08-18 19:46:32 · 683 阅读 · 0 评论 -
Axiso解决跨域访问及webpack之proxyTable设置跨域
源码地址:https://github.com/jitwxs/blog_sample这里以访问豆瓣Top250为例,直接访问如下:this.$axios.get("http://api.douban.com/v2/movie/top250").then(res=>{ console.log(res)}).catch(err=>{ console.log(err)})...转载 2019-07-12 13:23:12 · 664 阅读 · 1 评论 -
vue中axios的封装
第一步还是先下载axioscnpm install axios -S第二步建立一个htttp.jsimport axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 拦...转载 2019-07-12 13:02:04 · 208 阅读 · 0 评论 -
在Vue中使用icon 字体图标
1、使用线上的阿里iconfont图标库1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车2.点击购物车,添加至项目3 生成链接4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。2、但是考虑网络及用户体验 阿里iconfont下...转载 2019-06-19 16:20:29 · 21339 阅读 · 0 评论 -
vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem 。为什么这三个中要推荐 postcss-plugin-px2rem呢?因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性,它可以配置 是否对某个文件夹下的所有css文件不进行从px到rem的转换。所以我们可以利用...转载 2019-07-06 13:20:23 · 2353 阅读 · 0 评论 -
vue-router的参数传递
vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 <router-link>- 声明式的导航 <router-link>一、用name传递参数1.在路由文件src/router/index.js里配置name属性routes: [ { path: '/', name: 'Hello',...原创 2019-08-16 12:32:13 · 532 阅读 · 0 评论