![](https://img-blog.csdnimg.cn/20200103173157960.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE武功秘籍
VUE从入门到精通。
Oralinge
仰望星辰。
展开
-
vue中computed的属性对data中的属性赋值为undefined的原因
场景:我在computed中return了一个值,然后在data中直接将它复制给另一个属性。结果data中的属性值为undefined…代码示例:timer为undefined…原因:在这里很容易想到是执行顺序的问题,computed中的属性和data中的属性最终都会加载到app这个实例下。如果data中的实例属性被创建完成的时候,computed中的实例属性还没被创建,很明显,在dat...原创 2020-04-14 10:45:37 · 8659 阅读 · 0 评论 -
VUE中插槽slot用法 及其使用场景
VUE中封装UI组件的必经之路,它叫插槽(slot)。原创 2020-01-08 18:48:36 · 20518 阅读 · 14 评论 -
多系统集成:vue大型项目之分模块运行/打包
本文以vue-cli3+为例,实现多系统集成下的分模块打包。原创 2020-01-02 23:33:46 · 20684 阅读 · 8 评论 -
vue中$set用法详细讲解
地址没有改变,vue就监测不到数据变化。这个时候,双向绑定就失效了。原创 2019-12-16 18:50:48 · 162954 阅读 · 9 评论 -
Vue报错:Unexpected console statement .(no-console)
在package.json中rules下加入**“no-console”:“off”**。如下图:原创 2019-12-16 16:29:39 · 3888 阅读 · 0 评论 -
vue在自定义组件中使用v-model
要想解释清楚v-model在自定义组件中的用法,我得先来看看普通的组件传值…一、普通的组件传值如下代码:这是一个简单的父子,子父传值示例父组件:<!-- parent --><template> <div class="parent"> 我是父组件:{{par}} <Child @givepar="formChild" ...原创 2019-12-12 19:04:35 · 4238 阅读 · 2 评论 -
iview分页组件二次封装
代码如下:父组件代码<template> <div> <Pager v-model="pageDto" @currentchange="changePage" @sizechange="changeSize" /> </div></template><script>import Pager from...原创 2019-12-12 16:34:30 · 4624 阅读 · 1 评论 -
iview菜单menu封装成二级菜单和无限级菜单
ivew的menu封装成二级菜单和无限极菜单demo中有注释,此处不赘述了github地址:二级菜单封装:<template> <div class='con'> <Menu :theme="theme2" style='width:240px;float:left'> <div v-for="(item,index)...原创 2019-12-11 17:40:27 · 5707 阅读 · 1 评论 -
axios拦截器(请求拦截和响应拦截)
axios拦截器分为request请求拦截器和response响应拦截器。request请求拦截器:发送请求前统一处理,如:设置请求头headers等。response响应拦截器:有时候我们要根据响应的状态码来进行下一步操作。axios.interceptors.request.use(config => { config.interceptors = '请求拦截器' retu...原创 2019-10-11 18:53:20 · 9644 阅读 · 0 评论 -
邮箱/手机号等敏感信息掩码
代码: this.email =this.email.substr(0, 3) +"****" +this.email.substr(this.email.indexOf("@"), this.email.length);效果:原创 2019-10-11 18:28:18 · 5291 阅读 · 0 评论 -
三行CSS代码将Json格式化
方法如图,只需要在css中加入三行代码:white-space: pre-wrap;word-wrap: break-word;overflow: auto;效果:****另,一定要注意数据格式。****原创 2019-09-27 17:29:31 · 4734 阅读 · 1 评论 -
js/vue复制内容到粘贴板
使用****clipboard.js官网地址:clipboard.jsnpm方式:npm install clipboard --save直接引入:使用js引入。代码在组件中引入import Clipboard from "clipboard";封装函数: copy(val) { var clipboard = new Clipboard(`.${val}...原创 2019-09-27 16:44:35 · 3951 阅读 · 1 评论 -
VUE中iframe结合window.postMessage实现跨域通信
什么是iframe?iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。什么是postMessage?window.postMessage()方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数Document.domain设置为相同的值...原创 2019-08-02 19:34:59 · 9366 阅读 · 4 评论 -
vue组件传值
父传子首先,在父组件的页面中引入子组件。message为名字(随意取),problemTitle为父组件里面的属性,即需要向子组件传的值。父组件中代码:<children :message="problemTitle"></children>子组件代码:props: ["message"] (不要写在data中)(message为在父组件中...原创 2019-08-19 20:28:41 · 238 阅读 · 0 评论 -
vscode使用Ctrl+s保存按Eslint风格自动格式化js/vue/React代码(2020/03/04更新)
一、使用vscode下载四个插件:1、ESlint2、vetur3、Prettier - Code formatter4、Manta's Stylus Supremacy二、改配置,打开设置如下覆盖原来的代码:(有注释可根据个人喜好修改){ "workbench.iconTheme": "vscode-great-icons", "terminal.integrated...原创 2019-08-19 20:39:35 · 13664 阅读 · 5 评论 -
vue项目使用npm run dev运行启动
在package.json中配置如下:原创 2019-08-20 17:32:57 · 10508 阅读 · 2 评论 -
vue项目使用proxy代理解决跨域及nginx配置
在vue.config.js中配置proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } }} target:接口域名;chang...原创 2019-08-20 18:30:52 · 7678 阅读 · 1 评论 -
vue导航栏/公共组件在部分页面显示,部分页面不显示的方法及其原理
场景:导航条只在除登录注册以外的页面显示;公共组件在部分页面显示,部分页面不显示。方法:keep-alive结合$route.meta代码:APP.vue中:<template> <div id="app"> <div v-if="$route.meta.keepAlive"> <navTop></...原创 2019-08-21 20:42:14 · 13925 阅读 · 7 评论 -
vue中模糊搜索keyup在中文输入法下输入英文无效的解决方法
keyup事件在中文输入法下输入英文,vue中对应的val属性值为空。控制台显示并没有获取到任何值,但是input中确实有字母。纳尼?说好的双向绑定呢?要解决这个问题可以采用watch+keyup事件的方法。watch首先可以解决keyup失效的问题,可以检测到值的变化。但是也因此产生了问题,当点击下拉列表里的问题输入进input框的时候,watch会再一次检测到值的变化,重复调用接口。...原创 2019-08-21 21:04:27 · 2777 阅读 · 0 评论 -
vue-cli3打包后出现空白页的解决方案
在vue.config.js文件中加入如下配置:// 基本路径 // baseUrl: './',//vue-cli3.3以下版本使用 publicPath: './', // vue-cli3.3+新版本使用原创 2019-08-26 10:31:56 · 12442 阅读 · 4 评论 -
vue-router报错:Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name的解决办法
更新:vue已经修改此bug。https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md装一下依赖包吧。以下为原文:原文参考链接:https://blog.csdn.net/weixin_43202608/article/details/98884620今天写项目遇到一个报错:Uncaught (in pro...原创 2019-09-04 20:40:54 · 7047 阅读 · 5 评论 -
VUE热更新
使用npm run serve运行完成以后,默认浏览器直接打开显示页面。 步骤如下: 1.在项目根目录下,新建名为 vue.config.js的文件。 2.写入:module.exports = { devServer : { hot:true, open : true, port : 8080, ...原创 2019-07-11 12:58:11 · 9816 阅读 · 0 评论