一、安装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就是用户输入的内容。
网友评论