在body中添加代码 div部分
<div id="root">
<div>
<input type="text" v-model="todoValue"/>
<button @click="handleBtnClick">提交</button>
</div>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
script部分 也就是vue的部分
<script>
// 全局组件
// Vue.component("TodoItem", {
// props: ['content'],
// template: "<li>{{content}}</li>",
// })
//局部组件
var TodoItem = {
props: ['content'],
template: "<li>{{content}}</li>"
}
var app = new Vue({
el: "#root",
components: {
TodoItem: TodoItem
},
data: {
todoValue: "",
list: []
},
methods: {
handleBtnClick: function() {
this.list.push(this.todoValue)
this.todoValue = ""
}
}
})
</script>
特别说明一下,局部组件的用法,是需要到#root 这个vue中 的components注册定义的组件。上面注释调的部分是全局组件的注册方式。区别在于 局部组件只能在id ='root'的这个div下面使用。比如div标签外面。如果使用局部组件注册 就识别不到了