<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-model input输入双向绑定数据 当用户输入数据,input发生改变时,输入的内容会自动保存到inputValue中 --> <input type="text" v-model="inputValue"> <button @click="handleClick">提交</button> <ul> <todo-item :content="item" v-for="item in list"></todo-item> </ul> </div> </body> <script type="text/javascript"> //全局组件 Vue.component(name, options) // Vue.component('TodoItem', { // props: ['content'], // template: `<li>{{this.content}}</li>` // }) //局部组件 let TodoItem = { props: ['content'], template: `<li>{{this.content}}</li>` } let app = new Vue({ el: '#app', data: { list: [], inputValue: '' }, //局部组件注册 components: { TodoItem }, methods: { handleClick () { this.list.push(this.inputValue) this.inputValue = '' } } }) </script> </html>