青训营打卡
这是我参与「第四届青训营 」笔记创作活动的第2天
概念明确
- 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目开发。
- vue 中的组件化开发
vue 是支持组件化开发的前端框架。
vue 中规定：组件后缀名是.vue。因此所有的.vue文件都可以被称为组件。
- vue 组件的三个组成部分
- template =》 组件的模板结构
- script =》 组件的 JavaScript 行为
- style =》 组件的样式
这里注意
- .vue组件中的 data 必须是一个函数，函数的返回值就是定义数据。
- 在template中只能由一个根元素，若想有多个块级元素div，可以用一个大的div包裹住多个次级div。因此以后开发时最好先创建一个div元素，在这个div元素内创建其他元素。
- 在style中想启用less语法，需要在style标签中加入属性：
lang="less"
什么是html
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。
剖析html元素
- html元素的结构
- 开始标签
- 结束标签
- 内容
- html元素的分类
- 块级元素
- 内联元素
- 空元素：只有一个标签的元素，通常用于嵌入一些东西
属性
用于修饰标签，存放在开始标签中
- 一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号“ ”引起来。（单双引号都可以，风格不同，但是不能混用）
- 布尔属性：没有属性值的属性
html文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的测试站点</title>
</head>
<body>
<p>这是我的页面</p>
</body>
</html>
- html中的多个空白字符只会被翻译成一个
- html中的特殊字符需要转义，&号开始；号结束，中间是特殊编码
- html注释格式为
head标签
不会被浏览器显示，作用是保存一些元数据
- title标签用于在 head 标签内添加标题（注意不要和 h1 标签混淆，后者是用来给 body 标签添加标题的）
- meta元素中包括name，content，charset等属性
- 网页添加自定义图标favicon的方式是用link元素选取处在与网站索引页面相同目录的.ico格式图片（不建议但可以是.png或.gif，.ico格式对古老的浏览器更有友好）
- link元素和script元素用于在html中应用css和js，这里详细介绍两者
link
link 元素经常位于文档的头部。这个 link 元素有 2 个属性，rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
script
script 元素没必要非要放在文档的 head 中，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。实际上还有很多方法可用于处理加载 JavaScript 的问题，但这是现代浏览器中最可靠的一种方法。
<script src="my-js-file.js" defer></script>
\
