组件化应用构建
啥意思？就是一种思想，化大为小。一个大问题，我们可以分成几个小问题。小问题解决了，大问题就间接解决了。
我们的任务是做个界面，界面分成几个小的地方，小地方搞定，即界面搞定。
这里VUE把这个小地方叫 “组件”。Component。当然也有其他的概念，比如Template模板，几种概念杂糅到一起，总之就是大化小的思想。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05_VUE3_Study_组件化应用构建</title>
<meta charset="utf-8">
<meta author="Daniel_shi">
</head>
<body>
<div id="app">
<ul>
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
</ul>
</div>
</body>
</html>
<script src="vue.global.min.js"></script>
<script type="text/javascript">
// 配置
var appConfig = {
data(){
},
};
// 创建对象
var app = Vue.createApp(appConfig);
// 模板名称
var componentName = "todo-item";
// 模板配置
var componentConfig = {
template:'<li style="border:2px solid green">列表内容</li>'
}
// 定义组件
app.component(componentName,componentConfig);
// 挂到DOM元素上
app.mount("#app");
</script>
大体就是新增了一个component，然后配置它的名字，和配置项，这里我的配置项就使用了template，用字符串拼接一个html标签。
模板More
现在就是继续添加component的配置了，让它功能更多，
目前就说一个props项，它是一个数组的配置，把你需要的变量名用字符串放进去，然后在template里面使用，类似于一个占位符的效果。然后在DOM中，用之前学过的v-bind:变量=“真实的数据”。
用法如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05_VUE3_Study_组件化应用构建</title>
<meta charset="utf-8">
<meta author="Daniel_shi">
</head>
<body>
<div id="app">
<ul>
<todo-item v-for="book in books" v-bind:book="book"></todo-item>
</ul>
</div>
</body>
</html>
<script src="vue.global.min.js"></script>
<script type="text/javascript">
// 配置
var appConfig = {
data(){
return{
books:[
{ id:1, name:"《鹿鼎记》", author:"金庸"},
{ id:2, name:"《假如给我三天光明》", author:"海伦·凯勒"},
{ id:3, name:"《安徒生童话》", author:"安徒生"},
]
}
},
};
// 创建对象
var app = Vue.createApp(appConfig);
// 模板名称
var componentName = "todo-item";
// 模板配置
var componentConfig = {
props:['book'],
template:'<li style="border:2px solid green">{{ book.name }} - {{ book.author }}</li>'
}
// 定义组件
app.component(componentName,componentConfig);
// 挂到DOM元素上
app.mount("#app");
</script>
当然官方的介绍案例里还有个 v-bind:key ,绑定一个key。这个是干嘛的？？目前看来你不加也没事。
只能说这是一个优化的方式。置于怎么优化，用到再说。如果你想加，就用id来吧。
<todo-item v-for="book in books" v-bind:book="book" v-bind:key="book.id"></todo-item>
效果一样的。
不过这个key要用唯一键，唯一标识符。maybe？who know
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
