<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head> <body> <div id="root"> <input v-model="inputValue" /> <button @click="change">提交</button> <ul> <todo-item v-for="(item,index) of list":key="index" :content="item"></todo-item><!--将item传到全局组件里面才能使用--> </ul> <zujian></zujian> </div> <script> Vue.component('todo-item',{ //定义名为todo-list的全局组件 props:['content'], template:'<li>{{content}}</li>' }) var zujian={ //定义名为zujian的局部组件，并且必须在new Vue里面声明。 template:'<div>这是局部组件</div>' } new Vue({ el:"#root", components:{ 'zujian':zujian }, data:{ inputValue:'', list:[] }, methods:{ change:function(){ this.list.push(this.inputValue); this.inputValue='' //将"input”放入list里面之后将其初始为空 } } }) </script> </body> </html>
