![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 53
Vue笔记
Maggieq8324
万事从未风过耳,一生只是梦游身
展开
-
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由:{ path: '/article/:blogId', name: 'blog', component: blog}然后部署nginx,location / { root /usr/local/nginx/html/blog/; index index.html index.htm;}然后刷新页面what原创 2022-03-03 19:02:48 · 3747 阅读 · 1 评论 -
Vue3.0 - vuex全局状态管理
目录前言具体使用定义Vuex全局变量示例:利用vuex进行路由切换(监听全局变量)Vuex改变全局状态变量并传参的3种方式方式一方式二方式三前言vuex是vue的全局状态管理模式,定义在vuex中的值可在整个项目的组件中使用具体使用定义Vuex全局变量安装npm install vuex --save初始化store/index.jsimport { createStore } from 'vuex'export default createStore({ /**原创 2021-09-13 22:23:04 · 1992 阅读 · 0 评论 -
Vue - 使用keep-alive缓存组件状态
目录前言代码示例前言keep-alive是vue提供的用来缓存组件状态的代码示例keep.vue<template> <div>KeepAlive</div> <input /></template><script>export default { name: 'Keep'}</script>static.vue<template> <div原创 2021-09-13 21:38:10 · 1128 阅读 · 0 评论 -
Vue - 视图组件切换的方案
目录前言roure-view 切换视图组件v-if 切换视图组件component 切换视图组件前言Vue中切换视图组件的方案大致有三种1、roure-view 适合大幅度视图切换2、v-if 适合小幅度组件切换3、component 动态组件 roure-view 切换视图组件这个不多说了,之前的文章记录:Vue - route路由跳转v-if 切换视图组件这个比较简单,如下:<CommonOne v-if="true" /><CommonTwo v-el原创 2021-09-13 21:15:24 · 2633 阅读 · 0 评论 -
Vue3.0 - 路由参数的获取
目录前言具体实现 前言 记录下vue3.0中路由参数的获取 具体实现route.js const routes = [ { path: '/',name: 'Home',component: Home}, {path: '/detail/:id',name: 'Detail',component: Detail}] import router from '@/router原创 2021-09-13 17:40:09 · 2617 阅读 · 0 评论 -
Vue - route路由跳转
目录前言基本路由跳转router-link 跳转路由router.push 跳转路由前言vue中的route实现了从一个页面跳转到另一个页面的功能基本路由跳转router.jsimport { createRouter, createWebHashHistory } from 'vue-router'import Home from '../views/home.vue'import Detail from '../views/detail'const routes = [ {原创 2021-09-13 16:37:30 · 2524 阅读 · 0 评论 -
Vue - 父子组件间的参数传递
目录前言父组件向子组件传递参数(props)子组件向父组件传递参数(自定义事件)setup自定义事件methods自定义事件前言记录下Vue中父子组件中的参数传递父组件向子组件传递参数(props)App.vue<template> <Test @sub-event="onTestClick" :url="theme6" /></template><script>import Test from './components/test.原创 2021-09-13 14:29:09 · 1114 阅读 · 0 评论 -
Vue - props属性
目录前言具体应用基本使用确定类型前言props用于接收来自父组件的数据具体应用基本使用App.vue<template> <Test :url="url"/></template><script>import Test from './components/test.vue'export default { name: 'App', components: { Test }, data: functio原创 2021-09-13 13:34:48 · 1096 阅读 · 0 评论 -
Vue - 加载静态图片的方式
目录前言加载静态图片require加载图片import 加载图片前言记录下Vue3.0中加载静态图片的方式加载静态图片<img class="top-theme" src="./assets/home/theme1.jpg">require加载图片<img class="top-theme" :src="require('./assets/home/theme6.jpg')">import 加载图片<template> <img cla原创 2021-09-13 11:59:52 · 2686 阅读 · 0 评论 -
Vue3.0 - 项目初始化的两种方式
目录前言环境配置初始化3.0项目clivite前言// 2.0 升级到 3// 项目目录下 vue add vue-next环境配置先要安装node.js(自行安装)初始化3.0项目clivite原创 2021-09-11 12:59:36 · 3422 阅读 · 1 评论 -
Vue3.0 - computed函数
目录前言computed的基本用法computed的set和get方法前言computed计算属性,与普通JS函数相比computed性能更好,以为它存在计算缓存,js函数没有,其计算结果是只读的,可通过set方法修改。computed的基本用法<body> <div id="app"> <input v-model="firstName" type="number"/> <input v-model="lastNa原创 2021-09-10 14:49:21 · 2044 阅读 · 0 评论 -
Vue3.0 - watch函数
目录前言监听ref对象监听reactive对象监听reactive对象下的单个属性前言watch函数监听当某个值的改变,可以就此做一些事情(钩子函数)监听ref对象<body> <div id="app"> <input v-model="firstName"/> <input v-model="lastName"/> <div>{{fullName}}</div> </div></b原创 2021-09-10 14:48:17 · 1398 阅读 · 0 评论 -
Vue3.0 - 双向数据绑定
目录前言refreactive前言双向数据绑定的核心:实现响应式对象,这里介绍两种响应式数据的声明方式:ref与reactiverefref包装基础类型<body> <div id="app"> <div>{{number}}</div> <div v-on:click="onClick">onClick</div> </div></body>&原创 2021-09-10 14:47:24 · 2057 阅读 · 0 评论 -
Vue - 指令
目录前言具体使用v-textv-htmlv-bindv-onv-ifv-showv-for前言记录下vue中的一些基础指令。具体使用基础代码,以下示例变量均使用setup()函数初始化变量const {createApp} = Vue;const message = "hello, world";const app = { // 入口函数 setup() { return { message } }}原创 2021-09-09 22:09:48 · 1455 阅读 · 0 评论 -
JS 脱敏通用方法
const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{4}(\d{4})$/;//手机号正则校验const idNoReg = /(\d{6})(\d*)(\w{3})/;//简易身份证号码正则const addrReg = /(.{9})(.*)/;//地址正则/** * 名字脱敏 保留首位 * @param fullName * @returns {string}.原创 2021-08-08 16:25:47 · 7606 阅读 · 2 评论 -
RSA分段解密 - Vue
前言上一篇文章实现了 Java RSA的分段加解密,这里我们介绍在 Vue 项目中如何使用 RSA 分段解密,这里的加解密场景是:后端私钥分段加密 - 前端公钥分段解密前端如何使用公钥解密这里不做重复叙述,注重点是分段解密,有需要的参考之前的文章:RSA加密 - Vue传送门RSA分段加密 - Java具体实现src/libs/jsencrypt/lib/JSEncrypt.js中添加新的解密方法decryptLong/** * 分段解密 * @param string原创 2021-07-27 14:57:28 · 2463 阅读 · 5 评论 -
RSA加密 - Vue
前言上一篇博客RSA加密 - Java实现了Java版的RSA公钥加密-私钥解密,私钥加密-公钥解密,这篇博客实现Vue下的加解密,记录两种前后端下加解密的场景前端公钥加密 - 后端私钥解密后端私钥加密 - 前端公钥解密前端公钥加密-后端私钥解密这种情况较为简单,是通用的做法安装jsencryptnpm install jsencryptRSAEncryption.js/** * 非对称加密-RSA * 前端公钥加密 - 后端私钥解密 * */import JSE原创 2021-07-05 14:51:55 · 1849 阅读 · 0 评论 -
vue导出pdf
npm install --save html2canvas #html转换为图片npm install jspdf --save #图片生成pdfexport-pdf.jsimport html2canvas from 'html2canvas'import jsPDF from 'jspdf'export default{ exportPdf(elementId, htmlTitle) { var element = document.getElementB原创 2020-12-19 14:54:06 · 1181 阅读 · 1 评论 -
SpringBoot+Vue实现Excel导出
环境SpringBoot 1.5.20Vue 2.5.2SpringBoot依赖<!-- poi --><dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4.0.1</version></dependency>Controller@Pos原创 2020-07-27 23:27:45 · 4219 阅读 · 5 评论 -
vue 获取字符串日期间的差值
/** * 获取当前日期 * @returns {string} * @Example getNowTime('-') */ getNowTime(str){ let nowDate = new Date(); let y = nowDate.getFullYear(); let m = nowDate.getMonth() + 1 < ...原创 2020-04-14 22:45:29 · 1379 阅读 · 0 评论 -
VUE中展示代码
CodeMirrorCodeMirror是一款在线代码编辑器,本篇文章只记录展示代码,无在线编辑模块安装npm install vue-codemirror --savemain.js引入import { codemirror } from 'vue-codemirror'import 'codemirror/lib/codemirror.css'import 'codemirro...原创 2020-04-07 22:47:55 · 3760 阅读 · 0 评论 -
spring boot 与 vue 配置 https
一、系统环境win10二、spring boot 配置 https1、keytool生成证书打开cmd,使用keytool生成证书,keytool是jdk中的一个证书管理工具,可以生成自签名证书keytool -genkey -alias tomcat -keyalg RSA -keystore server.keystore生成了对应的文件,如下:2、参数配置...原创 2020-03-31 21:53:33 · 2810 阅读 · 3 评论 -
数组排序
/** * 冒泡排序 * @param arr */sort(arr){ for(let j = 0; j < arr.length - 1; j++){ //两两比较,如果前一个比后一个大,则交换位置。 for(let i = 0; i < arr.length - 1 - j; i++){ if(arr[i] ...原创 2020-02-15 21:53:58 · 781 阅读 · 0 评论 -
el-table表格高度自适应
<el-table stripe ref="table" :data="table.tableData" border size="mini" :height="table.tableHeight" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-...原创 2020-02-15 21:43:13 · 3468 阅读 · 0 评论 -
Vue实现PC端分辨率自适应
方案lib-flexible+ px2remLoaderlib-flexible:阿里可伸缩布局方案px2rem-loader:px转rem安装依赖npm install px2rem-loader -Dnpm install lib-flexible -S引入依赖main.js引入lib-flexibleimport 'lib-flexible'px转换成rem...原创 2019-12-25 22:09:10 · 9063 阅读 · 3 评论 -
Vue AES+MD5加密 后台解密
前端VUEvue项目中安装crypto-jsnpm install crypto-js --save-devCryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法包括:MD5SHA-1SHA-256AES新建aes.js\src\utils\目录下新建aes.js文件import Vue from 'vue'i...原创 2019-12-17 21:30:28 · 4309 阅读 · 2 评论 -
vue2.5 + element UI el-table 导出Excel
安装依赖npm install --save xlsx file-saver新建excel.js\src\utils\目录下新建excelHelper.js文件import Vue from 'vue'import FileSaver from "file-saver";import XLSX from "xlsx";export default { /** ...原创 2019-12-16 21:15:45 · 1216 阅读 · 0 评论 -
VUE Base64编码图片展示与转换图片
VUE Base64编码图片展示<img :src="icon">export default { data() { icon: 'data:image/png;base64,/9j/4QBkRXhpZgAATU0AKgAAAAgABYdpAAQAAAABAAAASgESAAQAAAABAAAAAAEBAAMAAAABAR0AAAEyAAIAAAABAAAAAA...原创 2019-09-24 12:37:47 · 20278 阅读 · 3 评论 -
[Vue warn]: Invalid prop: type check failed for prop "fullscreen"
fullscreen属性Dialog弹窗中定义是否为全屏 Dialog的属性,element 官方文档中默认值是false ,于是加入是对其赋值 true,然后报了下面的错误:解决办法:实际上并不用加 true,直接写fullscreen就行,类似于fullscreen属性一样,element中的很多属性其实不用定义值为true或false,希望看到这篇博文的人有所启发...原创 2019-09-19 12:39:23 · 1230 阅读 · 0 评论 -
VUE Error: listen EADDRNOTAVAIL: address not available
vue项目运行npm run dev时出现 Error: listen EADDRNOTAVAIL: address not available … 的错误原因:配置的IP不对解决方法:打开config文件夹,找到index.js文件,将里面的host修改为localhost, 如下图所示:...原创 2019-09-18 12:55:10 · 5701 阅读 · 4 评论 -
print.js继承原有样式
npm install --save print-jsimport Print from ‘print-js’调用print.js插件 Print({ printable: 'printJS-form', type: 'html', // 继承原来的所有样式 targetStyles: ['*']})原创 2019-09-11 13:43:25 · 3956 阅读 · 1 评论 -
vue项目集成金格WebOffice2015
下载官网地址:http://www.goldgrid.com/jinge_download/index.aspx?num=5解压后的文件js文件中有两个重要的js文件iWebOffice2015.js和WebOffice.jsWebOffice.js是WebOffice2015对象的一些方法。iWebOffice2015.js是根据不同的浏览器环境来渲染,并为进行了适当的配置...原创 2019-08-27 10:37:00 · 6291 阅读 · 1 评论 -
Vue项目搭建
Vue 是一套用于构建用户界面的渐进式框架,本篇博客讲述如何搭建一个基础的Vue项目开发环境系统环境:windows10开发工具:Visual Studio Code或HBuilderX或IDEA,根据个人喜好选择Node JSNode JSNode JS是一个JavaScript 运行环境,为我们提供NPM依赖管理和编译打包工具,下载地址:http://nodejs.cn/do...原创 2019-08-11 22:23:08 · 904 阅读 · 0 评论