![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 77
太阳晒屁股了
System.out.println("hello world");
展开
-
vue插槽slot
一、前言vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢?我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。注意:以下的所有内容是基于vue版本 2.6.0 起二、插槽是什么下面看一个例子写一个父组件:<template> <div>.原创 2021-04-30 11:07:08 · 300 阅读 · 2 评论 -
vue中异步函数async和await
vue中异步函数async和await的用法一,异步函数async1.1,async作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数。就是在函数前面加上async关键字,来表示它是异步的,那怎么调用呢?async函数也是函数,平时我们怎么使用函数就怎么使用。为了表示它没有阻塞它后面代码的执行,我们在async函数调用之后加一句console.log。async timeo...原创 2021-03-18 11:30:33 · 2859 阅读 · 0 评论 -
Vue项目中使用svg图标
1,安装依赖npm install svg-sprite-loader --save-dev2,配置build目录下的webpack.base.conf.js,主要在两个地方添加代码3,在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue中内容如下<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-原创 2020-11-27 17:24:10 · 411 阅读 · 0 评论 -
vue使用async+await同步请求
前言:前端开发中有这么一个场景,当我们多个接口需要请求后台时,有个接口B需要另一个接口A返回到的数据.我们通常的做法的是在A接口正常返回的代码里再去请求接口BgetUserInfo () { qryUserInfo().then(res => { if (res.code === 0) { this.getUserRole() } })}以上做法完全可以,但是代码的可读性比较不好.下面我们用同步的方法来实现上面的需求原创 2020-09-28 11:22:35 · 2430 阅读 · 0 评论 -
Element-ui el-tree新增和删除节点后如何刷新tree
一, 当新增节点后刷新当前节点node.loaded = false;node.expand(); //新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的的展开事件,二, 删除节点node.parent.loaded = falsenode.parent.expand()完...原创 2020-06-12 16:52:54 · 6221 阅读 · 1 评论 -
解决Vue项目使用history模式部署到nginx服务器下,非根目录下刷新页面空白的问题
前言:vue项目路由表中mode: history的模式下,打包部署到nginx服务器下,在非根目录下刷新出现页面空白一,更改Vue路由表配置二,更改Vue打包配置三,最后我们来更改nginx配置完...原创 2019-12-21 13:02:44 · 2603 阅读 · 1 评论 -
浅谈Vue中$Router中query与params传参与接收参数,以及$Router与$Route的区别
一,$Router中query与params传参与接收参数1,query传参与接参:传参:this.$router.push({path: '/community/set', query: {'code': this.appCode}})接参:this.appCode = this.$route.query.code2,params传参与接参:传参:this.$rou...原创 2019-10-17 10:42:11 · 424 阅读 · 0 评论 -
vue中input,select标签中v-model绑定的值为数字类型情形
背景:vue表单中的input标签v-model 绑定的值,默认情况下是自动转换成String类型的,但是有时候我们不希望它自动转换,该怎么做呢?1,使用number将绑定的v-model改为number类型<el-input type="number" v-model.number="age"></el-input>2,下拉框的option绑定的value...原创 2019-10-10 11:13:46 · 6141 阅读 · 1 评论 -
Axios发送请求时params和data的区别
今天在使用Axios时,发现前台的get请求参数直接放在url后面是可以的,后台也能通过@RequestParam接收到,遂把参数放到data里面传后台试试,发现后台接收不到并报错400,于是查看了下axios的文档区别如下:1,params是添加到url的请求路径中后面用于get请求;2,data是添加到请求体(body)中用于post请求。下面上个实例:export fun...原创 2019-09-20 11:57:12 · 1679 阅读 · 0 评论 -
vue中添加标签页title前面小图标
一,将favicon.ico图标放到static目录下二,在index.html中引入favicon.ico<meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="static/fav...原创 2019-09-12 16:59:49 · 2473 阅读 · 2 评论 -
Vue如何在业务页面中更改Element-ui标签中默认样式
背景:当我们引入一个组件时,难免会遇到需要更改组件原有样式的情况,博主近来就遇到了,谨此记之一,使用less深度选择器<style lang="less" >@import 'tinymce/skins/ui/oxide/skin.min.css';.tox-silver-sink{ z-index:9999}</style>安装less插件:...原创 2019-09-09 16:50:40 · 983 阅读 · 0 评论 -
vue+elementUI项目打包后访问不到资源文件
vue+elementUI项目打包后访问不到资源文件一,路由不跳转在项目打包之前在本地的路由跳转都是完美的,打包之后出现了路由无法跳转且报错。将router配置index.js文件中的mode:'history'改为hashconst createRouter = () => new Router({ // mode: 'history', // 需要服务端支持 mod...原创 2019-08-29 10:56:08 · 5485 阅读 · 0 评论 -
npm中区分npm install --save与npm install --save-dev
首先理解2个概念dependencies用于本地开发与线上发布环境 devDependencies只用于本地开发环境一,dependencies与devDependencies:dependencies依赖的包不仅开发环境能使用,生产环境也能使用;而devDependencies依赖的包只能在本地开发环境下使用。二,--save-dev与--savepackage...原创 2019-08-22 16:20:52 · 278 阅读 · 0 评论 -
vue模拟另一个按钮点击事件
前言:在前端中有时候会有这样的需求,通过点击一个按钮触发另一个按钮或者另一个链接的点击事件,在vue中我们通过下面方法解决1,给另一个按钮添加ref<el-button size="small" type="primary" ref="upload">点击上传附件(≤100M)</el-button>2,事件触发this.$refs.upload.$e...原创 2019-08-13 11:04:22 · 11087 阅读 · 1 评论 -
vue+element-ui之 el-table组件中<template slot-scope="scope">
element-ui官网的table组件中说明:通过 slot-Scoped 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据实例:<el-table-column prop="retail_price" label="零售价" min-width="160" align="center" :...原创 2019-08-19 12:06:27 · 4195 阅读 · 0 评论 -
深入了解Vue生命周期 - Vue2.0
深入了解vue生命周期生命周期:Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子一,生命周期钩子函数生命周期钩子 组件状态 最佳实践 beforeCreate 实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、m...原创 2019-10-18 19:07:17 · 174 阅读 · 0 评论 -
vue中this.$router.push路由2种传参以及获取方法
vue中this.$router.push路由2种传参以及获取方法项目中通过this.$router.push路由跳转页面传递参数的方式很常见,一般有两种方式:1.params传参:this.$router.push({name:'parasetEdit',params:{pk_refinfo:'test',value:'test1'}});目标页面接收参数:this.$rou...转载 2018-08-07 15:19:46 · 7720 阅读 · 0 评论 -
Vue打包部署到Tomcat
Vue打包部署到Tomcat一,在config-->index.js中,设置build更改 assetsPublicPath: '/'为assetsPublicPath: './'module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: './...原创 2018-10-15 10:06:53 · 4721 阅读 · 0 评论 -
vue中的watch监听数据变化以及watch中各属性详解
1、watch使用的几种方法(1)通过watch监听data数据的变化,数据发生变化时,就会打印当前的值watch: { data(val, newval) { console.log(val) console.log(newval) }} (2)通过watch监听docData数据的变化,数据发生变化时,this.change_n...转载 2018-12-05 18:58:07 · 5780 阅读 · 1 评论 -
ES6箭头函数(=>)
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头:x => x * x上面的箭头函数相当于:function (x) { return x * x;}箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和ret...原创 2019-04-15 17:33:03 · 127 阅读 · 0 评论 -
`${expression}` ES6 的 Template Strings 模版字符串
在一个模板字面量中,你可以把任何合法的JavaScript表达式嵌入到占位符中将其作为字符串的一部分输出到结果中。占位符${expression}中间可以包含任意的JavaScript表达式。var path = `${this.$router.options.base}static/UEditor/`console.log(path)...原创 2018-11-12 10:27:32 · 317 阅读 · 0 评论 -
vue中读取文本文件
背景:有时前台上传一个文本文件需要将上传后的内容显示在下方的一个文本框或文本域中,如下此时就需要用到前台的文件读取功能了uploadPrivateKey () { const privateKeyFile = this.$refs.uploads.uploadFiles[0].raw let reader = new FileReader() if...原创 2019-04-16 17:57:40 · 10932 阅读 · 2 评论 -
vue将图像文件转换为base64
直入主题,上代码(其实用的还是FileReader)1,image转Base64imageToBase64 (file) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { console.log('file 转 ba...原创 2019-04-16 18:02:20 · 19540 阅读 · 0 评论 -
Vue中的nextTick函数
Vue中的nextTick()函数今天遇到一个比较隐蔽的问题,就是之前系统中操作百度Echarts的部分突然报错了,如下:[Vue warn]: Error in created hook: "TypeError: Cannot read property 'getAttribute' of null"网上查找资料后发现,原来我再created()钩子函数里就调用了画图的函数,而此...原创 2019-06-19 14:51:25 · 878 阅读 · 0 评论 -
Element-ui中关闭dialog时隐藏组件并销毁
背景:今天在写Vue时遇到一个element-ui中懒加载树的问题, 由于tree的展示是在模态框中, 所以默认显示模态框加载lazyLoad方法没问额!但是关闭后你再次打开模块框时不会再去执行lazyLoad方法了, 这就有问题了。<el-dialog title="添加" :visible.sync="addDialogVisible"> <el-...原创 2019-07-01 17:46:57 · 23949 阅读 · 12 评论