vue模块化实现列表添加

在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标签外面。如果使用局部组件注册 就识别不到了