vue2.x
vue2.x相关疑难杂症及苦口良药
zeroyulong
前端攻城狮,日常撸代码
展开
-
Uncaught URIError: URI malformed
报错原因:decodeURI不能解码“%”结局方法:改用unescape函数原创 2022-02-24 20:10:57 · 977 阅读 · 0 评论 -
ivew table滚动到顶部
ivew官方文档并未找到该方法关键时刻还得靠原生啊!!document.getElementsByClassName('ivu-table-body')[0].scroll(0, 0)原创 2021-08-02 16:07:37 · 323 阅读 · 0 评论 -
vue组件生命周期执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组件更新过程父beforeUpdate->父updated 销毁过程父beforeDestroy->...原创 2021-02-18 10:50:20 · 342 阅读 · 0 评论 -
Cannot read property 'resetFields' of undefined 问题及引申
转载自:https://www.cnblogs.com/papi/p/9268801.html问题描述: 使用element开发我的后台系统,编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog>绑定了数据data里的commentForm对象为了在新增弹出框清空表单, 使用了thi...转载 2018-12-21 14:21:09 · 5157 阅读 · 0 评论 -
Vue修饰符
转载自:https://segmentfault.com/a/1190000016786254为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫啥名字) 表单修饰符填写表单,最常用的是什么?...转载 2018-12-10 09:49:29 · 158 阅读 · 0 评论 -
vue-pdf
一、集成npm install vue-pdf --save二、直接在要使用的页面中使用<template> <pdf src="./static/relativity.pdf"></pdf></template><script>import pdf from 'vue-pdf'export default ...原创 2018-11-09 14:29:17 · 4344 阅读 · 7 评论 -
vuex 中的 store 和 $store 的区别
<router-link to="/login">{{ $store.state.userName }}</router-link><router-link to="/login">{{ store.state.userName }}</router-link><router-link to="/login"&原创 2018-11-05 15:41:08 · 22649 阅读 · 0 评论 -
vue-meta
vue-meta介绍借用 vue-meta github 上的介绍,基于Vue 2.0 的 vue-meta 插件,主要用于管理HMTL头部标签,同时也支持SSR。vue-meta有以下特点:在组件内设置 metaInfo,便可轻松实现头部标签的管理 metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新 支持 SSR一、集成npm install vue-me...原创 2018-11-02 18:00:23 · 2707 阅读 · 0 评论 -
vue tab切换小例
<template> <div> <h2>tab切换测试</h2> <ul class="tab-title"> <li :class="{active:activeIndex == index }" v-for="(item,index) in titleList&qu原创 2018-11-09 14:48:57 · 210 阅读 · 0 评论 -
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
转载自:https://www.cnblogs.com/moqiutao/p/7496718.html资源相对引用路径问题描述一般情况下,通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径。解决办法打开web...转载 2019-01-07 14:51:26 · 285 阅读 · 4 评论 -
vue动态组件
<template> <div class="move-block"> <h2>动态组件</h2> <div> <button v-for="tab in tabs" :key="tab.name"原创 2019-01-07 17:36:38 · 232 阅读 · 0 评论 -
vue数据更改视图不更新(响应式原理)
一、对象(用$set,直接赋值的方式视图无法更新)对象更改检测注意事项还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除: var vm = new Vue({ data: { a: 1 }})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的 对于已经创建的实例,Vue 不能动态...原创 2019-01-24 11:09:52 · 717 阅读 · 0 评论 -
用 async/await 来处理异步
昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了。 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function ...转载 2019-03-09 17:08:32 · 176 阅读 · 0 评论 -
vue cli3 多页应用
多页的实现方式其实就是复制N套index.html、 App.vue、 main.js、 router.js、如图index目录下的文件是vue cli3项目初始化后的基础文件,我们只是将其移动到了index文件夹下,subpageone 和subpagetwo的结构与index目录的结构一般无二,真正的核心是vue.config.js的配置。目录结构如图:核心配置 vue.con...原创 2019-03-28 14:23:26 · 1271 阅读 · 0 评论 -
vue 的provide/inject
类型: provide:Object | () => Object inject:Array<string> | { [key: string]: string | Symbol | Object } 详细: provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 这对选项需要一起使用,以允许一个祖先组件向...原创 2019-04-18 17:23:43 · 205 阅读 · 0 评论 -
vue-cli build时自动清除console
一、安装插件babel-plugin-transform-remove-consolenpm install babel-plugin-transform-remove-console --save-dev二、配置babel.config.jsmodule.exports = { plugins: ["transform-remove-console"] }三、本地打...原创 2019-07-29 10:44:42 · 1190 阅读 · 0 评论 -
vue控制台报错 Uncaught (in promise)
请求接口的方法中没有catch,加上即可。async getCode() { try { const res = await this.getCodeAsync() } catch (err) { console.log(err) }}原创 2019-07-23 14:07:39 · 10660 阅读 · 0 评论 -
vue中使用swiper
一、集成swipernpm install swiper二、main.js中引入公共样式import 'swiper/dist/css/swiper.min.css'三、页面中调用,在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里(若想要从后台请求图片放上去 new Swiper要写在网络请求成功的回调函数,否则无法出来数据。)<...原创 2018-10-31 16:02:59 · 395 阅读 · 0 评论 -
vue-lazyload使用
一、集成vue-lazyloadnpm install vue-lazyload二、配置main.jsimport VueLazyload from 'vue-lazyload'Vue.use(VueLazyload,{ preLoad:1.3, error:require('./assets/error.png'), loading:require('./assets/lo...原创 2018-10-31 15:08:04 · 461 阅读 · 0 评论 -
vue中使用mockjs
一、npm集成mockjsnpm install mockjs --save-dev二、新建mock文件mock.jsimport Mock from 'mockjs';const demoData = function(){ let Data = []; for (let i=0;i<10;i++){ let data={ name:Mock.Random....原创 2018-10-25 15:34:54 · 288 阅读 · 0 评论 -
vue中 直接提交mutation的两种方式
commit:提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。import { mapMutations } from 'vuex' export default { methods: { ......原创 2018-05-03 18:15:49 · 4350 阅读 · 0 评论 -
Vue 生命周期和钩子函数
生命周期探究 如下demo<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js">&l转载 2018-05-03 17:14:50 · 119 阅读 · 0 评论 -
vue2.0 axios 请求本地数据
直接请求本地json即可(本地JSON文件放在static文件夹之下)原创 2018-05-09 16:47:21 · 1069 阅读 · 0 评论 -
vue 在哪个生命周期进行数据请求
看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。vue-router文档数据获取实例原创 2018-05-09 16:22:16 · 24924 阅读 · 2 评论 -
vue2.0 组件名大小写
也即 <ImageInputer></ImageInputer>同样可以原创 2018-05-09 14:13:17 · 4745 阅读 · 0 评论 -
vue-cli 引入axios
一、npm 安装axios,文件根目录下安装,指令如下 npm install axios二、修改原型链,在main.js中引入axiosimport axios from 'axios'接着将axios改写为Vue的原型属性,Vue.prototype.$http=axios这样之后就可在每个组件的methods中调用$http命令完成数据请求三、在组件中使用...原创 2018-03-29 12:54:36 · 16450 阅读 · 3 评论 -
vue-cli 构建的项目中集成less
vue-cli 构建的项目中不支持less或者sass,需开发者手动引入。步骤如下:一、npm 安装less 和 less-loader,打开项目目录运行指令npm install less less-loader --save-dev二、打开文件目录build/webpack.base.conf.js,module.rules中添加如下代码module.exports = { module: ...原创 2018-03-28 12:06:03 · 666 阅读 · 0 评论 -
在Vue中关闭Eslint验证的方法
用vue-cli脚手架构建了项目,想去除Eslint验证设置如下打开文件:config/index.js 将useEslint = true 修改为 useEslint = false之后重启项目 npm run dev原创 2018-04-10 10:22:13 · 1640 阅读 · 0 评论 -
vue assets和static文件夹的作用
assets里面的会被webpack打包进你的代码里,而static里面的,就直接引用了。一般在static里面放一些类库的文件,在assets里面放属于该项目的资源文件。Webpacked Assets在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL。例如,在 <img src="./logo.png">...原创 2018-05-10 11:37:45 · 6775 阅读 · 0 评论 -
vue axios 给生产环境和发布环境配置不同的接口地址
本项目是vue-cli搭建的项目框架,引入axios用于数据请求。配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇博客vue-cli 引入axios)操作如下----------分割线----------vue-cli3 适配,由于vue-cli更新了新版本,现做新的适配,一、新建env.js(api/env.js)// 根据...原创 2018-05-07 15:02:23 · 11977 阅读 · 0 评论 -
vue-cli引入flexible
一、安装lib-flexiblenpm i lib-flexible --save二、在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'三、在项目根目录的index.html头部加入移动端适配的meta配置<meta name="viewport" content="width=device-wid...原创 2018-10-19 15:42:40 · 817 阅读 · 1 评论 -
vue集成px2rem
一、安装px2rem-loadernpm install px2rem-loader二、配置build文件夹下utils.js,找到generateLoaders 修改如下配置const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 //设计稿宽度/10 }...原创 2018-10-19 15:01:30 · 782 阅读 · 0 评论 -
vue 中npm run dev自动打开浏览器与热更新
一、自动打开浏览器config/index.js修改autoOpenBrowser:true重启项目二、热更新1. config/index.js 修改dev中 poll选项值为true(或者时间)2.build/webpack.dev.conf.js 修改devServer中hot选项值为true重启项目...原创 2018-10-12 10:33:35 · 6247 阅读 · 2 评论 -
封装简单的axios库
转载自https://blog.csdn.net/qq_35844177/article/details/788094991.新建http.js文件,封装axios get post 方法import axios from 'axios'import qs from 'qs'import 'es6-promise'axios.defaults.baseURL = '/api';...转载 2018-08-07 11:13:00 · 234 阅读 · 0 评论 -
Vue中this.$router.push参数获取
传参的两种方式一、params由于动态路由也是传递params的,所以在this.$router.push()方法中path不能和params一起使用,否则params将无效。需要用name来指定页面,也就是说除了用path属性跳转页面我们还可以通过路由配置的name属性跳转页面路由:跳转页面方式:如上图中两种方式都可以跳转到指定页面通过name获取页面,传递par...原创 2018-06-05 12:00:17 · 15766 阅读 · 1 评论 -
this.$router.push相关的vue-router的导航方法
router-linkrouter-link标签用于页面的跳转。<router-link to="/page01">page01</router-link>点击这个router-link标签router-view就会渲染路径为/page01的页面。注意:router-link默认是一个a标签的形式,如果需要显示不同的样子,可以在router-link标签中写入不同标签元素,...转载 2018-05-14 17:53:24 · 3773 阅读 · 0 评论 -
vue 中引入echarts
本项目使用 vue-cli 脚手架搭建安装echarts依赖npm install echarts -S创建图表全局引入main.js// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts Hello.vue<div id="myChart" :style="{width: '300px', h...转载 2018-05-07 19:18:08 · 609 阅读 · 0 评论 -
vue2.0 集成Ueditor富文本编辑器
1.放入静态资源并配置首先把官网下载的Ueditor资源,放入静态资源src/static中。修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图:2.引入在main.js中引入import '../static/UE/ueditor.config.js'import '../static/UE/ueditor.all.min.js'import...转载 2018-05-07 17:20:20 · 1682 阅读 · 1 评论 -
vue-cli 构建的项目中集成vuex
vue-cli 构建的项目中不包含vuex,需开发者手动引入。步骤如下一、npm安装vuex,打开项目目录运行指令 npm install vuex --save二、创建vuex相关文件夹及文件在src文件夹下新建store文件夹后,在store文件夹下新建如下文件:index.js、mutations.js、actions.js、getters.js及rootState.js三、修改入口文件ma...原创 2018-04-09 16:32:15 · 442 阅读 · 0 评论