![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 73
zeddme
这个作者很懒,什么都没留下…
展开
-
在毕设中,使用vue3+pinia的一些收获
作者vue3配合pinia的首次实践原创 2022-09-21 11:33:01 · 576 阅读 · 1 评论 -
vue 搜索框添加历史搜索记录
笔者vue项目有一个需求,搜索框添加历史搜索记录。想着很久没更新博客了,记录一下吧。PS:pinia+vue3+vant+ts,或许你在使用vue2的语法,不要紧,可以根据自己的需求简单改改。效果图正文搜索框的逻辑就不介绍了,今天这个问题其实是vue操作localStorage。笔者先写了一个工具类来完成对缓存的操作:export class CacheManager { static getHomeSearchHistoryWords() { return localStorage原创 2022-05-05 17:47:37 · 4408 阅读 · 0 评论 -
element tab选项卡标签样式
前言今天工作时有一个需求,大致是把elementUI的选项卡标签样式修改修改。起初是想直接重写element样式类,但是需求中还需对标签中的数字特殊处理,这种方式就行不通了。百度找了很久,终于在一个偏僻的角落找到了答案。正文使用插槽其实这个解决方式,也是我第一时间想到的,但是查阅官网后,发现并没有对label的插槽。但是看着那位老哥的写法,试了试果然成功了。现在整理整理,发出来与大家共勉。原始的代码以及效果图<template> <el-tabs v-model="acti原创 2021-07-27 17:31:53 · 4395 阅读 · 0 评论 -
better-scroll 在vue3
前言最近在vue3中研究了一下移动端常用的插件better-scroll,方便确实是很方便,不过也是踩了不少的坑。共勉。PS:本文着重说明笔者遇到的坑点正文一. 安装$ npm i better-scroll二. 引入在你需要的组件进行局部引入import Bscroll from 'better-scroll'三. 使用创建实例在setupAPI中,需将创建实例的过程放入onMounted函数中。因为实例的创建需要寻找DOM元素,而在挂载完数据的onMounted周期,就可以完原创 2021-04-14 11:40:16 · 3733 阅读 · 2 评论 -
vue3.x + typeScript 知识点
前言不知不觉已经记录了这么多的知识点,更新一下吧。可能比较杂乱,请谅解。正文ref()和reactive()函数都是定义响应式数据的函数,ref更倾向于定义简单类型和数组,reactive定义对象es6语法解构reactive所定义的响应式对象,会让其失去响应式。应用...toRefs方法基本写法<script lang="ts">import {defineComponent, ref} from 'vue';export default defineComponent原创 2021-04-11 17:04:17 · 260 阅读 · 1 评论 -
Vue 项目实战
前言为了练习Vue,写了一个小项目,主要内容是答题。项目简介ElementUI框架无后端,数据来源为本地JSON文件也可以改造成有后端的,查找题目种类就在后端完成比较原生,适合刚刚接触Vue,想做练习的同学笔者水平有限,如有不严谨之处请多多批评预览图主页/开始页答题页正文1. 初始化项目使用脚手架创建项目,cli3.x,选择router即可添加element,详见在vue中使用elementUI安装axios2. 在views文件夹中创建如下目录3. 写原创 2021-03-12 16:55:03 · 15387 阅读 · 8 评论 -
Vue 数据响应式详解
前言Vue最具特色的一点,就是数据驱动,即你不用写复杂的DOM操作,只需专心于业务所用到的数据。那么,Vue的数据响应式到底是怎么实现的呢?正文数据变化的过程侦测数据的变化 (数据劫持 / 数据代理)收集视图依赖了哪些数据 (依赖收集)数据变化时,自动“通知”需要更新的视图部分,并进行更新 (发布订阅模式)追踪数据在 new Vue() 后, Vue 会调用 _init 函数进行初始化,也就是init 过程,在 这个过程Data通过Observer转换成了getter/setter的形原创 2021-02-25 12:55:20 · 650 阅读 · 0 评论 -
vue 中编写404页面
前言今日给自己项目添加404页面时,踩了一点坑,分享给大家。正文 <div class="_404"> <h2 class="m-0">抱歉,页面未找到,<span>{{countDown}}</span>s后自动跳转到 <a href="javascript:;" @click="goHome">首页</a> </h2> <img s原创 2021-02-19 20:37:20 · 5764 阅读 · 11 评论 -
Node + Vue + ElementUI 后台管理系统
开发记录开发记录所用的技术和特点主要技术nodejsexpressVuemongoDBmongooseelementUIaxiosbcrypt 密码加密multer 文件上传http-assert 错误处理jsonwebtoken 服务端接口认证vue2-editor 实现富文本编辑特点前端动态路由后端CURD接口通用下载并运行解压之后得到的文件夹,会有两个子文件夹,分别为 server 和 web,即一个服务端,后端node所用和前端vue所用。终端定位到原创 2021-02-04 21:44:46 · 692 阅读 · 7 评论 -
Vue+ElementUI 表格中使用过滤器
最近遇到一个这样的需求:超出几个字长度的话,就省略绝大部分内容并且加一个省略号。其实不难,有各种方法可以实现,那么我这里突然想到用过滤器实现,研究后,表示可行。过滤器写法Vue.filter('formatLength', value => { return value.length > 9 ? value.slice(0, 9) + '...' : value})很简单,如果字符串的长度超过9,那么就会截取前九位并加三个点;如果说压根没超过9,那就作罢,直接返回原字串。原创 2021-02-02 22:20:19 · 1456 阅读 · 0 评论 -
aixos post请求 参数传递失败
最近使用Vue和Springboot做一个项目,需要添加一个User,从前端表单发起axios的post请求,然后发现了这个很折磨的错误。问题Vue部分Springboot部分发送的数据是:结果,debug显示:也就是说所有的参数都没有正确的传输到后端。这之后,我尝试了jquery中的ajax的post请求,是可以正常传输的,传输的数据也不为null。我又尝试了改为get请求,用参数形式传输,也是可以正常传输。解决方法:之后去查阅资料,发现有这么一个说法:使用axios原创 2021-01-29 20:22:44 · 314 阅读 · 0 评论 -
Vue+Springboot+MySQL 实现分页
自己想的一个分页的逻辑,分享给大家。Vue部分<template> <div> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="userName"原创 2021-01-28 15:23:21 · 419 阅读 · 1 评论 -
在Vue cli3 中使用Element-UI
1.创建cli3项目并cd到该目录$ vue create demo$ cd demo2.在项目中添加ElementUI$ npm i element-ui -S下载完成后,在main.js中配置:import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.打开官网copy一个实例代码,测试是否成功导入找到这个实例代码,粘贴到App.vue这原创 2021-01-28 11:54:19 · 2448 阅读 · 0 评论