简易记事本(本地应用):vue框架笔记
项目背景
这个项目是跟着B站做的,任务目标是完成一个具备基本记事能力的记事本。
基本记事能力:新增、删除、清空。
项目的完整代码:https://www.cnblogs.com/technicist/p/13357766.html
功能实现
新增
通过v-for生成列表结构
<li class="todo" v-for="(item,index) in list">
add:function(){this.list.push(this.inputValue);},
通过v-model获取用户数据
data:{
list:["写代码","吃代码","睡觉觉"],
inputValue:"好好学习,天天向上"
},
回车,新增数据(@keyup.enter)
<input v-model="inputValue" @keyup.enter="add"
autofocus="autofocus" autocomplete="off"
placeholder="请输入任务"
class="new-todo"/>
删除
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}.</span>
<label>{{item}}</label>
<button class="destroy" @click="remove(index)">×</button>
</div>
</li>
</ul>
remove:function(index){this.list.splice(index,1); <!--使用splice获取index,每次删除一个-->}
清空
<button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
clear:function(){this.list=[]; <!--清空直接把list变成空数组即可-->}
项目感想
首先是折回头继续学JS,把基础打扎实。
其次是做项目的时候先进行步骤拆分,再动手实现。
接着是注意一些比较巧妙的应用,比如涉及到数组要进行隐藏,就考虑用长度空。
最后是一点关于使用vue的感想:这个框架依赖数据驱动,和之前学jquery感觉不太相同,使用vue操作确实非常简便。
数据驱动:当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动去修改dom。
赞 (0)