Vue的todolist示例

怼烎@ 2022-12-05 04:58 164阅读 0赞

下面基于Vue写的Todolist示例

涉及到Vue的知识点有

*  创建组件和组件的使用
 *  单文件组件
 *  子组件
 *  自定义组件使用v-modal
 *  循环指令v-for
 *  条件指令v-if
 *  子组件向父组件通信

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhMzkwNDgxOTc4_size_16_color_FFFFFF_t_70_pic_center]

## 主页 App.vue ##

<template>
    	<div id="app">
    		<h1>My Todo App!</h1>
    		<TodoList/>
    	</div>
    </template>
    
    <script>
    import TodoList from './components/TodoList.vue'
    
    export default { 
    	components: { 
    		TodoList
    	}
    }
    </script>
    
    <style lang="scss">
    @import './variables.scss';
    
    *, *::before, *::after { 
    	box-sizing: border-box;
    }
    
    #app { 
    	max-width: 400px;
    	margin: 0 auto;
    	line-height: 1.4;
    	font-family: 'Avenir', Helvetica, Arial, sans-serif;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    	color: $vue-blue;
    }
    
    h1 { 
    	text-align: center;
    }
    </style>

## 单文件组件TodoList.vue ##

<template>
    	<div>
    		<BaseInputText 
    			v-model="newTodoText"
    			placeholder="New todo"
    			@keydown.enter="addTodo"
    		/>
    		<ul v-if="todos.length">
    			<TodoListItem
    				v-for="todo in todos"
    				:key="todo.id"
    				:todo="todo"
    				@remove="removeTodo"
    			/>
    		</ul>
    		<p v-else>
    			Nothing left in the list. Add a new todo in the input above.
    		</p>
    	</div>
    </template>
    
    <script>
    import BaseInputText from './BaseInputText.vue'
    import TodoListItem from './TodoListItem.vue'
    
    let nextTodoId = 1
    
    export default { 
    	components: { 
    		BaseInputText, TodoListItem
    	},
      data () { 
        return { 
    			newTodoText: '',
          todos: [
    				{ 
    					id: nextTodoId++,
    					text: 'Learn Vue'
    				},
    				{ 
    					id: nextTodoId++,
    					text: 'Learn about single-file components'
    				},
    				{ 
    					id: nextTodoId++,
    					text: 'Fall in love'
    				}
    			]
        }
      },
    	methods: { 
    		addTodo () { 
    			const trimmedText = this.newTodoText.trim()
    			if (trimmedText) { 
    				this.todos.push({ 
    					id: nextTodoId++,
    					text: trimmedText
    				})
    				this.newTodoText = ''
    			}
    		},
    		removeTodo (idToRemove) { 
    			this.todos = this.todos.filter(todo => { 
    				return todo.id !== idToRemove
    			})
    		}
    	}
    }
    </script>

## 输入框子组件 BaseInputText.vue ##

<template>
      <input
        type="text"
        class="input"
        :value="value"
        v-on="listeners"
      >
    </template>
    
    <script>
    export default { 
      props: { 
        value: { 
          type: String,
          default: '',
        }
      },
      computed: { 
        listeners () { 
          return { 
            // Pass all component listeners directly to input
            ...this.$listeners,
            // Override input listener to work with v-model
            input: event => this.$emit('input', event.target.value)
          }
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    @import '../variables.scss';
    
    .input { 
      width: 100%;
      padding: 8px 10px;
      border: 1px solid $vue-blue;
    }
    </style>

## 列表子组件 TodoListItem.vue ##

<template>
      <li>
        { {  todo.text }}
        <button @click="$emit('remove', todo.id)">
          X
        </button>
      </li>
    </template>
    
    <script>
    export default { 
      props: { 
        todo: { 
          type: Object,
          required: true
        }
      }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhMzkwNDgxOTc4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a5f791f8d3d945559b488b753203bd78.png