基于vuejs实现一个todolist项目

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

完整代码：

App.vue

模板div id=' app ' h1 v-html=' title '/h1输入v-model=' new item ' v-: keyup。enter=' addNew '/input ul Li v-for=' items ' v-bind : class='中的项{已完成的：项。已完成} ' v-: click=' toggleFinish(item)' { { item。标签} }/Li/ul/div/模板脚本导入存储来自' ./store ' export default { data : function(){ return { title : '这是一个Todolist '、items:Store.fetch()、newItem:'' }、watch : { items : { handler : function(items){ store。save(items)}、deep:true }、methods : { toggle finish 3360 function(items){ items finished=！item.isFinished }，addNew : FuncTion(){ this。物品。推({标签:这个。NewItem，' Isfinished ' : false })此。new ITeM=' ' } } } } }脚本样式。已完成{文本装饰：下划线；}李{列表式：无；font-size :1.6 em页边距-top :10 px；}#app { font-family: 'Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}输入{宽度：230像素高度：40 px边界半径：20像素；padd : 0.4 em 0.35 emborder :3 px实心# CFCFCFCFfont-size : 1.55 em}/stylestore.js:

const STORAGE_KEY='todos-vuejs '导出默认值{ fetch : function(){ return JSON。解析(窗口。LocalSTORAGE。GetItem(STORAGE _ KEY)| '[]')；}，保存：功能(项){窗口。本地存储。setitem(STORAGE _ KEY，JSON.stringify(items)) }}详细解析

ES6的写法：

导出默认值{ name: 'hello '，data () { return { msg: '欢迎使用您的Vue.js App' } }导出默认值和出口区别：

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

1 .出口

//演示1。jsexport const str=' hello world '导出函数f(a){返回a 1}对应的导入方式：//demo2.jsimport { str，f }来自“演示1”//也可以分开写两次，导入的时候带花括号2 .导出默认值

//demo1.jsexport默认const str='hello world '对应的导入方式：//demo2.jsimport字符串来自“演示1”//导入的时候没有花括号当最简单导入的时候，这个值是将被认为是"入口"导出值。

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

组件布局将在这里设置，某视频剪辑软件文件将由真空装载机进行加载，某视频剪辑软件内同时包含html、css、js源码，使组件的独立，组件之间可以尽可能地解耦，便于开发维护

先看一个简单示例：只要完成了为真实的就加下划线，假的就不加下划线：

模板div id=' app ' h1 v-html=' title '/h1 ul Li v-for=' items in items ' v-bind : class=' {成品： item。Isfinished } ' { { item。标签} }/Li/ul/div/templatescriptionimport Hello from ' ./components/Hello ' export default { data : function(){ return { title : '这是一个todolist '，item :[{ label : ' coding '，' isFinished':false }，{ label:'walking '，' Isfinished ' : true }]}/脚本样式。完成{ text-修饰：下划线；}#app { font-family: 'Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}/样式对于班级的控制如上：如果是数组的话则可以渲染多个。

再进一步完成功能：点击没有下划线的里就会加下划线，有下划线就会去除下划线。

需要绑定事件：

复制代码代码如下： Li v-for=' items '中的项目v-bind : class=' {已完成的：项。已完成} ' v-: click=' toggleFinish(item)' { { item。标签} }/Li

还要添加方法toggleFinish():

方法： { togglefinish 3360函数(item){ item。完成了=！item.isFinished } }将投入输入的值添加到列表下面

添加输入：

输入v-model=' NewItem ' v-: keyup。输入=' add new '/输入数据对象添加：

新项目：""添加方法：

//addnew :函数(){//alert(this。new item)//这个。newitem=' '//添加后加输入框清空//}添加新的：函数(){ this。物品。推({标签:这个。新项目，' '已完成' : false })这。新项目=' ' }使用localStorage来存储

使用store.js:

const STORAGE_KEY='todos-vuejs '导出默认值{ fetch : function(){ return JSON。解析(窗口。LocalSTORAGE。GetItem(STORAGE _ KEY)| '[]')；}，保存：功能(项){窗口。本地存储。setitem(STORAGE _ KEY，JSON.stringify(items)) }}两个方法：一个设置，一个获取

导入：

从""导入存储“商店”打印一下存储，控制台。日志（存储),可以看到：

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

watch : { items : { handler : function(val，oldVal){ console.log(val，oldVal) }，deep:true } }，可以看到打印出：

使用保存()方法：

watch : { items : { handler : function(items){ store。save(items)}，deep:true } }，9503.163.com

一有变化就会触发。

将提取()方法也加进去：

来自""的脚本导入存储/store ' export default { data : function(){ return { title : } span？/span这是一个todolist '、items:Store.fetch()、newItem:'' }、watch : { items : { handler : function(items){ store。save(items)}、deep:true }、methods : { toggle finish h : function(items){ items。完成了=！item.isFinished }，添加新的：函数(){ this。物品。推({标签:这个。新项目，' '已完成' : false })这。新项目=' ' } } } }脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。