vue的组件
1. 概述
- 在vue中，可以将一个组件看作是一个页面。在其中可以引入独立的样式/JS/HTML 进行单独的管理
- 组件可以进行复用
- 组件化的思想体现了分治的思想
- 为了保证组件化相互之间互不干扰，则应该在组件内部，单独定义html/js/css
2. 组件的组织
- 通常一个应用会以一棵嵌套的组件树的形式来组织：
- 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。
3. 全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件的定义</title>
</head>
<body>
<div id="app">
<add-num-com></add-num-com>
<add-num-com></add-num-com>
</div>
<template id="numTem">
<div>
<h1>我是一个组件</h1>
获取数值 {{num}}
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component("addNumCom",{
data() {
return {
num: 100
}
},
template: "#numTem"
})
const app = new Vue({
el: "#app",
})
</script>
</body>
</html>
4. 局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件</title>
</head>
<body>
<div id="app">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<div id="app2">
</div>
<template id="msgTem">
<div>
<h3>我是一个局部组件</h3>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
let msgCom = {
template: "#msgTem"
}
const app = new Vue({
el: "#app",
components:{
msgCom,
}
})
const app2 = new Vue({
el: "#app2",
})
</script>
</body>
</html>
5. 关于组件的知识点
- 为什么使用组件
- 原来用户编辑页面时,需要引入/维护大量的JS/CSS等.如果数量很多,则导致代码结构混乱.所以需要引入组件化思想.
- 前端框架为了更好的解耦,采用了"分治"思想的构建代码.前端向后端代码结构看齐.(微服务框架)
- 组件采用树形结构, 可以将功能小型化.单独维护.
- 组件是一个独立的个体,内部包含HTML/CSS/JS
- 使用组件看做就是一个页面
- 如何理解template属性
- template标签是组件中定义html标记的模板.
- template标签必须有根标签div
- template标签最好定义在body标签内部,写法方便.
- 关于组件使用有什么注意事项
- 组件的使用必须在VUE对象渲染的区域中使用.
- 组件有全局的/有局部的.注意作用域.
- 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
- 组件必须先定义再使用.
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
