![](https://img-blog.csdnimg.cn/20190927143917326.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue学习记录
一只程序猿小白
前端,努力成为全栈攻城狮
展开
-
TypeScript 学习之路
一种由微软开发的自由和开源的编程语言,简称TS。TypeScript是JavaScript的超集,即包含JavaScript的所有元素,能运行JavaScript的代码,并扩展了JavaScript的语法。相比于JavaScript,它还增加了静态类型、类、模块、接口和类型注解方面的功能,相对于JavaScript,TypeScript属于强类型语言,所以对于项目而言,会使代码更加规范,从而解决了大型项目代码的复杂性。更易于大项目的开发...原创 2022-08-31 11:34:54 · 1550 阅读 · 1 评论 -
Vue + Element + html2canvas + jspdf 实现导出表单、Echarts图表为pdf
1、首先搭建Vue 项目(具体可参考以前文章,不再详述)2、引入Element(你可以引入整个 Element,或是根据需要仅引入部分组件,不再详述)3、安装并引入echarts// 安装npm install echarts -S// 在main.js中 引入import * as echarts from 'echarts'Vue.prototype.$echarts = echarts4、安装 html2canvas 、 jspdf5、新建pdf.js// 导出页面为PDF格原创 2021-11-19 14:07:14 · 1340 阅读 · 0 评论 -
uni-app 引入外部字体
uni-app 支持使用字体图标,请仔细阅读官方文档:地址一、当字体文件大于40kb时,需要自己转化成base64格式:1、将下载好的字体文件转换成base64格式,转换地址2、转换完成后,下载文件,解压后将这三个文件放入项目中的static目录下:3、在App.vue中引入该文件@import url("./static/fonts/stylesheet.css");4、在代码中正常使用即可:例如:font-family: YOUSHEhaoshenti;...原创 2021-08-24 16:00:27 · 5458 阅读 · 2 评论 -
Element-ui 使用 MessageBox 弹框 实现一个自定义的文本输入框
官网例子这样并不是我们想要的输入框,所以可以优化一下1、代码如下const h = this.$createElement; this.$msgbox({ title: "确认回复", message: h( "div", { attrs: { class: "el-textarea" } }, [原创 2021-07-21 15:14:32 · 9255 阅读 · 2 评论 -
基于elementui的年月日周时间控件
子组件<template> <div class="component_search_form_date clearfix"> <el-radio-group v-model="curType" :size="moduleSize" style="float: left;" @change="radioChange"> <el-radio-button v-for="item in showBtnList" :key="item.value"...原创 2021-06-10 16:29:27 · 2080 阅读 · 1 评论 -
vue 点击对图片进行标注并记录当前的坐标
参考链接:https://blog.csdn.net/m0_46627730/article/details/106583908?utm_term=vue%E5%9B%BE%E7%89%87%E7%82%B9%E5%87%BB%E4%BD%8D%E7%BD%AE&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-1-106583908&spm=3001.4430...原创 2021-06-04 16:24:12 · 5885 阅读 · 14 评论 -
axios中post请求上传的参数 是 form data,后面跟了一个冒号
前言:最近在项目中调接口时,发现请求上传的参数form data后面跟了一个冒号解决方法:原创 2021-06-03 17:06:21 · 1926 阅读 · 0 评论 -
vue-cli3 使用 iframe嵌入本地html 文件
* 注意:在vue-cli3 中,需要将引入的html文件放在 public/static 目录下,否则不生效。vue-cli2 中,放在 static 目录下可以正常引入// src 的根路径就是public<iframe src="static/test.html"></iframe>...原创 2021-05-10 10:11:10 · 2159 阅读 · 1 评论 -
vue-gemini-scrollbar(vue自定义滚动条 支持ie9+)
前言:最近项目中 滚动条要支持自定义,支持 ie9,所以找到了这款插件github地址:https://github.com/lx544690189/vue-gemini-scrollbardemo地址:https://lx544690189.github.io/vue-gemini-scrollbar/demo/01-body.html参考: gemini-scrollbar https://github.com/noeldelgado/gemini-scrollbar介绍无需配置..原创 2021-03-11 10:36:12 · 670 阅读 · 0 评论 -
vue cli3 创建的项目在IE11中运行,出现白屏,报错SCRIPT1003: 缺少 ‘:‘
一、分析其他浏览器打开没问题,所以是存在不兼容IE的代码。二、问题解决①安装 babel-polyfillnpm install --save @babel/polyfill②在main.js中引入,(放最上方)import 'babel-polyfill'③修改 babel.config.jsmodule.exports = { presets: [ [ '@vue/cli-plugin-babel/preset', .原创 2021-02-19 22:15:54 · 953 阅读 · 0 评论 -
Vue Vuex中State, Mutations,Actions,Getters使用详解
Vuex 的详细介绍请查看官方文档 :https://vuex.vuejs.org/zh/前言:写这个教程的原因是自己和 Vuex 打交道的时候踩过很多坑,所以记录一下学习的过程,还有是官方的教程真的是太官方了,对我这种小菜鸟来说不是那么的通俗易懂。1、Vuex 是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools ex..原创 2020-11-05 18:03:19 · 5843 阅读 · 0 评论 -
Vue 页面加载进度条nprogress的使用
前言:客户在访问网页的时候想要看到网页加载的进度,所以使用 nprogress 来实现当页面跳转是出现在浏览器顶部的进度条,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来。一、参考资料官网:https://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress二 、安装 nprogress// 使用npm 或者yarn 安装npm install --save nprogress .原创 2020-10-22 15:08:31 · 3455 阅读 · 1 评论 -
vue:无法加载文件,因为在此系统上禁止运行脚本
前言:在vs-code 运行命令查看 vue版本时遇到这个问题:但是在 cmd中,并没有报错解决方法:管理员身份打开 Window powershell,输入命令 set-ExecutionPolicy RemoteSigned,回车,输入 'Y'即可...原创 2020-09-21 17:00:41 · 991 阅读 · 0 评论 -
Echarts +Amap 实现点击地图下钻功能
1、最近的项目需求中,需要实现地图下钻到区的功能,所以在查阅一些资料后,决定使用Amap。2、原创 2020-07-18 10:34:13 · 4097 阅读 · 2 评论 -
vue-animate-number插件(从0动态滚动到指定数字)
1、前言:最近的项目需求中,对有些数字的变化,客户提了需求,加一些加载效果用户体验会更好。所以用了vue-animate-number 这一款插件2、案例:https://wangdahoo.github.io/vue-animate-number vue-animate-number地址:https://github.com/wangdahoo/vue-animate-number3、①、安装vue-animate-number插件npm install vue-anim...原创 2020-07-18 09:49:55 · 10872 阅读 · 4 评论 -
Vue + Element 实现导入导出Excel
1、首先搭建Vue 项目(具体可参考以前文章,不再详述:https://blog.csdn.net/qq_42540989/article/details/89853923)2、引入Element(你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。)//在main.js中引用import ElementUi from 'elem...原创 2020-04-13 18:15:35 · 28744 阅读 · 10 评论 -
Vue(第19篇 .sync修饰符 本文举例:子传父)
*父子组件传值其他文章已详细介绍:https://blog.csdn.net/qq_42540989/article/details/98481824本文介绍的是一种更加方便的写法1、建议先看官方文档:https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A62...原创 2020-03-18 13:37:55 · 627 阅读 · 0 评论 -
Vue (第18篇 vue+express+MongoDB 搭建项目)
*本文默认已经安装好node,不在介绍node安装教程。*node.js+Express搭建项目,也可通过启动WebStorm,File->New->Project,选择Node.js Express App,Location是项目路径,Template是页面模板和解析引擎。1、Vue项目搭建教程已在其他文章介绍过:https://blog.csdn.net/qq_425409...原创 2019-11-28 09:57:02 · 1347 阅读 · 0 评论 -
Vue (第14篇 组件通讯)
Vue:https://cn.vuejs.org/v2/guide/components-props.html1、props (父传子,props值可以是一个数组或者对象) *父子之间传值已经在Vue第二篇中介绍过:https://blog.csdn.net/qq_42540989/article/details/98481824Vue.component('my-comp...原创 2019-11-09 18:09:51 · 407 阅读 · 0 评论 -
Vue (第12篇 vue-seamless-scroll 无缝滚动)
1、cnpm 安装:cnpm install vue-seamless-scroll --save (自行下载即可,也可使用npm)2、引入在项目目录中,找到main.js。import scroll from 'vue-seamless-scroll'Vue.use(scroll)普通引入方法:使用script标签 <script src="...原创 2019-10-16 18:12:13 · 14819 阅读 · 17 评论 -
Vue (第1篇教程 使用 Vue2.0 vue-cli脚手架搭建一个项目)
1.首先得下载node.js。方法可自行百度。2.3.一开始报很多错误,后来用管理员就没问题了。4.5.如上图会遇到卡住的问题,解决方法是在最后一个选项上选择No,I will handle it myselft,然后cd vue_test,然后cnpm install,这样就成功了,然后执行npm run dev就出现:6.浏览器端访问localhost:8081...原创 2019-05-05 19:53:09 · 2654 阅读 · 3 评论 -
Vue ( 第2篇教程 父组件与子组件传值)
1、父组件传值给子组件(父传子)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2019-08-05 18:13:48 · 221 阅读 · 0 评论 -
Vue ( 第3篇教程 v-model数据双向绑定)
1、数据双向绑定:Vue是一个mvvm框架,核心的功能就是双向的数据绑定。就是说当数据发生变化的时候,视图也发生变化,当视图发生变化的时候,数据也会跟着同步变化。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model</ti...原创 2019-08-12 18:28:04 · 351 阅读 · 0 评论 -
Vue (第4篇教程 Vue.filter过滤器)
1、过滤器:vue 官方文档这样说:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- ...原创 2019-08-24 18:09:40 · 672 阅读 · 1 评论 -
Vue报错:(npm run dev 启动项目时报错;Error: Cannot find module 'array-includes')
解决方法:1、删掉项目中的node_modules 文件夹;2、执行cnpm install命令 重新下载依赖;3、执行 npm run dev命令, 启动项目,此时不会报错,项目启动成功。...原创 2019-08-14 15:55:02 · 866 阅读 · 0 评论 -
Vue (第6篇教程 从一个页面跳转并且传参到另一个页面)
本文跳转传参用的是:this.$router.push1、首先定义好要跳转的页面(跳转到MonitoringDetails)以及传递的参数(benid2就是要传递的参数)。 goMonitoringDetails() { this.$router.push({ name: "MonitoringDetails", //跳转的页面 p...原创 2019-09-06 18:03:58 · 3603 阅读 · 0 评论 -
Vue (第7篇教程 点击实现全屏和退出全屏的功能)
1、图标引入的是阿里图库。 <i class="iconfont" :class="[btnStatus === 0?'iconquanping':'iconexit']" @click="getFullCreeen(btnStatus)"></i>2、export default { name: "mainContent", data() { ...原创 2019-09-16 13:02:41 · 985 阅读 · 0 评论 -
vue (第11篇 解决安卓4.4版本的电脑的兼容问题)
1、最近在项目中遇到了甲方的设备是安卓4.4的一个平板电脑,此时vue不兼容,因为不支持es6的语法。2、解决方法:首先安装插件(使用cnpm请先安装,没有安装也可使用npm下载):cnpm install babel-polyfillcnpm install es6-promise在你的vue项目中,找到main.js,引入以下代码:import 'babel-po...原创 2019-10-08 12:56:07 · 1254 阅读 · 0 评论 -
Vue (第9篇 项目启动出现Error:Cannot find module 'array-includes'解决方法)
1、用WebStorm 启动项目时遇到这样的报错:2、解决方法:①首先删掉项目中的node_modules文件夹。②执行npmcacheclean或者cnpmcacheclean命令清除缓存。此时依然报错:由于 npm 5 使用了新的包管理模式,所以在升级之后,请先清空一下本地缓存:所以执行:npm cache clean --force (在Web...原创 2019-09-30 14:11:39 · 4910 阅读 · 1 评论 -
Vue (第10篇 调试工具之 vue-devtools的安装)
Chrome浏览器的应用商店不能直接访问,所以本文介绍从GitHub安装 vue-devtools的方法:1、下载安装:https://github.com/vuejs/vue-devtools2、进入 vue-devtools的目录下安装依赖: 3、执行npm run build 打包:4、进入Chrome扩展程序(更多工具>扩展程序):勾选开发者模式。点击...原创 2019-09-21 18:17:38 · 219 阅读 · 0 评论 -
Vue (第8篇教程 vue中Axios的封装和API接口的管理)
1、axios的安装:安装axios:cnpm install axios。引入:在项目的src文件夹中新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口。2、axios的封装(直接贴代码)//在http.js中/** * axios封装 * 请求拦截、响...转载 2019-09-29 09:24:50 · 1300 阅读 · 0 评论 -
Vue (第5篇教程 v-for 渲染数据 渲染多层数据)
1、渲染数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-for</title></head><body> <div id="app"> <p v-for="(ite...原创 2019-08-15 18:21:32 · 3616 阅读 · 0 评论