Vue.js实现的一个简单的 todo list 的demo

最新推荐文章于 2024-06-25 11:16:05 发布

lixiuxiu2017

最新推荐文章于 2024-06-25 11:16:05 发布

阅读量1.5k

点赞数

分类专栏： VueJs

本文链接：https://blog.csdn.net/lixiuxiu2017/article/details/81036787

版权

VueJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注意啦！！！！学习本例demo的前提是你已经熟悉了vue语法

该demo用到了vue中的组件思想和各种指令，比如v-for、v-bind、v-on等等

该demo需要注意的地方有：

①任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域，为了把迭代数据传递到组件里，我们要用 props选项

②对于Vue2.2.0+的版本，当在组件中使用 v-for 时，必须同时使用key 属性。

③关联组件时可以使用 is="todo-item" 属性，这种做法在使用 DOM 模板时是十分必要的，虽然实现的效果与使用 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。

④不自动将 todo.title 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合

下面就是 todo-list 的完整代码：

index.html文件：

index.js文件：

//创建一个组件，包括组件名称、HTML模板、自定义属性

Vue.component("todo-list",{
//将 Remove按钮用实例方法$emit()绑定 remove事件
template:`<li> {{ title }} <button @click="$emit('remove')">Remove</button></li>`,
//用props字段将绑定数据传递到组件中，因为组件有自己的作用域
props: ["title"]
});
// 创建一个Vue实例
var vm = new Vue({
el: "#v-for-component",
data: {
newTodoText:"",
todos:[
{id:1,title:"sweep the floor"},
{id:2,title:"do the dishes"},
{id:3,title:"read the book"}
],
nextTodoId:4
},
methods:{
// 在todos数组中追加新的元素，同时依赖该数组的DOM列表也会自动响应添加新的项
addNewTodo: function(){
this.todos.push({
id:this.nextTodoId++, //让序号自动递增
title:this.newTodoText
});
this.newTodoText=""; //将文本框输入的文本清空
}
}

});

初始渲染效果：