vue单页备忘录功能

最新推荐文章于 2023-02-12 01:34:30 发布

置顶

没感情的菠萝头

最新推荐文章于 2023-02-12 01:34:30 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 日常记录

本文链接：https://blog.csdn.net/qq_35036255/article/details/89881328

本文介绍了如何使用Vue.js构建一个备忘录应用，包括登录组件、添加与删除功能、路由管理和Vuex状态管理。讨论了在实现过程中遇到的问题，如登录后页面跳转、textarea换行显示、移动端双击放大禁止以及项目打包后出现的空白页问题，并提供了相应的解决方案。同时，应用引入了mint-ui库，实现了列表左滑删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

实现效果

demo源码

在这里插入图片描述
功能

1.vuex状态集成，添加内容保存到列表功能
2.点击列表进入详情页功能
3.vue-router路由管理，组件跳转。
4.mint-ui组件库引入，新增列表左滑删除功能。
5.表单功能

环境

配置环境 vue-cli3.0
运行依赖 vue-router，vuex，mint-ui。
开发依赖 sass，babel-eslint，eslint（可不安装）

通过vue-cli脚手架可以快速构建vue目录，并自带webpack打包工具

登录组件Login.vue

思路：利用 v-if，v-else判断用户选择登录或注册。用localStorage判断用户是否存在。（真实项目不建议这么操作）

问题1：点击登录按钮后页面刷新不跳转？

解决： 提交的时候会有默认事件行为，表单会触发表单的默认提交行为，在button上加@click.prevent 阻止事件的默认行为。

<template>
  <div class="loginBox">
    <form class="login" action="" v-if="!isreg">
     <strong>欢迎登陆</strong> 
     <div>
       <span>用户名：</span> 
       <input type="text" v-model="userName"/>
     </div> 
     <div>
       <span>密&nbsp;&nbsp;&nbsp;码：</span>
       <input type="password" v-model="password"/>   
     </div>
     <button class="active" @click.prevent="login">登录</button>
     <button @click.prevent="reg">注册</button>
    </form>

    <!-- 注册 -->
    <form class="login" action="" v-el