Todo List基础组件 我们在components目录下新建list.vue、list-item.vue2个文件,作为基础组件,list.vue是每个分组列表、list-item.vue是列表里面的每个任务。 list.vue的html代码 <div id="list" class="clearfix"> <div class="list-group" v-for="(item, in
<div>{{ msg }}</div> </template> <script> export default { data() { return { msg: 'Hello from MyComponent!' } } } </script> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Vue.js项目示例TodoList TodoList 是一个很好的实践项目,可以帮助你理解 Vue.js 的基本用法和...
-- 作事件总线示例:去掉父传递子,子传递孙的 示例,改为事件总线操作: :onChangeTodosOfDoneInfo="onChangeTodosOfDoneInfo" :deleteTodosById="deleteTodosById" --> </ul> </template> <script> import ToItem from './ToItem.vue'; export default { name: 'ToList', mixins...
这里将保存事件的数组放到App.vue文件中,转为父子组件传值方式,即组件MyHeader传输入的待办事件给父组件App,App再传给子组件MyList App.vue文件修改为 <template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"/><!--传递方法 --> <MyList :...
(1). MyList.vue组件 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <template><ulclass="todo-main"><transition-group name="todo"appear><MyItem v-for="todoObj in todos":key="todoObj.id":todo="todoObj"/></transition-group></ul></template><script>importMyItemfrom"./MyItem"export...
template:模板,即网页内容(html) style: 渲染样式,即css 二、实现todolist 先看下目录结构,主要用到TodoList跟TodoItem两个组件 然后依次看各个文件的代码 index.html 没有变更,还是绑定id="app" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
</footer> </template> 4.3 添加任务 绑定enter 键盘事件: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <input @keyup.enter="addTodo" class="new-todo" placeholder="请输入" autofocus> 代码语言:javascript 代码运行次数:0 运行 AI代码解释 new Vue({ el:'#todoapp', data:{ // list_data:...
2).在views里面增加todolist内容 在上篇里面我们只是让views显示hello world 。现在我们要让它显示整个表单和tasks里面的内容。 这里我们从Task模型里面读取所有的tasks(我们已经admin后台插入了几条任务数据了)。然后把tasks和form都传到我们的tasks/index.html里面进行渲染。
<template><divid="root"><divclass="todo-container"><divclass="todo-wrap"><ToListTop:addTodoInfos="addTodoInfos"/><!-- :addTodoInfos="addTodoInfos" 跨组件传递方法并符合数据对象 --><ToList:todos="todos":onChangeTodosOfDoneInfo="onChangeTodosOfDoneInfo":deleteTodosById="deleteTodosById"/...
HTML复制 <divclass="templateWrapper"ng-repeat="toDoItem in todos"><divclass="templateContainer"><inputclass="templateTitle"ng-class="{crossedOut: toDoItem.done}"type="text"ng-text-change="changeToDoText(toDoItem)"ng-model="toDoItem.text"/><!-- More list item HTML elements --></div><...