基于vuejs实现一个todolist项目

用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化:

完整代码:

App.vue

store.js:

详细解析

ES6的写法:

export default 和 export 区别:

  1).export与export default均可用于导出常量、函数、文件、模块等   2).你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用   3).在一个文件或模块中,export、import可以有多个,export default仅有一个   4).通过export方式导出,在导入时要加{ },export default则不需要

1.export

//demo2.js
import { str,f } from 'demo1' //也可以分开写两次,导入的时候带花括号

2.export default

//demo2.js
import str from 'demo1' //导入的时候没有花括号

当最简单导入的时候,这个值是将被认为是”入口”导出值。

在App.vue中完成项目编写:

组件布局将在这里设置,.vue文件将由vue-loader进行加载,.vue内同时包含html、css、js源码,使组件的独立,组件之间可以尽可能地解耦,便于开发维护

先看一个简单示例:只要isFinished为true就加下划线,false就不加下划线:

对于class的控制如上:如果是数组的话则可以渲染多个。

再进一步完成功能:点击没有下划线的li就会加下划线,有下划线就会去除下划线。

需要绑定事件:

代码如下:

还要添加方法toggleFinish():

将input输入的值添加到列表下面

添加input:

data对象添加:

添加方法:

addNew:function(){
this.items.push({
label:this.newItem,"isFinished":false
})
this.newItem=""
}

使用localStorage来存储

使用store.js:

两个方法:一个设置,一个获取

导入:

打印一下Store,console.log(Store),可以看到:

由于加入代码中每次都需要添加还有删除等等,如果每次都用到store的方法,这就有点麻烦了,所以这里就要用到watch观察。

可以看到打印出:

使用save()方法:

一有变化就会触发。

将fetch()方法也加进去:

import Store from './store' export default { data:function(){ return { title:"?this is a todolist","isFinished":false }) this.newItem="" } } }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp>npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...