![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
苏喂苏喂苏喂su
专注前端开发
展开
-
axios的post请求设置form-data请求格式
headers:{ 'Content-Type': 'application/x-www-form-urlencoded'},原创 2021-07-06 09:53:24 · 715 阅读 · 0 评论 -
vue中css背景图打包后不显示
修改 build/utils.js 中的 generateLoaders 方法,如下代码,增加 publicPath: '…/…/'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else { re原创 2020-11-03 10:19:40 · 351 阅读 · 0 评论 -
vue父组件向子组件传递函数方法
父组件<template> <div> parent <child :parentHandler="parentHandler" /> </div></template><script>import child from "@/components/child";export default { components: { child }, data() { return {};原创 2020-09-23 15:51:37 · 10476 阅读 · 0 评论 -
axios通过get方式下载Excel
vue+element环境下的写法,其它框架也基本一样主要是将后台返回的数据处理之后下载为.xlsx的文件,再模拟点击下载 axios({ method: "get", url: "url****", responseType: "blob", // 重点 headers: {***}, params: params, }) .then((res) => { .原创 2020-08-14 10:07:00 · 1106 阅读 · 1 评论 -
vue调试工具不展示出来
有可能是项目使用了script的方式引入了vue.min.js的原因导致的,开发环境可以临时使用cdn地址就没问题了。<script src="http://cdn.bootcss.com/vue/2.6.10/vue.js" charset="utf-8"></script>原创 2020-06-28 16:32:39 · 2408 阅读 · 0 评论 -
vue动态设置元素的高度
data: { rightScrollHeight: 0,}this.$nextTick(() => { this.initDOM()})methods: { initDOM() { this.rightScrollHeight = this.$refs.rightScroll.clientHeight + 'px' },}...原创 2020-03-21 10:56:26 · 14990 阅读 · 0 评论 -
vue监听滚动条到底部
created() { this.$nextTick(() => { // this.initScroll() window.onscroll = function() { //变量scrollTop是滚动条滚动时,距离顶部的距离 var scrollTop = document.documentElement.scrollT...原创 2020-03-20 14:14:11 · 3455 阅读 · 0 评论 -
vue安装less
npm install less less-loader --save-dev接下来找到bulid目录下的webpack.base.conf.js并打开,找到module下的rules写下{ test: /\.less$/, loader: "style-loader!css-loader!less-loader"}...原创 2019-12-11 10:55:07 · 129 阅读 · 0 评论 -
vue项目中引用图片比较稳妥的方法
在return的对象中使用require引入face_0_25: require('@/assets/game/image/face_0_25.png')原创 2019-12-26 18:06:30 · 643 阅读 · 0 评论 -
vue设置全局css
vue设置全局css只要在main.js里引入css文件即可,如:import '@/styles/index.scss' // 全局css原创 2019-12-23 17:12:24 · 1893 阅读 · 0 评论 -
iconfont使用方法
1、进入iconfont官网:https://www.iconfont.cn/collections/index2、选择自己需要的icon,并且加入购物车3、在右上角点击进入刚才进入购物车的icon3、可以直接点击下载代码,也可以添加到项目中,然后再下载代码,都是一样的。4、将下载的代码解压缩,得到以下文件将iconfont.css、iconfont.e...原创 2019-12-23 16:56:22 · 1540 阅读 · 0 评论 -
vue-timeago时间格式转换用法
1、安装cnpm i vue-timeago -S2、在main.js引入import vueTimeago from 'vue-timeago'Vue.use(vueTimeago, { name: 'Timeago', locale: 'zh-CN', locales: { 'zh-CN': require('date-fns/locale/zh_cn'...原创 2019-12-23 16:06:17 · 1364 阅读 · 2 评论 -
require.context笔记
require.context是webpack的一个api,用于实现前端工程自动化用于自动引入指定文件夹里的指定文件require.context接收3个参数:require.context('./test', false, /.test.js$/)第一个参数是文件的路径第二个参数为是否读取文件夹的子目录第三个参数是匹配文件的正则require.context执行后返回一个...原创 2019-12-20 17:20:18 · 171 阅读 · 0 评论 -
vue v-lazy无法加载图片
1、如果是无法正确加载图片,可以通过调整下图的位置先use,然后再引入,不知道什么原因,反正这样就可以解决问题。2、如果是无法加载占位图,可以换一个写法,如上图,使用require引入,我一开始直接使用路径引入也是不可以。网上还有说可以通过在static文件夹引入的话,就可以直接使用路径的形式。...原创 2019-11-26 15:37:30 · 3240 阅读 · 0 评论 -
vue加载百度Ueditor编辑器
下载代码:http://ueditor.baidu.com/website/download.html在HTML文件的head引入以下文件: <!-- 编辑器依赖 begin --> <script src="./ueditor/ueditor.config.js"></script> <script src="./ue...原创 2019-11-05 17:29:21 · 229 阅读 · 0 评论 -
axios发post请求方法
axios({ url: '后端提供的接口地址', method: 'post', data: { code: 5016, data: { id: this.gifsId, employee: this.employee, giftCount: this.getPrice } }}).then(res => {...原创 2019-10-24 20:32:34 · 644 阅读 · 0 评论 -
element的tree组件不更新问题解决
<el-dialog title="配置业务" :visible.sync="config" @close="closeConfig"> <myConfig v-if="configDestroy" @success="configSuccess"/></el-dialog>每次打开myConfig组件的时候,里面的tree组件都是第一...原创 2019-10-23 09:54:47 · 4660 阅读 · 2 评论 -
vue+elementUI+Node+MySQL搭建用户登录页面
一、搭建vue脚手架命令行进入到指定文件目录,开始输入下列指令:// 全局安装 vue-clicnpm install --global vue-cli// 创建一个基于 webpack 模板的新项目vue init webpack my-project// 项目名称(Project name 项目名称)Project name my-project// 项目描述,可以...原创 2019-05-09 17:27:55 · 9860 阅读 · 27 评论 -
vue获取当前路由/path地址
vue获取路由的参数方法:使用:this.$route.path即可获取到,如下:let router_path = this.$route.pathconsole.log(router_path) // 输出当前页面的路由,如:/homethis.$route输出的信息有:fullPath、hash、matched、meta、params、path、query...原创 2019-07-22 23:08:13 · 33103 阅读 · 0 评论 -
vuex的mutations用法
为什么要用mutations使用mutations的好处是可以跟踪到是哪里调用了mutations里的方法,在严格模式下调用mutations也不会报错。如果用其它方法的话上面说的两个好处都不存在。用法先定义个mutations对象,然后定义指定的方法就可以了,很简单,代码示例: state: { isHome: true }, mut...原创 2019-07-22 23:54:31 · 14238 阅读 · 1 评论 -
keep-alive
keep-alive,可以缓存没有发生数据改变的组件,也就是说,只要组件在来回切换的时候,如果里面的数据和第一次切换的时候是一样的话,那么就不会再次发送网络请求或者计算数据。使用示例:<keep-alive> <router-view/></keep-alive>直接使用keep-alive包裹整个路由的出口,就不需要单独为每一个组件进行...原创 2019-08-05 22:04:57 · 138 阅读 · 0 评论 -
vue题
1、说说什么是MVVM ?答案在之前的几篇文章中已写过,就不再重复了;链接:https://blog.csdn.net/joyvonlee/article/details/905741492、使用vue有什么好处?使用vue框架,可以更好的管理和维护常用的组件,可以减少直接操作DOM的次数,让页面渲染更加高效;由于vue的设计模式,在很大程度上,可以让我们在开发中专注于业务的实现...原创 2019-08-08 22:47:07 · 864 阅读 · 0 评论 -
vue获取屏幕宽度和高度
data() { return { screenWidth: document.body.clientWidth, // 屏幕宽 screeHeight: document.body.clientHeight, // 屏幕高 }},原创 2019-08-10 15:47:55 · 30346 阅读 · 3 评论 -
vue使用filter过滤简单实现搜索功能
<input type="text" placeholder="请输入搜索内容" v-model="search"><p v-for="(item, index) in searchMethod" :key="index">{{ item.name }}</p>arr: [ {name: 'qq', baz: '1'}, {name: ...原创 2019-08-14 22:56:07 · 5907 阅读 · 3 评论 -
vue2.x+高德地图实现地址搜索、点击获取详细地址和经纬度并且添加标注
实现效果:实现过程:1、页面加载时,获取城市定位(pc端只能通过IP定位,安卓和ios可以通过GPS实现具体地址定位)2、定位成功后,通过城市名或者经纬度完成地图初次渲染3、绑定点击事件,根据事件返回的数据,进行逆地理编码,获取到详细地址。接着在地图上生成点标记,每次点击需要判断是否已有点标记,如有,则清除掉,然后在本次点击的位置重新生成新的点标记。大概的实现...原创 2019-08-24 16:08:09 · 4000 阅读 · 1 评论 -
vue通过$router.push带参数跳转路由
方法如下:1:paramsthis.$router.push({name: 'test', params: {html: this.html}})this.$router.push({path: '/details', query: {data: data}})**注意** 当使用path的时候,参数需要使用query来传,否则在目标页面无法接收到参数其中name/path...原创 2019-08-25 20:50:05 · 1853 阅读 · 0 评论 -
vue加载wangeditor富文本编辑器方法
完整代码链接1、下载依赖包cnpm install wangeditor -S2、引入import E from 'wangeditor'3、定义HTML容器<div class="editor-container"> <div id="editor-toolbar" class="toolbar"></div> &...原创 2019-08-27 22:03:28 · 312 阅读 · 0 评论 -
vue watch首次不触发的解决方案
添加:immediate为true即可如:Obj:{ handler:function(newVal, oldVal) { this.xxx= newVal.xxx }, immediate: true,}原创 2019-09-19 10:31:01 · 6550 阅读 · 0 评论 -
element的dialog对话框组件关闭时销毁里面的元素
加上:destroy-on-close="true"属性即可,该属性默认为false。<el-dialog title="标题" :destroy-on-close="true" :visible.sync="isShow"> // 内容区域</el-dialog>...原创 2019-09-25 10:04:33 · 14660 阅读 · 6 评论 -
vue + axios通过拦截器添加token
在main.js里添加代码:axios.interceptors.request.use(config => { let token = localStorage.token config.headers.token = token return config;}, function (error) { return Promise.reject(erro...原创 2019-09-28 09:08:51 · 624 阅读 · 0 评论 -
Vue.js变化侦测
一、Object的变化侦测vue通过Object.definProperty将对象的key转换成getter/setter的形式来追踪变化,但是getter/setter只能追踪数据是否被修改,无法追踪新增属性和删除属性。为了解决这个问题,vue也提供了两个API:vm.$set vm.$delete如下面这个demo:<template> <div...原创 2019-07-31 16:00:54 · 175 阅读 · 0 评论 -
vue开发工具Devtools安装
一、从GitHub下载安装包创建一个文件夹,然后将安装包代码克隆到该文件夹git clone https://github.com/vuejs/vue-devtools.git二、安装下载好之后,进入下载下来的文件夹,然后进行安装,最后打包cd vue-devtools // 进入文件夹cnpm install // 安装npm run buil...原创 2019-07-26 11:24:06 · 196 阅读 · 0 评论 -
mac创建一个基于webpack模板的vue项目报错:-bash: vue: command not found
报错信息为:-bash: vue: command not found解决办法:先全局安装vue-cli:在命令行输入:sudocnpm install --global vue-cli按提示输入密码即可。window用户不需要在前面添加sudo指令。...原创 2019-05-29 22:25:37 · 849 阅读 · 0 评论 -
vue实现五星评价方法
1、需求:根据用户评分来判断星星被点亮多少颗。保留小数,大于等于零点五,则多显示半颗星,否则只显示整数值。如:3.3分只显示3颗星;3.6分,则显示3颗完整的星星,加上一个被点亮了一半的信息。2、准备工作准备3张img,分别是全部被点亮的、只点亮一半的、未点亮的3、分析实现思路这里假设用户评分为4.7分,那么根据需求,就是显示4个完整的被点亮的星星,一个被点亮...原创 2019-06-02 12:04:40 · 2241 阅读 · 0 评论 -
vue路由重定向示例
vue路由重定向示例如果是在根目录,则重定向到/goods{path: '/', redirect: '/goods'}原创 2019-05-30 21:18:10 · 3294 阅读 · 0 评论 -
vue里边如何让css样式只在当前组件中生效
方法很简单,在组件中的style前面加上scoped就可以了,示例:原创 2019-05-26 11:20:19 · 18715 阅读 · 1 评论 -
vue父组件向子组件传值的方法
vue里边,父组件向子组件传值,可以通过绑定属性的方法来实现,具体方法如下demo父组件的代码<template> <div> {{ newData }} <child :toChild="newData"></child> </div></templat...原创 2019-05-25 23:52:45 · 777 阅读 · 0 评论 -
vue子组件向父组件传值的方法
子组件向父组件,使用$emit方法,demo:子组件的代码:<template> <div> <h1>this is child component</h1> <button @click="toParent">向父组件传值</button> </div>...原创 2019-05-25 13:28:38 · 51809 阅读 · 6 评论 -
v-if 和 v-show的区别
v-if:该指令用于条件性的渲染一块内容,当指令的表达式返回值为true的时候,内容会被渲染出来;如果条件一直为false,那么内容就一直不会被渲染。相反,当返回值为false的时候,内容会被销毁。v-if可以和v-else、v-else-if搭配使用,使用方法就跟原生js上的用法基本一致。在if 和 else的切换过程中,会复用已有的元素,而不是从头开始渲染。但是可以通过给元素添加k...原创 2019-05-06 15:44:18 · 2247 阅读 · 0 评论 -
vue使用$emit实现兄弟组件之间的通信 实例
步骤一:在src目录下创建一个event.js文件(名字自己定义):import Vue from 'Vue'const vm = new Vue;export default vm;步骤二:在组件1和组件2分别引入刚创建的event.js步骤三:在其中一个组件,也就是发送事件的组件里面定义发送的内容。$emit的语法:$emit("事件名","发送的...原创 2019-05-05 12:42:36 · 1196 阅读 · 0 评论