Vue2.0开发之——Vue组件-组件的基本使用(31)
一 概述
- Vue组件—组件化开发
- Vue组件—组件的三个组成部分
- Vue组件—示例
二 Vue组件—组件化开发
2.1 什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。
2.2 vue 中的组件化开发
- vue 是一个支持组件化开发的前端框架。
- vue 中规定:组件的后缀名是.vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
三 Vue组件—组件的三个组成部分
每个 .vue 组件都由 3 部分构成,分别是:
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
3.1 template
vue 规定:每个组件对应的模板结构,需要定义到<template> 节点中
1 | <template> |
主意:
- template是vue提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的DOM元素
- template中只能包含唯一的根节点
3.2 script
vue 规定:开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑
<script > 节点的基本结构如下
1 | <script> |
.vue 组件中的 data 必须是函数
vue 规定:.vue 组件中的 data 必须是一个函数,不能直接指向一个数据对象。
因此在组件中定义 data 数据节点时,下面的方式是错误的
1 | data:{ //组件中,不能直接让data指向一个数据对象(会报错) |
会导致多个组件实例共用同一份数据的问题,请参考官方给出的示例:
https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数
3.3 style
vue 规定:组件内的 <style> 节点是可选的,开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构
<script > 节点的基本结构如下:
1 | <style> |
让 style 中支持 less 语法
在 <style> 标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式
1 | <sytle lang="less"> |
三 Vue组件—示例
3.1 template
1 | <template> |
3.2 script
1 | <script> |
3.3 style
1 | <style lang="less"> |