vue
zyx_
存在即合理
展开
-
数组对象的拷贝
数组对象的拷贝错误方式:let arr1 = [{isShow: true,value:testValue}];let arr2 = [...arr1];// 采用es6解构赋值的方式let listItems = [];arr2.foreach( (item)=> {if (item.isShow == true) {let reg = RegExp(/Val...原创 2019-08-14 17:07:58 · 273 阅读 · 0 评论 -
element ui 全局的loading
我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对?import axios from 'axios';import { Message, Loading } from 'element-ui';import Cookies from 'js-cookie';import router from '@/router/index'l...转载 2019-01-17 10:38:55 · 3271 阅读 · 0 评论 -
axios interceptors 拦截器 添加loading
//interceptors.js// vue axios配置 发起请求加载loading请求结束关闭loading// http request 请求拦截器,有token值则配置上token值import axios from 'axios'import router from '../router'import { Loading } from 'element-ui'impor...转载 2019-01-17 10:32:12 · 3485 阅读 · 0 评论 -
vue-cli 2.x中全局引用公共scss
1.安装scss这些插件使我们使用scss所必须安装的npm install node-sass --save-devnpm install sass-loader --save-devnpm install style-loader --save-dev2.安装sass-resources-loader这个插件是我们想要全局引用scss所要安装的npm install...转载 2019-01-02 10:23:05 · 375 阅读 · 0 评论 -
vue 配置跨域
在localhost环境下跑项目时,接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,我们进入 config/index.js 代码下如下配置即可。dev: { // 静态资源文件夹 assetsSubDirectory: 'static', // 发布路径 assetsPu...转载 2018-12-26 08:54:18 · 180 阅读 · 1 评论 -
封装一个vue component
npm install countupindex.vue 如下:<template><span ref='countup'></span></template> <script>import CountUp from 'countup.js'export default {name: 'countu...转载 2018-12-25 16:27:56 · 391 阅读 · 0 评论 -
vue项目如何刷新当前页面
https://cn.vuejs.org/v2/api/#provide-inject 这是vue 文档中描述使用过程provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来...转载 2018-12-25 10:51:23 · 800 阅读 · 1 评论 -
为什么Vuex中必须要通过commit提交mutation?
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:const store = new Vuex.Store({ st...转载 2018-10-17 13:40:47 · 7702 阅读 · 0 评论 -
vue,router-link传参以及参数的使用
1.路径:http://localhost:8081/#/test?name=1<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)使用:this.$route.query.id2.路径:http://localhost:8081/#/test/1<ro...转载 2018-10-17 13:21:03 · 185 阅读 · 0 评论 -
vue 懒加载的写法
在我们打包构建的时候,JavaScript的包会变得非常的大,导致首页加载时间过长,浪费流量等问题。合理的方式是我们通过路由把对应的组建进行分割,然后当路由被访问的时候才加载对应的组建,这样就会高效很多。常见的几种懒加载写法1.resolve => require([URL], resolve),支持性好 2.() => system.import(URL) , webpack...转载 2019-01-17 14:19:22 · 1060 阅读 · 0 评论 -
vue 强制组件重新渲染(重置)
数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效方案一当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题<template> <third-comp v-if="reFresh"/></template><script> export defaul...转载 2019-01-26 14:12:25 · 57442 阅读 · 13 评论 -
全屏 插件 screenfull
https://sindresorhus.com/screenfull.js/第一步:安装:在命令行中执行:npm install --save screenfull (注:因为这是生产依赖,所以执行--save) 第二步:直接上代码:<template> <el-button type="primary" class="button" @clic...转载 2019-02-23 15:39:12 · 6082 阅读 · 0 评论 -
Vue项目报错:Uncaught SyntaxError: Unexpected token <
今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题:控制台的提示:Uncaught SyntaxError: Unexpected token <按照提示进入文件,再看如下图:仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的。解决方案...转载 2019-04-16 15:56:49 · 3127 阅读 · 0 评论 -
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
npm run dev 错误提示:{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.解决方法:找到你的工程文件夹里的 YourProName\node_modules\vue-loader\lib\template-compiler\index.js//将以下代码if (!...转载 2019-03-26 13:44:16 · 2875 阅读 · 0 评论 -
vue-cli 中 eslint 语法错误警告解决
报错信息./src/main.js error eol-last Newline required at end of file but not found /Users/xxx/site/xxx/src/main.js:24:2 router.start(require('./app.vue'), '#app') ^✖ 1 problem (1 err...原创 2019-03-26 13:42:36 · 3060 阅读 · 0 评论 -
vue ui 组件库的创建 发布
本文提供的方式是将组件直接引入,不需要使用Vue.use(),即没有给组件添加install方法。步骤一注册npm账号,用于发布组件。// 注册后npm adduser // 添加用户(填写注册的用户名,密码,邮箱)npm whoami // 查看当前注册的用户附:注册npm需要确认邮箱,邮箱确认后需要重新登录npm,否则会一直提示邮箱未确认。步骤二构建一个vue项目...转载 2019-03-25 15:12:17 · 281 阅读 · 0 评论 -
ElementUI table标签如何让某一行默认展开。
Element UI 中可展开表格手风琴效果实现(toggleRowExpansion方法的正确使用方式)可以看到官方代码中在这边没有让这个可展开table自动折叠的功能,我点击了别的标签页后上次点击的行仍旧处在一个展开的状态,而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态,体验不是特别好,可以说有点糟糕了,但是我后来在后面的文档中发现The methods 里面有写到一个...转载 2019-03-13 09:22:13 · 25855 阅读 · 3 评论 -
vue如何定义全局变量 全局函数
定义全局变量原理:设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。全局变量模块文件:Global.vue文件:<script>const serverSrc='www.baidu.com';const...转载 2019-03-20 15:03:13 · 620 阅读 · 0 评论 -
现有vue 项目中使用typeScript
typeScript 的使用 webpack 要4.x以上版本的 需要升级为什么要接入typescriptjavascript由于自身的弱类型,使用起来非常灵活。这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓,主要是对外接口和公共方法,对接起来非常头疼。主要表现在几方面:参数类型没有校验,怎么传都有,有时会出现一些由于类型转换带来的未知问题。 接口文档...转载 2019-02-21 10:58:52 · 2812 阅读 · 0 评论 -
module.exports与exports,export与export default之间的关系和区别
前提: CommonJS模块规范和ES6模块规范完全是两种不同的概念。CommonJS模块规范Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性...转载 2019-02-20 16:57:13 · 131 阅读 · 0 评论 -
vue 引用mockjs 模拟真实的数据
vue+mockjs 模拟数据,实现前后端分离开发在项目中尝试了mockjs,mock数据,实现前后端分离开发。关于mockjs,官网描述的是1.前后端分离2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。3.数据类型丰富4.通过随机数据,模拟各种场景。等等优点。总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦...转载 2018-09-28 11:21:59 · 26292 阅读 · 1 评论 -
Vue beforeRouteEnter 的next执行时机
背景今天在用vue实现界面的时候,想在beforeRouteEnter钩子函数中去获取数据,然后通过next方法设置到跳转页面的实例中,结果发现数据一直没办法在界面渲染的时候赋值,苦思不得其解,遂google之,终寻原因,记录之。 注意beforeRouteEnter (to, from, next) { console.log(this); //undefined,不能用...转载 2018-10-12 15:31:35 · 1720 阅读 · 0 评论 -
vue组件参数传递命名
今天在父子组件传值的时候,父组件的值死活传不到子组件中,断点调试也没有值,后来打开控制台发现警告信息,html语句中不识别大写字母,再一看,参数是驼峰命名,难不成是这个问题,遂百度之,确实如此,html中不支持大下写,所以父组件传值的时候,参数名应该用短横线连接。 注意错误示例:<my-component :userName='userName'></my-co...转载 2018-10-12 15:29:23 · 645 阅读 · 1 评论 -
vue axios的封装 请求状态的错误提示
/** * axios配置,输出为vue组建 * */import axios from 'axios';import qs from 'qs'import CookiesJS from 'js-cookie'import router from '../router'// http request 拦截器axios.interceptors.request.use( config =>...原创 2018-03-12 14:07:10 · 6661 阅读 · 1 评论 -
vue 跨域 反向代理
Nginx proxy_pass 本地调试跨域接口前言Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了.Igor 将源代码以类BSD许可证的形式发布.尽管还是测试版,但是,Nginx...转载 2018-03-12 09:41:37 · 3095 阅读 · 0 评论 -
vue2.0的Element UI的表格table列时间戳格式化
vue 安装 moment vue2.0的Element UI的表格table列时间戳格式化表格属性<el-table :data="tableData" v-loading.body="loading" border @selection-change="...转载 2018-03-16 13:34:49 · 5839 阅读 · 2 评论 -
vue后台数据接入
在项目中如果要接的后台数据接口量大,则需要将接口统一管理,将axios封装后 在页面中相应的位置上调用原创 2018-03-08 16:00:20 · 1517 阅读 · 0 评论 -
vue中如何带参数打开新的html
在项目中我们会有跳转到指定html页面的需求,在vue组件中:data(){return {list:[{name: 'test1',videoUrl: 'ddd.mp4'}]}},methods: {currVideo(data){window.open("/static/news.html?videoS原创 2018-02-07 10:01:55 · 11170 阅读 · 4 评论 -
vue $delete 的使用
在vue1.0版本中定义了$delete 但为了提高性能,能用原生js实现的就不再多步操作,因此在vue2.0中将$delete这个方法直接去掉了采用原生js的方法如何删除当前的选中项呢?data(){ return { currentPro: '',proList: []}},methods:{ delCur(){var index = thi原创 2018-02-06 16:44:25 · 12240 阅读 · 0 评论 -
vue中判断服务器传递的数据是否存在 即 vue监听一个不存在的变量
如果在项目中的某个方法中判断服务器端传来的数据是否存在可以 采用 typeof 属性 == "undefined" 判断例如 : data(){ return { testData:[{ name: 'a', sex:'0'}]}},methods:{ test(item){if(typeof item.原创 2018-02-06 16:02:24 · 9460 阅读 · 0 评论 -
vue中使用原生事件
在项目中用到element ui 这个ui框架,有些组件没有封装的事件,例如click事件 ,我在使用时感觉不起作用,后来查看vue官方文档,发现有些原生事件是不提供,还有我们自定义的组件也是不能直接使用click事件的 ,需要在click事件后写上.native才能生效即 例如@click.native = "enter">原创 2018-02-06 15:37:57 · 5615 阅读 · 0 评论 -
vue proxyTable配置
在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需...转载 2018-03-13 15:19:13 · 20197 阅读 · 1 评论 -
vue proxyTable 跨域配置
在实际项目开发过程中vue cli自带的服务器,但是我们实际要去请求我们的数据接口,服务器与服务器之间产生了一个代理跨域问题,我们需要修改自带服务的配置。在config 中的index文件中,有一个proxyTable参数。参数修改如下:proxyTable: { '/list': { target: 'http://xxx.xxx.com/xxx/6', pathRewrite: ...转载 2018-03-13 15:24:42 · 823 阅读 · 0 评论 -
将本地项目上传到github上
https://segmentfault.com/a/1190000011909294转载 2018-04-02 16:27:31 · 118 阅读 · 0 评论 -
vue $refs的基本用法
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button></div> <script>new Vue({ el: &q转载 2018-10-12 14:42:29 · 345 阅读 · 0 评论 -
vuex 中dispatch 和 commit 的用法和区别
dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)commit:同步操作,写法:this.$store.commit('mutations方法名',值)转载 2018-07-05 13:24:51 · 70919 阅读 · 4 评论 -
vue :src中如果动态从后台获取不到的话,显示默认图片的方法
vue 使用require引入即可,更改后代码为:转载 2018-07-09 13:50:23 · 5029 阅读 · 0 评论 -
vue run dev 启动时报错 There are multiple modules with names that only differ in casing. This can lead
warning in ./~/vue-style-loader/lib/listToStyles.jsThere are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-...转载 2018-07-02 14:30:22 · 2490 阅读 · 0 评论 -
vuex存储token
1.在login.vue中通过发送http请求获取token[javascript] view plain copy//根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pas...转载 2018-06-21 15:06:41 · 10547 阅读 · 0 评论 -
vue 学习之框架或插件组件样式更改
修改组件样式三种方式以下例子以 vux 来弄第一种:使用 /deep推荐的。看下面例子<template> <div class="box-out"> <step v-model="step1" background-color='#fbf9fe'> <step-item title="步骤一" description=&qu转载 2018-05-28 08:51:44 · 1140 阅读 · 0 评论