随笔分类 - Vue
摘要：(目录) 前言 记录下Nginx部署Vue项目刷新404的解决方案，遇到了两次，route用的是history路由模式，动态路由： { path: '/article/:blogId', name: 'blog', component: blog } 然后部署nginx， location / {
阅读全文
摘要：(目录) 前言 vuex是vue的全局状态管理模式，定义在vuex中的值可在整个项目的组件中使用 具体使用 定义Vuex全局变量 安装 npm install vuex --save 初始化store/index.js import { createStore } from 'vuex' expor
阅读全文
摘要：(目录) 前言 keep-alive是vue提供的用来缓存组件状态的 代码示例 keep.vue <template> <div>KeepAlive</div> <input /> </template> <script> export default { name: 'Keep' } </scri
阅读全文
摘要：(目录) 前言 Vue中切换视图组件的方案大致有三种 1、roure-view 适合大幅度视图切换 2、v-if 适合小幅度组件切换 3、component 动态组件 roure-view 切换视图组件 这个不多说了，之前的文章记录：Vue - route路由跳转 v-if 切换视图组件 这个比较简
阅读全文
摘要：(目录) 前言 记录下vue3.0中路由参数的获取 具体实现 route.js const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/detail/:id', name: 'Detail', componen
阅读全文
摘要：(目录) 前言 vue中的route实现了从一个页面跳转到另一个页面的功能 基本路由跳转 router.js import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/home
阅读全文
摘要：(目录) 前言 记录下Vue中父子组件中的参数传递 父组件向子组件传递参数（props） App.vue <template> <Test @sub-event="onTestClick" :url="theme6" /> </template> <script> import Test from
阅读全文
摘要：(目录) 前言 props用于接收来自父组件的数据 具体应用 基本使用 App.vue <template> <Test :url="url"/> </template> <script> import Test from './components/test.vue' export default
阅读全文
摘要：(目录) 前言 记录下Vue3.0中加载静态图片的方式 加载静态图片 <img class="top-theme" src="./assets/home/theme1.jpg"> require加载图片 <img class="top-theme" :src="require('./assets/h
阅读全文
摘要：(目录) 前言 最近将vue升级到了3.0，记录下3.0 下项目初始化的两种方式 cli 脚手架升级 node.js版本 vue-cli 卸载（对应vue2.0）（如果之前安装的是2.0版本，需要执行该操作卸载后升级，如果没有安装过跳到下一步直接安装） npm uni -g vue-cli vue/
阅读全文
摘要：(目录) 前言 computed计算属性，与普通JS函数相比computed性能更好，以为它存在计算缓存，js函数没有，其计算结果是只读的，可通过set方法修改。 computed的基本用法 <body> <div id="app"> <input v-model="firstName" type=
阅读全文
摘要：(目录) 前言 watch函数监听当某个值的改变，可以就此做一些事情（钩子函数） 监听ref对象 <body> <div id="app"> <input v-model="firstName"/> <input v-model="lastName"/> <div>{{fullName}}</div
阅读全文
摘要：(目录) 前言 双向数据绑定的核心：实现响应式对象，这里介绍两种响应式数据的声明方式：ref与reactive ref ref包装基础类型 <body> <div id="app"> <div>{{number}}</div> <div v-on:click="onClick">onClick</d
阅读全文
摘要：(目录) 前言 记录下vue中的一些基础指令。 具体使用 基础代码，以下示例变量均使用setup()函数初始化变量 const {createApp} = Vue; const message = "hello, world"; const app = { // 入口函数 setup() { ret
阅读全文
摘要：前言 上一篇文章实现了 Java RSA的分段加解密 ，这里我们介绍在 Vue 项目中如何使用 RSA 分段解密，这里的加解密场景是： 后端私钥分段加密 - 前端公钥分段解密 前端如何使用公钥解密这里不做重复叙述，注重点是分段解密，有需要的参考之前的文章：RSA加密 - Vue 附上其他链接： RS
阅读全文
摘要：前言 上一篇博客RSA加密 - Java实现了Java版的RSA公钥加密-私钥解密，私钥加密-公钥解密，这篇博客实现Vue下的加解密，记录两种前后端下加解密的场景 前端公钥加密 - 后端私钥解密 后端私钥加密 - 前端公钥解密 附上其他链接： RSA加密 - Java RSA分段加密 - Java
阅读全文
摘要：环境 vue3.4.0 依赖 npm install --save html2canvas #html转换为图片 npm install jspdf --save #图片生成pdf 工具类 export-pdf.js import html2canvas from 'html2canvas' imp
阅读全文
摘要：环境 SpringBoot 1.5.20 Vue 2.5.2 SpringBoot 依赖 <!-- poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4
阅读全文
摘要：``` /** * 获取当前日期 * @returns {string} * @Example getNowTime('-') */ getNowTime(str){ let nowDate = new Date(); let y = nowDate.getFullYear(); let m = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMon
阅读全文
摘要：CodeMirror 是一款在线代码编辑器，本篇文章只记录展示代码，无在线编辑模块 安装 main.js引入 如下所示，安装 后，在 目录下有许多 主题，挑选中意的即可 组件封装 组件引用 效果图 注意：在使用时想要高度自适应，需要修改 文件中的样式为高度自适应 .end
阅读全文