随笔分类 -  Vue

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