十分钟用Vue.js手写一个任务清单

vue官方文档

一、安装node

选择自己对应的系统下载链接

在git里面查看，或者cmd查看 由于npm在国内较慢，建议使用cnpm($ npm install-g cnpm--registry=https://registry.npm.taobao.org)

二、安装脚手架工具vue-cli

install -g 是全局安装

三、初始化

$ vue init  打包工具(webpack)  项目名称(vue-base)

初始化成功，会在当前E盘的vue文件夹下生成一个项目文件夹（名字就是你init时候的名字）

进入项目文件夹，install所依赖的插件（项目文件下package.json里面的依赖）

$ npm run dev  本地8080端口监听

四、开始工作

把hello.vue内容替换我们想要的内容

一个input输入框+一个按钮 下面展示的li

五、思路整理

1>input里面输入内容，点击添加的时候，下方列表显示内容

2>下方列表点击背景置灰加删除线代表已完成，可以来回切换

items数组有2个对象，每个对象里面有两个属性，一个是显示的内容title，一个是控制是不是完成，完成及时true,未完成就是false

然后遍历数组，得到每一个item，就是每个对象，给给个li绑定一个class，初始都是false没有完成，效果如下：

我们想点击的时候变成这个样子

那么我们就需要一个点击事件控制

每次点击的时候取反，最开始是没有完成，点击就会完成，再点击又变未完成

效果基本完成，这些假的，我们想实现的是，在input框中输入什么内容点击添加下方显示什么内容

那么我们第一清空刚刚数组里面的内容，items是空数组，第二数据绑定，在input里面绑定数据

最好，在添加按钮添加一个方法

用户在input框中输入内容并且点击添加按钮的时候，我们向items数组添加内容，this.content就是用户输入的内容。