1.什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。
2. vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。 vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件
3.vue组件的三个组成部分
每个 .vue 组件都由 3 部分构成,分别是:
template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
3.1 template
vue 规定:每个组件对应的模板结构,需要定义到 节点中。
<template>
<!-- 当前组件的DOM结构,需要定义到template标签的内部-->
</template>
注意:
template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素 template 中只能包含唯一的根节点
3.2 script
vue 规定:开发者可以在<script>节点中封装组件的JavaScript业务逻辑。
vue 组件中的 data 必须是函数
vue 规定:.vue 组件中的 data 必须是一个函数,不能直接指向一个数据对象。
3.3 style
vue 规定:组件内的<style>节点是可选的,开发者在<style>节点编写样式美化当前组件的UI结构。
<script>节点的基本结构如下:
让style 中支持 less 语法
在<style>标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式: