资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用Vue实现todolist-创新互联

这篇文章主要介绍了如何使用Vue实现todolist,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

为硚口等地区用户提供了全套网页设计制作服务,及硚口网站建设行业解决方案。主营业务为网站建设、做网站、硚口网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

一、使用vue-cli脚手架快速搭建一个框架

利用vue-cli来自动生成我们项目的前端目录及文件,方法:

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

这样我们的一个基于webpack的vue项目目录就可以快速构建好了。

目录如下:

如何使用Vue实现todolist

二、完成一个简单的todolist

接下来就看一下webpack.base.conf文件,这是核心文件,必须执行的文件,这里可以看到entry和output,这就是入口和输出路径,在入口处看到了./src/main.js,这就找到了界面的入口处了。在main.js中可以看到创建了一个vue实例,并加载了模板组件App.vue,所以我们的todo list代码就可以写在App.vue中。

简单的todolist我们可以完成这几个功能:

1、显示todo列表

2、判断列表任务完成状态,若完成则添加相应的样式

3、在输入框中动态添加todo项目,点击回车在列表中显示

4、点击相应的项目转换状态

首先我们完成显示列表的功能:



如何使用Vue实现todolist

效果

export后面跟的对象,会作为 new Vue()的参数,来创建一个Vue的组件,并导出。

判断任务的完成状态,完成则添加text-decoration样式

官方文档中我们可以看到:

如何使用Vue实现todolist

绑定class样式

如果v-bind中class后是一个对象的话,键代表添加的class的名称,value值代表一个布尔值,用来控制这个class属性的有无。
所以我们就可以这样:





效果

如何使用Vue实现todolist

在输入框中填写item,点击回车完成添加列表并显示同时清空input框内容

用到的知识:

如何使用Vue实现todolist

监听回车

如何使用Vue实现todolist

表单控件监听





点击内容进行状态转换

在li标签上绑定一个click事件,点击时修改isFinished

//添加代码
 
    {{item.label}}
 

methods: {
 finish (item) {
    item.isFinished = !item.isFinished
  }
}

这样一个简单的todolist的基本功能已经完成。

如何使用Vue实现todolist

动图效果

小彩蛋:linux下制作GIF动图

上网查找了很多办法,很多不适合linux平台,发现这个办法不错:

下载SimpleScreenRecoder软件:

三条命令:

sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
sudo apt-get update
sudo apt-get install simplescreenrecorder

安装好后你可以选择录制区域

如何使用Vue实现todolist

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用Vue实现todolist”这篇文章对大家有帮助,同时也希望大家多多支持创新互联成都网站设计公司,关注创新互联成都网站设计公司行业资讯频道,更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章名称:如何使用Vue实现todolist-创新互联
路径分享:http://cdkjz.cn/article/coggdj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220