Vue
关注
分享
扫一扫
LLL_LH
记录一些学习心得
展开
-
vue3全局配置截取方法-slice
vue3全局配置截取方法原创 2022-04-29 10:20:30 · 961 阅读 · 0 评论 -
vue html页面导出pdf
1、下载html2canvas、JsPDF// 将页面html转换成图片npm install html2canvas --save// 将图片生成pdfnpm install jspdf --save2、点击导出，导出内容<template> <div class="credit-result" ref="result"> <div class="drawer-contenr" v-if="query.type原创 2020-10-30 10:51:32 · 680 阅读 · 1 评论 -
uniapp显示base64图片
<image :src="'data:image/jpg;base64,' + qcCode"></image>如果图片还是不能显示，有可能base64代码换行，要去除换行qcCode =qcCode.replace(/[\r\n]/g, "");原创 2020-08-21 10:06:19 · 9626 阅读 · 4 评论 -
Vue线上使用cdn加速
1、public/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> &l原创 2020-08-08 14:55:36 · 1004 阅读 · 0 评论 -
simple uploader 对上传文件校验
simpleuploader的具体方法使用方法看官方文档，这里记录一下对上传的文件的校验<uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-added="onFileAdded" @complete=原创 2020-05-22 11:44:45 · 1507 阅读 · 1 评论 -
vue3打包去除console.log
vue.config.jsconfigureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } },...原创 2020-05-07 17:28:50 · 976 阅读 · 0 评论 -
vue-cli3实现本地模拟数据请求
首先，搭建后vue项目框架1、在public文件夹下准备一个test.json，用来模拟的请求数据{ "code": 1, "msg": null, "data": [ { "name": "赵一", "id": 10 }, { "name": "钱一", "id": 11 }, { ...原创 2020-04-29 13:51:56 · 933 阅读 · 0 评论 -
vue列表下拉触底加载
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>列表触底加载</title> <style> #main{width:600px;margin:20px auto;line-height:30px;} #main...原创 2020-01-07 16:33:08 · 1216 阅读 · 0 评论 -
vue页面上传多张图片，传下标获取对应的值
<div v-for="(item,index) in imagesList" :key="index"> <el-upload class="avatar-uploader avatar-uploader-imagesUrls" :action="logoUrl"...原创 2019-12-23 15:05:54 · 1183 阅读 · 0 评论 -
vuex的基础使用
Vuex 应用的核心就是 store，含着大部分的状态 (state)Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mu...原创 2019-12-20 17:41:38 · 237 阅读 · 0 评论 -
vue-infinite-scroll使用
1、安装npm install vue-infinite-scroll --save2、使用main.jsimport infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll);3、使用<ul> <li v-for="(item, index) ...原创 2019-12-17 22:07:29 · 598 阅读 · 0 评论 -
vue+elementui身份证验证
1、js// 身份证验证 isCardID (rule, value, callback) { console.log(value) if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) { callback(new Error('你输入的身份证长度或格式错误')) } //...原创 2019-12-11 16:43:30 · 2301 阅读 · 3 评论 -
vue给表单添加enter回车事件
@keyup.enter.native="login()"@keyup监听键盘事件.enter为vue定义的按键码的别名.native覆盖原有的keyup事件<el-input type="password" v-model="ruleForm.password" :placeho...原创 2019-12-10 09:34:29 · 1891 阅读 · 0 评论 -
vuecli3加typescript使用混入mixin
1、新建一个mixin.tsimport { Vue, Component } from 'vue-property-decorator'@Componentexport default class Mixin extends Vue { // table 默认分页 private pages = { page: 1, row: 10 } // 每页条数...原创 2019-11-29 13:53:44 · 1407 阅读 · 0 评论 -
Vuecli3加Vant创建项目
详情：Vuecli3https://cli.vuejs.org/zh/guide/installation.html1、安装Vue CLInpm install -g @vue/cli# ORyarn global add @vue/cli2、创建项目vue create my-demo // my-demo是项目名称3、项目创建完成后，进入项目目录cd ...原创 2019-11-22 14:46:21 · 533 阅读 · 0 评论 -
vue-cli3跨域请求代理配置
1、在vue.config.js页面module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', assetsDir: 'assets', // webpack-dev-server 相关配置 devServer: { open: false, // 是否自动启动浏览器...原创 2019-11-20 12:01:02 · 961 阅读 · 0 评论 -
vueCli3加electron创建项目
1、项目创建vue create project2、运行vue ui打开图形化界面，安装vue-cli-plugin-electron-builder插件或者vue add electron-builder3、运行项目：yarn electron:serve打包项目：yarn electron:build...原创 2019-11-19 10:46:15 · 926 阅读 · 0 评论 -
vuecli3取消eslint校验代码
在创建项目时配置了eslint校验，现在要取消，打开.eslintrc.js文件module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', //'@vue/standard' ], rules: { 'no-consol...原创 2019-11-19 10:26:04 · 759 阅读 · 0 评论 -
electron在html页面require is not defined
问题：在html页面里面引用nodejs模块时报错，提示require is not defined<script type="text/javascript"> require('./render/render.js')</script>原因：在electron版本升级到5.0以后，BrowserWindow下的webPreferences 下的no...原创 2019-11-15 09:49:12 · 2344 阅读 · 0 评论 -
any Property 'setCheckedKeys' does not exist on type 'Vue | Element | Vue[] | Element[]'.
this.$refs.tree.setCheckedKeys(keys);报错解决办法：加类型断言(this.$refs.treeasany).setCheckedKeys(keys);原创 2019-11-12 15:52:00 · 896 阅读 · 0 评论 -
vuecli3开发中的regeneratorRuntime is not defined问题
1、发送请求过程中遇到的问题解决办法：1、安装npm i babel-plugin-transform-runtime -D2、在babel.config.js'plugins': [['transform-runtime']]3、运行，这时候会报this.setDynamic is not a function错误，原因是vue用的最新项目...原创 2019-10-21 13:07:09 · 1791 阅读 · 0 评论 -
vue axios全局使用
1、安装 npm install axios2、main.jsimport axios from 'axios'Vue.prototype.$axios = axios3、使用时this.axios.post('/list', { username: 'lili', age: 20}).then( res => { console.lo...原创 2019-09-24 16:53:39 · 193 阅读 · 0 评论 -
vue删除数组对象不能实时更新
<iclass="el-icon-close"@click="deleteItem(index,ind)"></i>//删除选中的数据deleteItem(index,ind){console.log(index,ind)this.cList.data[in...原创 2019-09-17 15:31:45 · 3048 阅读 · 0 评论 -
js后台接口返回的excel文档流下载
<button onclick="download">下载</button>function download(){window.open(baseurl+ '/list/downlo')}原创 2019-09-12 14:55:28 · 1416 阅读 · 0 评论 -
vue+element-ui el-dialog嵌套table组件，ref问题,toggleRowSelection的undefined
项目需求，返回数据的时候，el-dialog弹窗里面的table组件需要设置默认选中。要设置选中，则要调用table组件默认的toggleRowSelection(row,true)方法，true默认选中。问题：el-diaglog组件里面的table组件时自定义的组件。<el-dialog title="选择用户" :width="dialo...原创 2019-09-05 16:50:18 · 8595 阅读 · 0 评论 -
在vue单文件组件引入其他css
<style lang="scss" scoped>@import "~@/assets/styles/main";i {font-size: 20px;}</style>注意：路径前面必须加~@，否则会出错原创 2019-09-03 09:20:47 · 1082 阅读 · 0 评论 -
在vue中使用wangEditor富文本编辑器
1、下载npm installwangeditor2、创建editor子组件<template> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="editor" c...原创 2019-08-30 10:34:21 · 895 阅读 · 0 评论 -
vue实现简单的全选全不选
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../../vue.js"></script> <style> * {margin: 0;paddin...原创 2019-08-06 16:02:47 · 299 阅读 · 0 评论 -
vue实现简单的二级导航目录
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> <style> a{text-decoration: none;c...原创 2019-07-29 14:03:21 · 1307 阅读 · 0 评论 -
vue移动端真机测试
1、打开命令提示符工具，输入ipconfig查看ip地址2、打开package.json，修改scripts下的dev3、npm run dev运行项目4、当pc和手机处于同一局域网，用手机访问ip地址，如：http://192.168.1.102:8080/#/...原创 2019-06-03 22:03:15 · 506 阅读 · 0 评论 -
vue的refs简单使用-访问dom元素/组件
如果是DOM元素上使用，ref指向的是DOM元素，如果是在子组件上使用，则指向子组件实例注意：ref在初始渲染的时候不能被访问，$refs不是响应式的，不能用它在模板中做数据绑定<div id="app"> <counter ref="one" @change="handleChange"></counter> <counter r...原创 2019-05-17 16:37:29 · 450 阅读 · 0 评论 -
vue的列表渲染
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="a...原创 2019-05-14 16:46:52 · 617 阅读 · 0 评论 -
vue的v-if、v-show
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="a...原创 2019-05-14 14:50:00 · 273 阅读 · 0 评论 -
vue.js计算属性computed和watch侦听
计算属性是基于它们的响应式依赖进行缓存的，当依赖属性没有发生关系时就不会多次调用函数。如果计算属性和侦听函数都可以实现相同效果，优先使用计算属性，会使代码更加简洁<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <...原创 2019-05-14 09:41:42 · 153 阅读 · 0 评论 -
父组件传值props及$emit
1.props：用来接收父组件传递的数据，可以是数组，也可以是对象如果是对象,type可以是String,Number,Boolean,Array,Object,Date,Function,Symbol,自定义构造函数default: 给父组件传入的数据一个默认值，如果父组件没有数据传入，就用默认值，如果传入，则是父组件传入的值。对象或数组的默认值必须从一个函数返回require...原创 2019-05-10 09:57:22 · 572 阅读 · 0 评论 -
一个简单的vue的todolist例子
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="a...原创 2019-05-09 16:53:04 · 327 阅读 · 0 评论 -
elementui项目模板demo
1.安装1）https://github.com/ElementUI/element-starter下载项目2）git clonehttps://github.com/ElementUI/element-starter.git从git上克隆下来2.安装依赖npm install 或者 cnpm install3.编译运行npm run dev 或者 cnpm run...原创 2019-05-09 11:40:13 · 5513 阅读 · 0 评论 -
el-checkbox点击一个其他的全部都选中了
今天用elementui的el-checkbox-group遇到一个问题，点击其中一个，所有的checkbox都选中了我原来是这么写的，可是不行<el-form-item label="机构"> <el-checkbox-group v-model="ruleForm.organizationIds" ...原创 2019-05-06 10:49:18 · 15497 阅读 · 1 评论 -
vue2.0+element-ui手机验证
data () { let validMobile = (rule, value, callback) => { if (value === '') { callback(new Error('手机号不能为空！')); } else { if (value !== '') { let reg = /^1[3...原创 2019-04-15 16:06:26 · 613 阅读 · 0 评论 -
elementui的tree树形控件获取所有选中的节点
<el-tree :props="defaultParams" ref="tree" :data="treedata" show-checkbox node-key="id" @check-change...原创 2019-04-02 09:44:26 · 26850 阅读 · 7 评论