# 前端培训

# HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

下面是一个标准的HTML页面的结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="example.css" rel="stylesheet">
</head>
<body>
    <div></div>
    <script src="example.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

# DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

# 元素

HTML元素列表。

# CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

# CSSOM

CSSOM(CSS Object Model) 是一组允许用JavaScript操纵CSS的API。它是继DOM和HTML API之后，又一个操纵CSS的接口，从而能够动态地读取和修改CSS样式。

# 选择器

选择器是用来选择要在DOM中哪些元素上使用CSS的规则。其中选择器包括ID选择器、类选择器、伪类选择器。下面是一个ID选择器的例子：

#myId {
  width: 100px;
  height: 100px;
}

1
2
3
4

其中，ID选择器的权重大于类选择器，一般开发中常用的是类选择器，避免因为权重问题造成CSS覆盖。下图详细说明了CSS规则：

# 布局

CSS布局允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。布局包括浮动、定位、flex布局、grid布局、媒体查询等。

# 动画

CSS动画使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。下面是一个动画的例子：

animation: 3s linear 1s infinite alternate slidein;
@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

1
2
3
4
5

# JavaScript

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。这里推荐系统性的学习MDN上的教学以及阮一峰老师写的ES6入门。

总的来说，JS包含以下部分：

标准对象

标准的内置对象例如 Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap , WeakSet 以及其他对象

表达式和运算符

运算符的作用：instanceof, typeof, new, this，运算符优先级，以及其他运算符。

语句和声明

了解 do-while, for-in, for-of, try-catch, let, var, const, if-else, switch 以及其他语句和关键字的作用。

函数

学习如何使用 JavaScript 函数来开发你的应用。

# Vue

学习Vue最好的途径就是官网。它的优点包括：

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快：相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

# Vue生命周期

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：当data变化时，会触发beforeUpdate和updated方法销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

# 模板文件

项目开发中，默认选择使用模板文件开发，也就是采用.vue后缀的模板文件。模板文件格式为：

<template>
    <div id="myTemplate">
      <span v-if="isSpan">这是span</span>
      <div v-show="isDiv">这是div</div>
      <div v-for="item in iterator" :key="item.id">
          <span @click="clickEvent">{{item.name}}</span>
      </div>
      <div @click="getDom" ref="dom"></div>
    </div>
</template>


<script>
export default {
    name: 'myTemplate',
    data() {
        return {
            isSpan: false,
            isDiv: true,
            iterator: [
                {
                    name: 'zqy1',
                    id: 1,
                },
                {
                    name: 'zqy2',
                    id: 2,
                },
                {
                    name: 'zqy3',
                    id: 3,
                },
            ],
        };
    },
    props: {}, // 父子组件传参
    computed: {}, // 计算属性
    watch: {
        obj: {
            handler(newName, oldName) {
              console.log('obj.a changed');
            },
            immediate: true, // 组件加载立即触发回调函数执行
            deep: true // 深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器
        }
    }, // 监听属性变化
    methods: {
        clickEvent() {}, // 点击事件
        getDom() {
            const dom = this.$refs.dom;
        },
    },
    beforeCreate() {}, // 以下均为生命周期钩子函数
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    //...
};
</script>


<style lang="scss">
    #myTemplate { /*css命名空间，防止覆盖*/
        .classRule {}
    }
</style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

这里推荐使用WebStrom进行项目开发，因为2019版之后，对vue支持语法高亮，也内嵌了vue模板，对开发十分友好。