vue-js
曾曾子
求成长求进步
展开
-
vue-cli3配置生产的环境变量和开发的环境变量小记
1.vue-cli3 搭建的项目,目录更简洁,之前配置的config文件已经去掉,都整合到了vue.config.js 里去配置;2.以往需要在config中文件一些生产环境,或者跨域处理现在需要自己在跟目录下创建相应的文件来配,如下: 默认情况下,一个 Vue CLI 项目有三个模式: (1)development 模式用于 vue-cli-service serve (2)test 模式用于 vue-cli-service test:unit (3)production 模式用于 vue-cl原创 2020-12-25 18:18:49 · 704 阅读 · 0 评论 -
vue重置form表单代码小技巧
1.直接把表单对象置空; this.form={ name:"小明", age:120 }//直接清空 this.form={ name:", age:0 }2.使用 this.$options.data() this.form={ name:"小明", age:120 }//调用方法this.form =this.$options.data().form;原创 2020-12-21 11:36:01 · 1628 阅读 · 0 评论 -
vue-cli3用vant框架rem适配方案
1.在node安装插件npm install lib-flexible postcss-pxtorem --save 2.在main.js 文件中引入 import ‘lib-flexible/flexible.js’,//main.jsimport 'lib-flexible/flexible.js'3.在package.json文件中引入; 或者在vue.config.js 中配置;//package.json"postcss": { "plugins": {原创 2020-07-06 18:22:24 · 701 阅读 · 0 评论 -
vue-router 实时动态替换路由参数((地址栏)参数)
应用场景:例如:页面上有多个tab,点击不同的tab,跳转到不同的页面上去,再次返回的时候,需要知道上次点击的是哪个tab,这样不用存缓存,直接改路由参数,然后直接返回就可以了;用法如下:import merge from 'webpack-merge';//如果路由没有参数name,就新增一个参数,如果有的话,就是修改name的值//可以修改多个参数this.$router.push({ query:merge(this.$route.query,{'name':'小米'})});原创 2020-06-08 17:32:58 · 8734 阅读 · 0 评论 -
element-ui组件嵌套太狠,导致input输入无效
由于弹出框嵌套了两层,导致input输入框毫无反应;后来发现是组件套用太深,vue检测不到视图更新,在失效输入框的input事件中加 this.$forceUpdate()强制刷新;<el-form-item label="测试数据:" required> <el-input v-model="test" type="number" ...原创 2020-04-28 09:31:20 · 4055 阅读 · 4 评论 -
elementUI 实现手动上传图片前判限制图片格式,大小,尺寸宽高,限制一次只能上传一个图
vue代码 <el-form-item label="图片" required> <el-upload class="avatar-uploader define-uploader" accept=".jpg, .jpeg, .png" :show-file-list="false" action :http-...原创 2020-02-19 19:25:10 · 4224 阅读 · 0 评论 -
在vue-cli3 项目中 引入AMap高德地图的实现代码
在vue-cli3 如何 引入并使用高德地图高德地图开发平台api接口:https://lbs.amap.com/api/javascript-api/guide/abc/prepare1.引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值">&...原创 2020-01-06 20:27:10 · 3058 阅读 · 0 评论 -
vue-cli3 里面的eslint的配置小记
1.忽略部分文件不做校验的方式。在根目录下新建一个 .eslintignore 文件,里面写入需要忽略的文件2. eslint 的配置,在根目录下新建一个vue.config.js 的文件配置,lintOnSave:false ,关闭保存就校验的模式。3.提交前运行一个校验的命令,修复文件npm run lint...原创 2019-12-12 08:59:07 · 802 阅读 · 0 评论 -
Vue packages version mismatch 的问题解决
解决方案:更新vue 和vue-template-compiler 为最新版本npm update vue -gnpm update vue-template-compiler -g原创 2019-12-09 10:13:32 · 461 阅读 · 0 评论 -
vue.js 父组件和子组件获取对方的方法和属性的方式
1.父组件获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <policy-info-common ref="policyInfoRef"></policy-info-common> 2.在父组件里面通过 this.$refs.policyInfoRef.属性 this.$refs.policyInfoRef.方法2.子组件获取父组件的数...原创 2019-11-18 11:17:33 · 194 阅读 · 0 评论 -
Vue element-ui父组件控制子组件的表单校验
方法一:父组件代码:<template><div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保 存</el-button>...原创 2019-11-06 15:10:52 · 11139 阅读 · 8 评论 -
elementUI 动态加载table列
需求:根据需要选择动态展示table列表;用for循环来控制列表展示,使用checkbox 来控制哪些数据显示<template> <div> <el-button type="primary" @click="showData()">展示</el-button> <div id="table-content"&...原创 2019-05-28 10:44:24 · 24658 阅读 · 4 评论 -
webpack打包vue项目之后生成的文件如何运行
我的项目里面:webpack打包之后生成的文件放在 market 目录下;所以根据官方文档可以做如下操作:npm install -g serve (全局安装) serve -s market (运行打包后的文件)这样在:http://localhost:5000 这个网址就能看到打包之后的效果了;注意:一般前端项目里面的请求是通过代理请求其他后端接口的...原创 2019-05-30 13:52:55 · 3353 阅读 · 0 评论 -
vue+element-ui select组件传对象
应用场景:在使用选择组件 select 的时候:如果想要绑定的值,是一个对象,这样就可以获取整个对象,然后获取所需要的值进行赋值。可以如下操作:value直接绑定 对象item,但是需要注意的是:在select 上要加上属性:value-key,他对应的值,是:key="" ,所绑定的,不然就会有问题。注意:在编辑的时候,如果select 需要展示值的话,必须给 addForm.city...原创 2019-04-25 15:28:10 · 3821 阅读 · 0 评论 -
Do not mount Vue to <html> or <body> - mount tonormal elements instead.
1.vue1.x 允许开发者以 <body> 或 <html> 作为根实体的挂载点,但到了VueJS2.0 后,只能通过 独立的节点挂载 ,如:div 等。否则会产生错误,警告讯息如下:"Do not mount Vue to <html> or <body> - mount tonormal elements instead." 换成用独立的 DOM 节点,如 `<divid="app"></di原创 2017-09-20 14:39:46 · 1431 阅读 · 0 评论 -
怎么直接中vue组件的style使用less,不是引入less
只是单纯的直接在组件内部的style中使用less语法,不是从外部引进less文件直接安装 less 和less-loader 加上lang=”less”, 不需要额外配置,就可以直接在组件内部使用了 ...原创 2018-03-22 15:38:29 · 7760 阅读 · 3 评论 -
在vue中引入外部less文件
在vue中引入外部less文件首先vue环境搭建成功1.安装 less 和less-loader 2.修改 webpack.config.js 文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", }...原创 2018-03-22 16:10:22 · 35139 阅读 · 2 评论 -
vue2.0 点击跳转传参--vue路由点击事件跳转传参数
vue中路由跳转传参数有多种,常用的是下面的几种:通过router-link进行跳转通过编程导航进行路由跳转1.router-link<router-link :to="{ path: 'yourPath', params: { key: 'value', // orderNum : ...翻译 2018-04-20 16:48:44 · 13683 阅读 · 0 评论 -
vue项目构建出问题Module build failed: Error: No parser and no file path given, couldn’t infer a parser
vue项目构建出问题Module build failed: Error: No parser and no file path given, couldn’t infer a parser或者 Cannot read property ‘split’ of null; 目前我遇到的都是由于 prettier 的版本原因导致的。我用过的可执行的方案如下:1、把node_module...原创 2018-06-21 11:35:16 · 559 阅读 · 0 评论 -
VueJS2.0的见解
生命周期图,直观的感受:Vue2.0的生命周期钩子一共有11个,同样结合官方文档作出了下表:beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/even...翻译 2018-06-20 16:58:33 · 181 阅读 · 0 评论 -
element-ui cascader级联选择器 同时返回value和label
1.给cascader组件赋值一个别名2 通过 currentLabels 来获取cascader组件中的label原创 2019-01-22 09:02:22 · 9657 阅读 · 8 评论 -
element-ui Form表单校验小结
1.要验证输入只能为数字时2.整体校验时,可以写方法校验;3.根据条件判断表单里的 某一项 是否必填;方法一:动态响应的改变required的值;在rules里面可以不用加 requied方法二:直接改变当前对应项的 rules ;写对应需要的两套校验条件&lt;el-form class="dialog-body" :rules="rulesList" :model="t...原创 2019-02-19 16:53:40 · 4962 阅读 · 0 评论 -
elmentUI文件上传 el-upload 文件上传小笔记
<el-upload multiple class="upload-demo" ref="upload" action="" accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx" :before-upload="beforeUpload" :o..原创 2019-03-01 10:58:37 · 2673 阅读 · 0 评论 -
elementUI提交表单时焦点跳转至第一个校验不通过处
亲测,可用,编程思想真的很重要啊,想半天的怎么获取没有校验通过的元素,居然还可以用这种方法,赞赞,这种思想值得学习。this.$refs[formName].validate((valid) => { if (valid) { } else { setTimeout(()=>{ var isError= ...翻译 2019-03-05 16:06:27 · 4937 阅读 · 4 评论 -
element-ui +Vue 解决 table 里包含表单验证
应用场景:在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示:这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。:prop="'tableData.' + scope.$index + '.字段名'"方法一:<template> <div class="app-con...翻译 2019-04-30 11:04:06 · 9640 阅读 · 4 评论 -
sublime Text3 支持vue 语法高亮
下载插件 https://github.com/vuejs/vue-syntax-highlight进入sublime text3 菜单项->Preferences->Browse Packages… 自动打开一个文件夹,其中包含了这个编译器所有插件。 新建一个文件夹,假设名为vue,将刚才下载下来的文件夹中所有的文件都拷贝到vue这个文件夹当中。 然后打开命令面板ctrl+shift+原创 2017-09-19 16:53:20 · 479 阅读 · 0 评论