![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue的使用心得
小城听风雨
有些鸟儿注定是关不住的, 因为它们的每一片羽毛都闪耀着自由的光辉
展开
-
vue 自定义双向绑定
vue 自定义双向绑定背景:父子组件props通信是单向的,如何双向通信呢。<!-- children.vue --><template> <a-input:value="val" @input="(e)=>{this.$emit('change',e.target.value)}"/></template><script>export default { props:{ // 须定义和model相同的props名称原创 2021-04-12 14:03:25 · 318 阅读 · 0 评论 -
less和less-loader版本
严格控制版本号npm install less@3.9.0 less-loader@4.1.0 --save-dev原创 2020-09-27 14:46:35 · 20333 阅读 · 3 评论 -
vue渲染模板时怎么保留模板中的HTML注释呢?
设置comments属性,官网默认为舍弃注释<template comments> ...</template>官方文档原创 2020-09-27 14:44:49 · 881 阅读 · 1 评论 -
Vue重置data
Object.assign(this.$data, this.$options.data());使用Object.assign(),vm.$data可以获取当前状态下的data,vm.$options.data可以获取到组件初始化状态下的data。原创 2020-09-27 14:43:19 · 211 阅读 · 0 评论 -
Eslint配置
Eslint配置eslint要是配置不好,代码在IDE中提示真的很恶心,但是配置项又太多,还有很多专有的扩展,这里给出我的一个配置module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/strongly-recommended"], rules: { "no-console": process.env.NODE_ENV === "production" ? "error"原创 2020-09-27 14:45:40 · 366 阅读 · 0 评论 -
vue引用iconfont两种方式
vue引用iconfont两种方式引入本地文件。a. 把iconfont项目下载到本地。b. 解压出来,放在项目中static(静态文件夹)下。c. 在main.js中引入iconfont:import '../scripts/iconfont/iconfont.css';d: 在页面中使用:<i class="iconfont iconicon_jinru"></i>,这里使用Font class格式引入在线文件a. 查看项目在线链接。b. 在global.原创 2020-08-17 20:05:08 · 1560 阅读 · 0 评论 -
vue filters - Debug
vue filters - Debug需求: iview table组件中某一列需要根据需求过滤。<Table border="" stripe="" max-height="600" ref="current-table" :data="tableData" :columns="tableColumns" :loading="tableLoading" @on-selection-change="handleSelect"> <!-- 部署状态 -->原创 2020-08-13 14:40:51 · 153 阅读 · 0 评论 -
Vue: keep-alive
keep-alivekeep-alive:可以实现页面缓存,比如从编辑页切出去再切进来,页面还是处于编辑状态。需要在router.js中设置meta属性,meta下的keepAlive属性设置为true,代表这个页面需要进行缓存。import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import is from '@/view/is'impo原创 2020-07-15 16:57:41 · 211 阅读 · 0 评论 -
Vue项目中实现div滚轮放大缩小,拖拽效果
Vue项目中实现div滚轮放大缩小,拖拽效果,类似画布效果引入插件vue-draggable-resizable,点我进入GitHub地址。npm install --save vue-draggable-resizablemain.js文件中import VueDraggableResizable from 'vue-draggable-resizable'import 'vue-draggable-resizable/dist/VueDraggableResizable.css原创 2020-07-14 18:03:56 · 10782 阅读 · 1 评论 -
你不知道的vue——vue不常用的知识点的整理
Vue中不常用但很有用的知识点v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。有时候,页面没渲染之前就会出现vue代码块,例如下图。使用v-cloak可以很好解决这种问题。<template> <div class="hello"> <span v-cloak>{{ content }}</span> </div></template><script>原创 2020-07-13 14:52:40 · 8754 阅读 · 2 评论 -
Vue - Filters
Vue 全局使用 Filters在src/assets下新建一个filters.js文件。let dateFilters = function(date) { // date:即为要过滤的key return 1234;};export { dateFilters};在main.js中,注册Filters.// filtersimport * as filters from './eam/assets/filters';Object.keys(filters)原创 2020-06-23 11:37:10 · 178 阅读 · 0 评论 -
Vue 强制刷新页面,或者指定div进行刷新
Vue 对指定div进行强制刷新<template> <div v-if="isReloadData"> 假如在这个div里面修改了某些数据,或者是 props 带过来的数据,又或者是通过 funcation 动态设置的属性属性, 可能在修改之后不会进行刷新展示最新的数据 </div></template><script>export default { data () { return {原创 2020-05-26 15:14:06 · 9944 阅读 · 0 评论 -
解决vue打包完element图标找不到、文件、图片路径报错等问题
解决vue打包完element图标找不到、文件、图片路径报错等问题第一步:找到build->utils.js文件,加 publicPath: '../../'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader',...原创 2019-12-27 13:12:11 · 1461 阅读 · 0 评论 -
vue input 回车事件
普通vue input:@keyup.enter="onSubmit"element el-input:@keyup.enter.native="onSubmit"原创 2019-12-25 14:38:23 · 4227 阅读 · 0 评论 -
vue动态绑定input,动态添加input
vue动态绑定input,动态添加input技术:vue+elemen-ui原理:数组遍历出input,每点一下push一次。<template> <!-- test 测试使用 --> <div class="test"> <div v-for="(module,index) in modules" :key="index">...原创 2019-12-19 17:20:11 · 6114 阅读 · 2 评论 -
ref、refs、nextTick()
ref、refs、nextTick()ref、refs:// 组件div<navbar ref="navbar></navbar>// 组件Vue.component('navbar',{ template:'#navbar', data:function () { return { id:1, ...原创 2019-12-18 17:07:46 · 212 阅读 · 0 评论 -
vue - 父子组件通信
vue 父子组件传参原创 2019-12-18 16:35:09 · 186 阅读 · 0 评论 -
router-link传递对象
router-link传递对象传递:JSON.stringify(obj)}获取:JSON.parse(decodeURIComponent(obj))<router-link :to="{name:'detail', query: {item:JSON.stringify(firItem)}}" target="_blank">{{ firItem.name.r...原创 2019-12-16 17:21:20 · 1805 阅读 · 0 评论 -
vue路由跳转四种方式以及区别
vue路由跳转四种方式以及区别router-link不带参数:to="{path:'/home'}"> //name,path都行, 建议用name //注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 ```...原创 2019-11-25 14:06:05 · 5104 阅读 · 1 评论 -
vue项目满足localhost和IP同时访问,又避免启动页面时地址为为0.0.0.0
vue项目满足localhost和IP同时访问,又避免启动页面时地址为为0.0.0.0config/index.jsbuild/webpack.dev.conf.js 下添加:useLocalIp: true原创 2019-11-07 12:44:35 · 2222 阅读 · 0 评论 -
vue实现F5刷新整个页面无空白无间隔时间
vue实现F5刷新整个页面无空白无间隔时间通过this.$router.go(0)刷新页面,和F5一样,会有空白页时间,体验不好。通过provide/inject即可改变这种效果。首先在App.vue里面:<template> <div id="app"> <router-view v-if="isRouterAlive" /> &...原创 2019-10-31 16:39:24 · 5231 阅读 · 1 评论 -
vuex改变了state的值,但是页面没有更新
vuex改变了state的值,但是页面没有更新当state里属性定义为obj类型时,有时候出现:在其他页面修改完state值之后,其他页面并没有同步更新。这时候需要转换一下。JSON.parse(JSON.stringify(obj))this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj)...原创 2019-10-30 17:57:25 · 13444 阅读 · 1 评论 -
Vue实现页面的局部刷新(router-view页面刷新)
Vue实现页面的局部刷新(router-view页面刷新)利用Vue里面的provide+inject组合首先需要修改App.vue。<template> <!-- 公司管理 --> <div class="companyManage"> <router-view v-if="isRouterAlive"></ro...原创 2019-10-25 16:35:12 · 15387 阅读 · 2 评论 -
vue+element+axios文件下载(post类型)
vue+element+axios文件下载(post类型)// 下载 click事件uploadDown() { let url = "company/getBusinessLicenseByCompanyId"; let formData = { id: this.companyMaintainsForm.companyNewsList.id }; this.dow...原创 2019-10-25 15:57:38 · 851 阅读 · 0 评论 -
Uncaught (in promise) 的解决方法
Uncaught (in promise) 的解决方法请求后面加catch(err=>{})即可。this.$axios.post(url,formData).then(res => { }).catch(err => { })原创 2019-10-18 13:04:25 · 54583 阅读 · 3 评论 -
vue项目build之后,dist文件下index.html打开为空白页
vue项目build之后,dist文件下index.html打开为空白页build: {dev: { assetsPublicPath:"./", //资源公共路径 打包时候需要 ./ }}// 运行时候:package.json文件:scripts: { "dev":" --host 192.168.3.45" , // 使用ip地址访问 ,打包时候去掉...原创 2019-10-18 11:29:21 · 899 阅读 · 0 评论 -
vue登录验证码
vue登录验证码数字格式验证码图片滑块验证码原创 2019-09-23 13:33:10 · 930 阅读 · 0 评论 -
vue报错 :NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
vue报错 :NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}main.js中添加:// 处理element NavigationDuplicated 错误import Router from 'vue-router'const originalPush = Router...原创 2019-10-16 17:24:19 · 546 阅读 · 0 评论 -
vue全局使用axios的方法
vue全局使用axios的方法结合 vue-axios使用: 首先在主入口文件main.js中引用:import axios from 'axios'import VueAxios from 'vue-axios' Vue.use(VueAxios,axios); 之后就可以使用了,在组件文件中的methods里去使用了:getNewsList(){ this.axi...原创 2019-10-11 14:50:14 · 600 阅读 · 0 评论 -
vue+elementUI el-table导出excel表格
vue+elementUI el-table导出excel表格安装依赖库:npm install -D xlsx ,file-savernpm install -s script-loader在项目的src文件夹下新建一个文件夹vendor:(vendor—名字任取),里面放置两个文件Blob.js和 Export2Excel.js。这两个文件去这里下载:点我下载在当前.v...原创 2019-08-20 15:46:22 · 2256 阅读 · 7 评论 -
axios中POST请求变成OPTIONS问题处理
axios中POST请求变成OPTIONS问题处理原创 2019-07-31 18:18:49 · 1411 阅读 · 0 评论 -
vue项目打包
vue项目打包查看package.js文件的scripts命令打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘...原创 2019-07-31 15:34:59 · 374 阅读 · 0 评论 -
前端vue项目中axios解决跨域问题总结
前端vue项目中axios解决跨域问题总结1.在main.js中,axios下面添加如下代码:axios.defaults.baseURL = '/api'axios.defaults.headers.post['Content-Type'] = 'application/json';2.在config文件夹下的index.js中,dev下的proxyTable对象下添加如下代码:...原创 2019-07-30 16:53:50 · 4636 阅读 · 0 评论 -
vue项目通过本地IP地址访问,不是localhost
vue项目通过本地IP地址访问,不是localhost修改package.json中scripts属性,再dev属性下添加:--host 192.168.3.45即可。原创 2019-08-02 17:28:53 · 3030 阅读 · 1 评论 -
vue项目中如何使用百度三方分享
百度三方分享今天项目中用到分享功能,正好是vue项目,本来想着在网上找下操作教程,结果找了半天,发现也没几个能用的,还一个比一个能吹,步骤没一点思绪,就一气之下自己着手摸索出来一个,还没写样式,但功能已经能用了。效果图如下:步骤在百度分享官网下载代码:http://share.baidu.com/,如下:(我这里用的是图标式,一般选择浮窗式,因为浮窗式只有js,不用加载html)下...原创 2018-12-20 16:36:36 · 3085 阅读 · 3 评论 -
axios 网络请求与数据下载
axios一、先引入js第一种:通过cdn加载<script src="https://unpkg.com/axios/dist/axios.min.js"></script>第二种:通过npm或者cnpm加载$ npm install axios或者$ cnpm install axios二、请求与下载请求第一种:axios.get(...原创 2018-12-08 10:53:49 · 378 阅读 · 0 评论