定义全局组件：必须在构建Vue实例之前就将需要的组件注册进去
局部组件需在vue实例中进行注册
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<!-- v-model实现数据双向绑定 -->
<button v-on:click="handleBtnClick">提交</button>
<!--v-on给button绑定click事件 -->
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- 标签指令v-for可以循环数据，list为data里的list，item为每一项的内容 -->
<todo-item v-bind:content="item" v-for="item in list">
<!-- 通过list决定循环输出多少个todo-item组件，list每一项通过v-bind语法借助content变量传递给组件 -->
</todo-item>
</ul>
</div>
<script>
//注册全局组件TodoItem
Vue.component("TodoItem", {
props: ['content'],
template: "<li>{{content}}</li>"
})
//局部组件
// var TodoItem = {
// props: ['content'], //props定义外部传递数据
// template: "<li>{{content}}</li>"
// }
// vue实例
var app = new Vue({
el: '#app',
// 局部组件注册
//components: {
// TodoItem: TodoItem
// },
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function () {
this.list.push(this.inputValue) //获取data里的inputValue，放入list数组
this.inputValue = '' //清除input框里的内容
}
}
})
</script>
</body>
</html>
