点击提交可增加li，点击li可删除当前li
<!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" :index="index" @delete="handleDelete"><!--监听delete，当delete触发之后执行父组件下面的handleDelete事件--> </todo-item> <!--将item，index从父组件(id为root的div)传递到子组件(li)用属性绑定--> <!--将item传到全局组件里面才能使用--> </ul> <zujian></zujian> </div> <script> Vue.component('todo-item',{ //定义名为todo-list的全局组件 props:['content','index'], template:'<li @click="handleClick">{{content}}{{index}}</li>', methods:{ //组件也是实例 handleClick:function(){ this.$emit('delete',this.index) //点击item之后触发emit事件里面的delete事件值为index， } } }) var zujian={ //定义名为zujian的局部组件，并且必须在new Vue里面声明（28行）。 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里面之后将其初始为空 }, handleDelete:function(index){ this.list.splice(index,1) } } }) </script> </body> </html>
