Vue
学习Vue的笔记
J-Rainbow
搬砖中......
展开
-
vue 前端编辑图片并获取base64
1,申请账号 搞定设计2,获取 APP ID 和配置域名白名单 添加域名白名单(注意:本地配置,域名白名单不可用 http://localhost,会配置不成功,建议使用 Network 中的值,可不加端口号 http://***.**.**.***)3,安装 npm i @gaoding/editor-sdk@next4,代码编写<template> <div class="hello"> <div> <button @click原创 2022-03-12 16:51:31 · 968 阅读 · 0 评论 -
egg+vue+mysql 简单实现 增删查改 功能
一、安装vue与eggvue create web-appnpm init egg --type=simple --registry https://registry.npm.taobao.org生成目录如下server-app存放的是egg框架web-app存放的是vue框架二、插件安装与配置web-appnpm i axiosnpm i vue-routernpm i element-ui npm i lessaxios配置api.js (存放的是前端连接后端的方法)原创 2022-01-27 16:36:48 · 3301 阅读 · 3 评论 -
创建条形码,生成PDF,压缩包下载
需要下载的插件npm install html2canvas --savenpm install jszip --savenpm install file-saver --savenpm install jsbarcode --save npm install jspdf --saveasync downBarCode() { const template = ` <div id="faceId"> <img id="barco原创 2021-11-30 16:34:45 · 633 阅读 · 0 评论 -
vue上传图片,并获取该图片的base64
<div> <el-button type="primary" size="mini" @click="reupload" > <i class="el-icon-upload el-icon--right"> 上传文件 </i> </el-button></div>// 上传文件reupload() { const input = document.createElement('原创 2021-10-27 18:25:18 · 968 阅读 · 0 评论 -
vue 监听全局键盘热键
document.onkeydown = e => { // const key = window.event.keyCode // 避免onkeydown一直监听 if (e.repeat) { return } if (e.code === 'ArrowUp') { this.checkUp() } if (e.code === 'ArrowDown') { .原创 2021-09-15 17:47:17 · 453 阅读 · 0 评论 -
前端 读取文件加loading失效
项目读取文件功能,读取文件过大造成游览器假死,这时读取功能还是在运行,游览器并不能进行其他操作,考虑加一个loading效果,告诉用户正在读取数据在读取文件之前加loading,读取文件之后关闭loading,发现并没用效果经过排查,将loading打开,不关闭,发现loading会在读取文件之后执行解决方案使用setTimeout将读取文件操作延迟readTxt(f) { const loading = this.$loading({ text: '拼命加载中' }) //全局loadi原创 2021-09-09 16:23:10 · 1095 阅读 · 0 评论 -
vuedraggable Uncaught TypeError: Cannot read property ‘header‘ of undefined 报错
vuedraggable Uncaught TypeError: Cannot read property ‘header’ of undefined 报错解决办法:vue版本使用2.x原创 2021-08-14 17:47:57 · 1295 阅读 · 0 评论 -
Vue 子传父与父传子
子传父<!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"> <script原创 2021-04-29 20:31:22 · 161 阅读 · 0 评论 -
vue-router路由基础使用
cnd导入vue-router<script src="../js/vue.js"></script><script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script><div id="app"> <a href="#/logi...原创 2019-11-04 16:22:18 · 105 阅读 · 0 评论 -
SpringBoot-Vue-axios获取后台数据并展示
该项目后台使用SpringBoot框架数据库mysql前端 vue 通过cdn方式导入axios 发送请求Contoller中的方法获取到数据返回到游览器上 @ResponseBody @RequestMapping("/allList") public List<User> allList() { List<User> list = userSe...原创 2019-11-04 13:17:11 · 2790 阅读 · 5 评论 -
vue通过ajax获取数据
created()当vm实例的data和methods初始化完毕后vm实例会被动执行created这个生命周期函数status,message后台传回来的<div class="table-responsive" id="app"> <table class="table"> <tr> <th>...原创 2019-10-30 15:59:52 · 1234 阅读 · 0 评论 -
Vue vue-resource实现get-post-jsonp请求
get请求当发起get请求之后,通过 .then 来设置成功的回调函数通过result.body拿到服务器返回的成功的数据<div id="app"> <input type="button" value="get请求" @click="getInfo"></div><script src="../js/vue.js"></s...原创 2019-10-30 11:38:35 · 147 阅读 · 0 评论 -
Vue v-text 与插件表达式:{ { } } 的区别
v-text:会覆盖元素中原本的内容{ { } }:只会替换自己的这个占位符,不会把整个元素内容清空原创 2019-10-29 14:17:15 · 281 阅读 · 0 评论