全局 组件、局部组件
// Vue.component(‘todo-list‘,{
// template:‘<li >item</li>‘
// }); //全局
// var todoitem={
// template:‘<li >item</li>‘
// } //局部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="/vuejs/vue.js"></script> </head> <body> <div id="app"> <input v-model="inputvalue"/> <button @click=‘handlesubmit‘>提交</button> <!-- <ul> <li v-for="(item, index) of list" :key="index">{{item}}</li> </ul> --> <ul> <!-- <li >{{item}}</li> --> <todo-list v-for="(item, index) of list" :key="index" :content=‘item‘> </todo-list> </ul> </div> <script> // Vue.component(‘todo-list‘,{ // template:‘<li >item</li>‘ // }); //全局 // var todoitem={ // template:‘<li >item</li>‘ // } //局部
Vue.component(
‘todo-list‘,{
props:[‘content‘],
template:‘<li @click="handleclick" >{{content}}</li>‘,
methods: {
handleclick:function(){
alert(12)
}
},
},
new Vue({ el:‘#app‘, // components:{ // ‘todo-list‘:todoitem // }, data:{ inputvalue:‘123‘, list:[] }, methods: { handlesubmit:function() { this.list.push(this.inputvalue); this.inputvalue=‘‘ } }, }); </script> </body> </html>
原文：https://www.cnblogs.com/laopo/p/11073196.html