<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>todolist功能开发、组件拆分</title> <script src="vue.js"></script> </head> <body> <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="sub">提交</button> </div> <ul> <!--原始写法--> <li v-for="(item,index) in list"> {{item}} </li> <!--使用全局组件,通过使用:content来进行传值--> <todo-item v-for="(item,index) in list" :key="index" :content="item"></todo-item> <!--使用局部组件--> <todo-tem v-for="(item,index) in list" :content="item"></todo-tem> </ul> </div> <script> //定义一个全局组件(使用props进行接值) Vue.component('todo-item',{ props:['content'], template: '<li>{{content}}</li>' }); //定义一个局部组件(需要在vue实例中关联使用components) var todoItem = { props:['content'], template:"<li>{{content}}</li>" }; //vue实例 new Vue({ el:"#root", components:{ 'todo-tem':todoItem }, data:{ inputValue:'', list:[] }, methods:{ sub:function () { //加入数组 this.list.push(this.inputValue); //恢复文本框内容为空 this.inputValue = ''; } } }); </script> </body> </html>