简单了解前端页面开发
# HTML
HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言: HyperText Markup Language。HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页
HTML 语言中的除了标签就是标签中的属性，其中标签中的属性的值需要加双引号，不要和以后学的各种其他技术搞混
<!--文档类型-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 描述网页的信息-->
<meta charset="UTF-8">
<meta name="text">
<link rel="" href="css样式的地址">
<title>这里写标题</title>
</head>
<body>
<!--标签分行内元素和块元素，行内元素指多个元素排在一行，块元素独占一行-->
<h1>标题标签</h1>
<p>段落标签，块标签</p>
<img src="图片地址" alt="">
<a href="链接地址" target="_blank"></a>
<!--链表-->
<ol><li></li></ol>
<ul><li></li></ul>
<!--表格，tr表示行，td表示块-->
<table>
<tr>
<td></td>
</tr>
</table>
<!--一个网站有以下主要的元素-->
<header>头部元素</header>
<nav>导航类元素</nav>
<footer>底部元素</footer>
<!--表单，选择是post提交还是get提交-->
<form method="post" action="提交地址">
<!-- 必须要有名字，不然后台不知道传入了什么-->
<input type="text" name="名字">
<input type="password" name="密码">
<!-- 按钮用来提交-->
<input type="button">
</form>
<!--每个标签中都可以加入class属性来导入css样式-->
<div class=""></div>
</body>
</html>
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
关于 html 更多的标签：https://www.runoob.com/html/html-tutorial.html
# CSS
CSS（Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css
以上是官方介绍，是不是非常高大上，其实 CSS 就是通过设置各种属性的值来让 HTML 中显示的东西显得炫酷一些，以下是 CSS 实例
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
2
3
4
5
6
7
8
9
10
11
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，CSS 会使用冒号、大括号以及分号
只要让这些值和 HTML 中的设置联系起来，这些配置就可以生效，我们一般会使用外部样式表可以在任何文本编辑器中进行编辑，并以 .css 形式做结尾
在 css 文件中使用 id 和 class 选择器在 HTML 元素中设置 CSS 样式，id 选择器是指每个 HTML 标签都可以设置一个 id 属性，在 css 中使用 id 来唯一确定要修饰的标签
#para1
{
text-align:center;
color:red;
}
2
3
4
5
<div id = "para1">...<div>
class 选择器只对特定的标签生效，下面的代码表示只对指定标签 p 生效，下下面的代码表示所有拥有 center 类的 HTML 元素均为居中
p.center {text-align:center;}
.center {text-align:center;}
2
# JS
JavaScript 才是前端的灵魂，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。为前端添加脚本以让界面变得更加灵动，在 HTML 的 script 标签中添加 js 程序，也可以使用 script 标签中的 src 来引入外部的 .js 文件
<script>
console.log("hello js") // 将内容写入到浏览器的控制台
window.alert(5 + 6); // 页面渲染时弹出警告框
document.getElementById("demo"); // 某个标签定义了 id 属性后，可以在 js 中通过各种方法修改这个标签内容
</script>
2
3
4
5
上面例子中的 JavaScript 语句，会在页面加载时执行。通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数
JS 中可以用 var 来定义一个数据类型：数字，字符串，数组，对象等等
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值，对象中可以有属性与方法
2
3
4
5
JavaScript 语句可以写在函数内，函数指的是一系列操作的集合，函数可以重复引用，引用一个函数 = 调用函数(执行函数内的语句)
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
2
3
# ES6
ES6 是 JS 的一种规范，JS 是 ES6 的一种实现，ES6 规定了以下这些东西
let：定义变量，在 JS 中是以 var 定义变量的。ES6 新增了 let 关键字，两者的区别是 var 定义的是全局变量，而 let 定义的是局部变量。比如在代码块中或者方法中定义两者，在外部 var 可以访问到，但是 let 定义的变量访问不到
{
var a = 1;
let b = 1;
}
a = 2;
b = 2;
2
3
4
5
6
conset：定义常量，更定义变量的关键字差不多，let 与 const 这些关键字定义数组，对象等，甚至可以定义一个函数
const duixiang = {
aa:"ss",
f2() {
return aa
}
}
let aa = function(a) {
return a + 1;
}
2
3
4
5
6
7
8
9
解构赋值：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
let [a, b, c] = [1, 2, 3];
模板字符串：使用 ` （飘号），可以配合 $ 以及大括号取到变量中的值，目标字符串还可以调用方法，也是使用 $ 来调用
<script>
let a = 1
const al = 3.14
function f1() {
return "asdfsafddsa"
}
let str = `${a} + ${al}, hu ${f1()}`
console.log(str)
</script>
2
3
4
5
6
7
8
9
对象拓展运算符：复制对象中的所有可拷贝属性
const a1 = {
a: 111,
b() {
return "a";
}
}
let b1 = {...a1}
console.log(b1.a)
console.log(b1.b())
2
3
4
5
6
7
8
9
箭头函数：类似 lambda，箭头函数是来定义函数的，即一系列操作，基本的语法是复制括号内容，写死右箭头，写方法体部分
function fun(a, b) {
return a + b
}
// 等价于
let c = (a, b) => {a + b}
console.log(c(1, 2))
2
3
4
5
6
模块化开发：其实就是类的相互引用，换了一个高大上的名字，作用是在一个 js 文件中引用另外一个 js 文件内容。写法如下：在被引用的 js 文件中，使用 export 定义对外暴露的方法或者对象，在引用的 js 文件中，使用 import 方法名称 form 文件名称 来引入对象
export function a() { console.log("hello")}
import {a} from "./01.js"
a()
2
3
4
但是 ES6 的语法在 nodojs 中无法直接运行，需要转换为 ES5 的语法
# Vue
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue 让前端开发变的更加简单
每个 Vue 应用都需要通过实例化一个 Vue 来实现，使用小括号后跟一个大括号定义。Vue 构造器中有一个 el 参数，它是 DOM 元素中的 id。这意味着我们接下来的改动全部在被 id 指定的标签内，而外部不受影响
data 参数用于定义属性，methods 用于定义的函数，可以通过 return 来返回函数值。Vue 的属性中间使用逗号隔开，像是定义了一个对象
用于输出对象属性和函数返回值。这使用了 Vue 包装 js 的 dom 操作，在其他地方使用双大括号来取值的行为叫差值表达式
<body>
<script src="vue.min.js"></script>
<div id = "test">
{{method(1)}}
{{message}}
</div>
<script>
var a = 1;
function aa () {
return a;
}
new Vue ({
el:'#test',
data:{message:"hello vue"},
methods:{
method: (a) => console.log("hello")
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
取值：使用 v-bind 取值，可以省略，直接写冒号，一样的效果，v-model 双向绑定，如果作用的值是 value，则 value 可以省略。vue 的指令可以加在 html 标签中做增强
<body>
<script src = "vue.min.js"></script>
<div id = "test">
<input type="text" v-band:value="message">
<input type="text" :value="message">
<input type="text" v-model:value="message">
<input type="text" v-model="message">
</div>
<script>
new Vue ({
el:'#test',
data:{message:"hello vue"}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
v-if 做判断，如果 v-if 中的值为 true，则被修饰的标签可以展示，如果为 false，则不做展示。Vue 还提供了 v-else，如果 v-if 判断为 false，则 v-else 自动设置为 true，反之亦然
v-on 绑定事件，在事件触发时执行一些操作，v-on 可以简写为 @
Vue 有自己的生命周期，在不同的阶段执行不同的方法，created 表示在页面渲染之前发生该动作，mounted 表示在页面完成之后执行该动作
v-for 用于循环变量
<body>
<script src = "vue.min.js"></script>
<div id = "test">
<!-- 判断 -->
<input type="checkbox" v-model = "ok">
<h1 v-if = "ok">ok</h1>
<h1 v-else>no</h1>
<!-- 事件的触发 -->
<input type = "button" v-on:click = "func()">
<input type = "button" @click = "func()">
<!-- 循环 -->
<table>
<tr v-for="(a, index) in userList">
<td>{{index}}</td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
</tr>
</table>
</div>
<script>
new Vue ({
el:'#test',
data:{ ok : true,
userList: [
{ id:1, name: 'lacy'},
{ id:2, name: 'juck'}
] },
methods:{
func() {
console.log("hello")
}
},
created() {},
mounted() {}
})
</script>
</body>
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
组件：vue 提供了自定义标签的功能，让原来没有的标签具有相应的功能
<body>
<script src = "vue.min.js"></script>
<div id = "test">
<abc/>
</div>
<script>
new Vue ({
el:'#test',
data:{
},
components: {
'abc': {
template: '<p>hello abc</p>'
}
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
简单来说，AJAX 负责与后端接口进行交互
在前端开发者工具中，在 Fetch/XHR 里发送的既是 AJAX 请求
在 Vue 中，普通的 AJAX 使用如下。使用 created 方法在页面渲染之前，发送请求，获取数据。但是获取的数据需要赋值，使用 then 方法写脚本，将值赋给已经定义好的 userList，然后就可以使用了
<body>
<script src = "vue.min.js"></script>
<script src= "axios.min.js"></script>
<div id = "test">
<table>
<tr v-for = "user in userList">
<td>{{user.name}}</td>
</tr>
</table>
</div>
<script>
new Vue ({
el:'#test',
data:{
userList: []
},
methods:{
getUserList() {
axios.get('userList.json')
.then(response => {
this.userList = response.data.data.user,
console.log(this.userList)
})
.catch(error => console.log(error.message))
}
},
created() {
this.getUserList()
}
})
</script>
</body>
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
# Node.js
我们以前使用 js 都是在 html 页面中写 js 文件，然后再浏览器打开，使用 nodejs 后，可以免去这个过程，直接执行 js 文件，像脚本一样运行
NPM 是 nodejs 的包管理工具，类似前端的 maven，可以用来快速的生成应该前端项目，也可以用来管理依赖，依赖大多是 js 文件
npm init -y 创建一个标准的前端项目 使用 npm run dev 启动一个前端项目 npm install 依赖名称 下载一个依赖 npm install 该命令直接根据配置下载依赖