简易记事本（本地应用）：vue框架笔记

项目背景

这个项目是跟着B站做的，任务目标是完成一个具备基本记事能力的记事本。

基本记事能力：新增、删除、清空。

项目的完整代码：https://www.cnblogs.com/technicist/p/13357766.html

功能实现

新增

通过v-for生成列表结构

<li 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="请输入任务"  />

删除

<ul >  <li v-for="(item,index) in list">   <div >     <span >{{ index+1 }}.</span>     <label>{{item}}</label>     <button @click="remove(index)">×</button>   </div>  </li></ul>

remove:function(index){this.list.splice(index,1); <!--使用splice获取index，每次删除一个-->}

清空

<button @click="clear" v-show="list.length!=0">Clear</button>

clear:function(){this.list=[]; <!--清空直接把list变成空数组即可-->}

项目感想

首先是折回头继续学JS，把基础打扎实。
其次是做项目的时候先进行步骤拆分，再动手实现。
接着是注意一些比较巧妙的应用，比如涉及到数组要进行隐藏，就考虑用长度空。
最后是一点关于使用vue的感想：这个框架依赖数据驱动，和之前学jquery感觉不太相同，使用vue操作确实非常简便。

数据驱动：当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动去修改dom。

原文转载：http://www.shaoqun.com/a/540606.html

跨境电商：https://www.ikjzd.com/

cb体系：https://www.ikjzd.com/w/2063

naver：https://www.ikjzd.com/w/1727

项目背景这个项目是跟着B站做的，任务目标是完成一个具备基本记事能力的记事本。基本记事能力：新增、删除、清空。项目的完整代码：https://www.cnblogs.com/technicist/p/13357766.html功能实现新增通过v-for生成列表结构<liv-for="(item,index)inlist">add:function(){this.lis
塔图：塔图
首信易：首信易
新手如何快速入门亚马逊跨境行业主要有以下下几点：新手如何快速入门亚马逊跨境行业主要有以下下几点
跨境电商如何做好独立站移动端的优化？：跨境电商如何做好独立站移动端的优化？
怎样的标题是"好标题"？亚马逊小白必读！：怎样的标题是"好标题"？亚马逊小白必读！