一、组件化的理解
女孩子版：女孩子出门麻烦吧，需要选择衣服，鞋子，包包…而这些衣服鞋子什么的可以看作组件。
男孩子版：做一个项目很难吧，要实现很多功能吧，要加很多班吧，加班要点外卖吧，就美团外卖首页的轮播图，搜索框什么的的都可以看作组件。
二、使用组件
在Vue-起步（2）里面写了一个简单的TodoList，现在通过组件化的形式进行修改
全局组件：
局部组件：
三、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="./vue.js"></script><!-- 引入下载的vue.js库 -->
</head>
<body>
<div id="app">
<input type="text" v-model="inputVaule" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!-- item指数组list的每一项 -->
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-for="item in list" v-bind:content="item"></todo-item>
<!-- 组件的名称叫TodoItem,但实际用的时候变成小写来用了（todo-item）-->
<!-- 这段话的意思是我们在循环list的时候，
把他的每一项item用v-bind的形式通过content变量传给组件todo-item，
todo-item用props接收 -->
</ul>
</div>
<script>
/* Vue.component()是vue创建全局组件的方法
组件的名称叫TodoItem，组件内容放在template里面
*/
/* Vue.component("TodoItem", {
props: ['content'],
template: "<li>{{ content}}</li>"
}) */
/* 定义局部组件 */
var TodoItem = {
props: ['content'],
template: "<li>{{ content}}</li>"
}
/* 局部组需要注册到vue实例里面 */
var app = new Vue({
el: "#app",
/*局部组件注册 */
components: {
TodoItem: TodoItem /* 把TodoItem注册到vue实例中,注册后还是叫TodoItem */
},
data: {
list: ["春","夏"],
inputVaule: ""
},
methods: {
handleBtnClick: function() {
this.list.push(this.inputVaule)
this.inputVaule = ""
}
}
})
</script>
</body>
</html>
1242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
