vue实现todo应用总结

慕课网上的vue+webpack实现的TODO列表的开发，本人采用vue-cli方式进行项目初始化，后面可以修改webpack配置和安装响应的包等．用了部分es6语法．

１．项目创建

使用vue-cli创建(ps：vue-cli: 2.9.2版本)：

$npm init  webpack   vuetodo   

进入项目目录：

$ cd　vuetodo

下载依赖：

$ npm install

运行项目：

$ npm run dev

２．在webpack.base.config.js　添加．styl　文件的处理

{
         test: /\.styl$/,
         loader: 'style-loader!css-loader!stylus-loader'
      },

３．methods :{   } 注意methods有ｓ

  　data() {   return  { }  } 

       props:  {  }

4.   stylus文件引入： stylus是css预处理器，比较小众，一般推荐使用SCSS　或者　less 或直接用css

要独立安装stylus, stylus-loader

$ npm install stylus stylus-loader --save-dev

需要引入的地方用 :     import './***/**.styl'  

<style   lang="stylus"  scoped>  scoped表示只应用于此组件

注意styl的格式，自己引入的时候出错了，上一篇博客：　　出错博客　　

５．Chrome 浏览器上的vue 插件，可以方便查看项目的vue组件结构和数据内容．（浏览器上直接安装）

７．数组接口：

array.filter(function(currentValue,Index,arr),   thisValue)   过滤出得到新数组，不改变原数组．

array.findIndex(function( currentValue, Inde))  遍历数组的每个元素，找到符合的索引值

array.splice( index, howmany , item1,...,itemm) 两个参数时删除从index处删除howmany个项目；三个参数时是增加项目．

                                                                                                    改变原来数组

array.unshift(      { id: id++,   complete: true,  content: e.target.value.trim() }    ) 把内容插入到数组首位．

８．data() { }  本组件自己的数据

 　   props :{  }  要用到父组件的数据时，在这里说明一下．然后就可以用了

props: {
		todo:{
			type:Object,
			require:true
		}
	},

９．事件传递

子组件的时间可以自定义下事件名字，然后触发时传给子组件进行处理，传递方法：

子组件：eg:　 item.vue里　自定义的事件为del，提交del事件到父组件

method: {
		deleteTodo() {
			this.emit('del',this.todo.id)
		}
	}

父组件要在标签里写上　<item　@del = "handleDel"   /item>　eg: todo.vue里，当遇到del事件时调用handelDel()函数处理．

<item　@del = "deleteTodo"   /item>

再写处理方法：

deleteTodo(id){
			this.todos.splice(this.todos.findIndex(todo => todo.id === id),1)  // delete id item
		},

１０．项目地址：

GitHub: