基于vue2.0+vuex+localStorage开发的本地记事本示例

网友投稿 230 2023-06-07


基于vue2.0+vuex+localStorage开发的本地记事本示例

本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。

实现效果

功能说明

支持回车添加事件

支持事件状态切换

添加事件 -> 进入未完成列表

未完成 -> 已完成(勾选checkbox)

未完成 -> 已取消(点击取消按钮)

已完成 -> 未完成(取消勾选checkbox)

已取消 -> 未完成(点击恢复按钮)

支持控制台打印所有事件数据

支持筛选事件

支持编辑事件

支持删除事件

支持清空所有事件

支持本地化存储

支持折叠面板

项目笔记

本项目是使用vue-cli脚手架生成的项目,项目代码可以到我的github上clone下来。clone下来之后可进入文件目录

// 执行

npm install

// 安装依赖完成之后再执行

npm run dev

// 即可在本地开启 http://localhost:8080 访问该项目

// 如果 node-sass 安装失败,可使用 cnpm 安装

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm -v // 查看cnpm版本号确认安装成功

cnpm install node-sass -D

//安装成功后再看看是否可以正确运行了

一、目录结构

|——notepad/

| |——build/

| |——confg/

| |——node_modules/

| |——src/

| | |——assets/

| | |——components/

| | | |——add_event.vue //添加事件组件

| | | |——dialog.vue //弹出框组件

| | | |——event_table.vue //表格组件

| | | |——header.vue //头部组件

| | | |——tools.vue //工具栏组件

| | |——store/ //存放vuex代码

| | | |——actions.js //vuex的action文件

| | | |——index.js //vuex核心代码

| | |——App.vue //父组件

| | |——main.js //入口文件

| |——static/

| |——.babelrc

| |——.editorconfig

| |——.gitgnore

| |——index.html

| |——package.json

| |——README.md

二、主要难点

1.折叠面板

难点:点击折叠面板title,要动画实现sliderUp和sliderDown,但是div高度auto,使用transition: height .3s无效。

解决方法:点击时候获取div高度值,赋值给style.height,然后再改变高度为0,这样transition才会生效。

代码如下:

2.切换状态

难点:在不同的状态间切换,实时地把事件在不同状态列表中显示出来

解决方法:利用vuex进行状态管理,把所有事件和状态存储在store对象中,在组件中通过计算属性获得事件,因此就有了实时性。

代码如下:

// store/index.js

import Vue from 'vue';

import Vuex from 'vuex';

import * as actions from http://'./actions.js';

Vue.use(Vuex);

const state = {

event: [] // event,用来存储所有事件

}

const mutations = {

EVENTDONE(states,obj){ // EVENTDONE,用来修改事件的状态为已完成

for (let i = 0; i < states.event.length; i++) {

if (states.event[i].id === obj.id) {

states.event[i].type = 2; // type == 2,表示状态为已完成

break;

}

}

}

}

export default new Vuex.Store({

state,

actions,

mutations

})

// store/actions.js

export const eventdone = ({ commit }, param) =>{

commit('EVENTDONE',{id: param});

}

// App.vue

3.本地存储

知识点:localStorage是HTML5提供的一种在客户端存储数据的新方法,没有时间限制,第二天、第二周或下一年之后,数据依然可用。

用法:

1)存储数据:localStorage.setItem(item, value)

2)获取数据:localStorage.getItem(item)

3)移除数据:localStorage.removeItem(item)

代码如下:

// store/index.js

const LocalEvent = function(item){ // 定义一个本地存储的构造函数

this.get = function () { // 拿数据

return JSON.parse(localStorage.getItem(item));

}

this.set = function (obj) { // 存数据

localStorage.setItem(item,JSON.stringify(obj));

}

this.clear = function () { // 删数据

localStorage.removeItem(item);

}

}

const local = new LocalEvent('lx_notepad'); // 创建一个本地存储的事例

const state = local.get() || {

event: [],

count: 0

}

const mutations = {

ADDEVENT(states,obj){ // ADDEVENT,添加新的事件,并存储到localStorage里

states.count++;

obj.items.id = states.count;

states.event.unshift(obj.items);

local.set(states);

}

}

4.父子组件间的通讯

知识点:组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。

1)父组件可以使用 props 把数据传给子组件。

2)子组件可以使用 $emit 触发父组件的自定义事件。

代码如下:

// App.vue

// 通过 isShow、msg 把数据传个子组件,监听自定义事件cancel、sure。

// dialog.vue

{{msg}}

5.筛选功能

功能描述:可根据 类型 和 关键词 进行筛选

知识点:在返回所有事件的计算属性上,使用过滤器( filter ),进行对 type 和 content 的筛选,返回符合条件的事件。

代码如下:

总结

虽然只是做了个小小的记事本,但是我感觉收获还是很大的,很多知识点掌握得更加的牢固。这个记事本只做了一个页面,就没有用vue-router,路由也是vue里很强大的功能。

做这个记事本的初衷,是因为在工作中,我都会把最近要做的事情给记在本子上,完成之后就会打钩,所以想把这个给放到电脑上去实现。

demo下载地址:notepad_jb51.rar


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Eclipse安装Aptana插件(注意对应版本问题)
下一篇:Java 匿名内部类详解及实例代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~