慕课网上的vue+webpack实现的TODO列表的开发,本人采用vue-cli方式进行项目初始化,后面可以修改webpack配置和安装响应的包等.用了部分es6语法.
1.项目创建
使用vue-cli创建(ps:vue-cli: 2.9.2版本):
$npm init webpack vuetodo
进入项目目录:
$ cd vuetodo
下载依赖:
$ npm install
运行项目:
$ npm run dev
2.在webpack.base.config.js 添加.styl 文件的处理
{
test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
},
3.methods :{ } 注意methods有s
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的格式,自己引入的时候出错了,上一篇博客: 出错博客
5.Chrome 浏览器上的vue 插件,可以方便查看项目的vue组件结构和数据内容.(浏览器上直接安装)
7.数组接口:
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() } ) 把内容插入到数组首位.
8.data() { } 本组件自己的数据
props :{ } 要用到父组件的数据时,在这里说明一下.然后就可以用了
props: {
todo:{
type:Object,
require:true
}
},
9.事件传递
子组件的时间可以自定义下事件名字,然后触发时传给子组件进行处理,传递方法:
子组件: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
},
10.项目地址:
GitHub: