写一个简单的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项目目录就可以快速构建好了。
目录如下:
![](http://upload-images.jianshu.io/upload_images/1281633-17ef5c92bc21b995.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/242/format/webp)
目录
二,完成一个简单的TodoList的
接下来就看一下webpack.base.conf文件,这是核心文件,必须执行的文件,这里可以看到入口和输出,这就是入口和输出路径,在入口处看到了./src/main.js, Main.js .v ue ve,并加载了.v .v App.vue,的确列表.v .v .v .v .v App.vue的
简单的TodoList的我们可以完成这几个功能:
1、显示todo列表
2、判断列表任务完成状态,若完成则添加相应的样式
3、在输入框中动态添加todo项目,点击回车在列表中显示
4、点击相应的项目转换状态
- 首先我们完成显示列表的功能:
<template> <div id="app"> <input/> <ul> <li v-for="item in items"> {{item.label}} </li> </ul> </div> </template> <script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ] } } } </script>
![](http://upload-images.jianshu.io/upload_images/1281633-14938a9f6ac9feb3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/190/format/webp)
效果
export后面的对象,作为作为new vue()的参数,来创建一个Vue的组件,并导出。
-
判断任务的完成状态,完成则添加文字修饰样式
官方文档中我们可以看到:
绑定类样式如果V-结合中类后是一个对象的话,键代表添加的类的名称,值值代表一个布尔值,用来控制这个类属性的有无。
所以我们就可以这样:
<template> <div id="app"> <input/> <ul> <li v-for="item in items" v-bind:class={finished:item.isFinished}> {{item.label}} </li> </ul> </div> </template> <script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ] } } } </script> <style> .finished { text-decoration: line-through; } </style>
![](http://upload-images.jianshu.io/upload_images/1281633-47c56d76398bd83f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/196/format/webp)
效果
-
在输入框中填写项,回车点击完成添加列表并显示同时清空输入框内容
用到的知识:
监听回车
表单控件监听
<template> <div id="app"> <input v-on:keyup.enter="addNewItem" v-model="newItem"/> <ul> <li v-for="item in items" v-bind:class={finished:item.isFinished}> {{item.label}} </li> </ul> </div> </template> <script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ], newItem: '' } }, methods: { addNewItem () { this.items.push({label: this.newItem,isFinished: false}) this.newItem = '' //清空输入框 } } } </script> <style> .finished { text-decoration: line-through; } </style>
- 进行内容点击状态转换
在李标签上绑定一个单击事件,点击时修改isFinished
//添加代码 <li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)"> {{item.label}} </li> methods: { finish (item) { item.isFinished = !item.isFinished } }
这样一个简单的TodoList的的基本功能已经完成。
![](http://upload-images.jianshu.io/upload_images/1281633-9c680802b7445a73.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/200/format/webp)
动图效果
.