todolist实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>vue练习</title> 6 7 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="inputvalue"> 13 <button @click="clickbutton">提交</button> 14 <ul> 15 <li v-for="(item,index) of list" :key="index">{{item}}</li> 16 </ul> 17 18 </div> 19 </body> 20 <script type="text/javascript"> 21 var app=new Vue({ 22 el:'#app', 23 data:{ 24 inputvalue:'', 25 list:[] 26 27 }, 28 methods:{ 29 clickbutton:function(){ 30 this.list.push(this.inputvalue); 31 this.inputvalue=''; 32 } 33 } 34 }) 35 </script> 36 </html>
全局组件：
//全局组件 Vue.component('todo-item', { template:'<li><item></li>' })
<ul> <todo-item></todo-item> </ul>
局部组件：
var TodoItem={ template:'<li>item</li>' } var app=new Vue({ el:'#app', components:{ 'todo-item':TodoItem }, data:{ inputvalue:'', list:[] }, methods:{ clickbutton:function(){ this.list.push(this.inputvalue); this.inputvalue=''; } } })
<ul> <todo-item></todo-item> </ul>
props：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue练习</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="inputvalue"> <button @click="clickbutton">提交</button> <ul> <todo-item v-for="item in list" v-bind:message="item"> </todo-item> </ul> </div> </body> <script type="text/javascript"> //局部组件 Vue.component('todo-item', { props:['message'], template:'<li>{{message}}</li>' }) var app=new Vue({ el:'#app', data:{ inputvalue:'', list:[] }, methods:{ clickbutton:function(){ this.list.push(this.inputvalue); this.inputvalue=''; } } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <ul> <child v-for="item in list" v-bind:message="item"><child> </ul> </div> <script> Vue.component('child',{ props:["message"], template:"<li>{{message}}</li>" }) new Vue({ el:'#app', data:{ list:['Runoob','Google','Taobao'] } }) </script> </body> </html>