文章目录
- 一、介绍
- 二、根组件 App.vue
一、介绍
组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。
好处:便于维护,利于复用 → 提升开发效率。
组件分类:普通组件、根组件。
根组件:整个应用最上层的组件,包裹所有普通小组件。
比如:下面这个页面,可以把所有的代码都写在一个页面中,但是这样显得代码比较混乱,难易维护。咱们可以按模块进行组件划分
二、根组件 App.vue
根组件介绍
整个应用最上层的组件,包裹所有普通小组件
组件是由三部分构成
- 语法高亮插件
-
一个根组件App.vue,包含的三个部分
-
template:结构 (有且只能一个根元素)
但是Vue3就没有(有且只能一个根元素)这个限制了
-
script: js逻辑
-
style: 样式 (可支持less,需要装包)
<vue可以帮助我们快速生成三部分
-
-
让组件支持less
(1) style标签,lang=“less” 开启less功能
(2) 装包:
yarn add less less-loader -D
或者npm i less less-loader -D
如果想要代码提示,需要写成:<t
在.vue里面写:class=,已经不会自动补全双引号了,我们需要直接使用自动提示功能
<template>
<div class="App">
<div class="box" @click="fn"></div>
</div>
</template>
<script>
// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {
created() {
console.log("我是created");
},
methods: {
fn() {
alert("你好");
},
},
};
</script>
<style lang="less">
/* 让style支持less
1. 给style加上 lang="less"
2. 安装依赖包 less less-loader
yarn add less less-loader -D (开发依赖)
*/
.App {
width: 400px;
height: 400px;
background-color: pink;
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
}
</style>