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: 

最后

以上就是无私薯片为你收集整理的vue实现todo应用总结的全部内容，希望文章能够帮你解决vue实现todo应用总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。