[要点整理] 前端开发基础(HTML/CSS/JS/Vue)

東木_叁貳陸伍

已于 2024-09-06 15:02:02 修改

阅读量1.4k

点赞数 23

文章标签： javascript html css

于 2024-09-06 15:01:38 首次发布

本文链接：https://blog.csdn.net/wxy3265/article/details/141960078

版权

序

HTML描述内容，CSS描述样式，JS描述逻辑
官方文档：https://www.w3school.com.cn/index.html

HTML

基础语法

HTML标签结构

<html>
    <head>
        <title>标签</title>
    </head>
    <body>
        内容
    <body>
</html>

HTML语法特点
- 标签不区分大小写
- 属性用单双引号都行
- 语法松散

标签	作用	备注
`<h1>`	标题	`h1` 到 `h6` 级别逐渐降低
`<hr>`	水平线	-
`<b>`	加粗	-
`<a>`	超链接	使用 `herf` 和 `target` 属性配置
`<img>`	图片	使用 `src` 指定图片url
`<audio>`	音频	使用 `src` 指定音频url
`<div>`	分区	一行只能显示一个，无语义，宽度默认父元素的宽度，高度默认内容高度，可以设置宽高
`<span>`	行内容器	一行可以显示多个（组合行内元素）用于标记文本的一部分，无语义，宽度高度均由内容决定，不可以设置宽高
`<p>`	定义段落	浏览器会自动在每个段落前后加一个空行
`<table>`	表格	定义表格整体，可以包裹多个`<tr>`
`<tr>`	表格的行	可以包括多个`<td>`
`<td>`	表格单元格	可以包裹内容
`<th>`	表头单元格	-
`<form>`	表单	包括多个表单项，通过`action`、`method`属性指定提交的操作
`<input>`	输入表单项	-
`<select>`	下拉列表表单项	-
`<textarea>`	文本域	-

属性

属性	作用	备注
width	设置宽度	-
height	设置高度	-
id	给标签赋予id	各标签的id唯一，不能重复
class	给标签指定类	各标签的class可以重复
herf	指定资源url	-
src	指定资源url	-
controls	视频播放控件	-
target	指定打开资源链接的位置	_self：默认值，在当前页面打开;_blank：在空白页面打开
border	边框宽度	-
cellspacing	表格单元之间的空间	-
action	提交的数据，ULR	-
method	提交方式	GET、POST等

CSS

引入

CSS在HTML中的引入方式
- 行内样式：写在标签的style中（不推荐） <h1 style="xxx: xxx; xxx: xxx;></h1>"
- 内嵌样式：写在style标签中（style标签可以写在任意位置，但通常写在head标签里，所有的标签都在这里通过选择器指定样式）
```
<style>
    h1 {
        xxx: xxx;
        xxx: xxx;
    }
</style>
```
- 外联样式：写在一个单独的.css文件中，用link标签引入
外联引入方法：
1. 新建CSS目录用于存放CSS文件
2. 在HTML中添加link标签：<link rel="stylesheet" herf="css/news.css">

CSS选择器：用来指定需要设置样式的标签

优先级：id选择器 > 类选择器 > 元素选择器

元素选择器

标签名称 {
    color: red;
}

对应HTML

<h1> </h1>

id选择器

#id属性值 {
    color: red;
}

对应HTML

<h1 id="hid"> </h1>

类选择器

.class属性值 {
    color: red;
}

对应HTML

<h1 class="cls"> </h1>

属性

属性手册：https://www.w3school.com.cn/cssref/index.asp

颜色：color
- 关键字：red、green、blue等
- rgb：rgb(255,255,255)
- 十六进制：#ff0000 每两位分别代表红、绿、蓝，两个相同的数字可以合并，如 #cccccc -> #ccc
字体大小：fontsize
文本修饰样式：text-decoration
- none：无效果
- underline：下划线
- overline：上划线
- line-through：穿过文本下的一条线
- blink：闪烁
- inherit：应该从父元素继承 test-decoration 属性的值
行高：line-height
首行缩进：line-indent
水平对齐方式：text-align
- 居中：center
- 靠左：left
- 靠右：right

布局

盒子模型：整个页面可以看作一个盒子，由四部分组成
- 内容区域（content）
- 内边距区域（padding）
- 边框区域（border）
- 外边距区域（margin）
布局属性
- width：宽度
- height：高度
- box-sizing：指定box规格，如 border-box 即让元素大小等于border以内的大小
- background-color：背景色
- padding：内边距：上右下左如：padding: 20px 20px 20px 20px;
- border：边框：宽度线条类型颜色如：border: 10px solid red;
- margin：外边距：上右下左如：margin: 30px 30px 30px 30px;
具体操作：先把想要设定布局的部分用<div>标签包裹起来，再设置布局属性。设置的时候最好去查一下手册，看看每个属性的详细情况。

JS

引入

内部脚本 ：将JS代码定义在HTML页面中
- 代码位于<script></script>标签之间
- 在HTML文档中，可以在任意地方放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可以改善显示速度
- 示例：
```
<script>
  alert("Hello JS")
</script>
```
外部脚本：定义在JS文件中再引入
- JS代码文件只包含JS，不含<script>标签
- <script>标签不能自闭合
- 示例：
```
  <script src="js/demo.js"></script>
```

基础语法

语法特点
- 区分大小写
- 行尾分号可以省略
- 注释同Java
- 大括号表示代码块
输出语句
- window.alert() 写入警告框
- document.write() 写入 HTML 输出
- console.log() 写入浏览器控制台
变量定义
- 使用var来声明变量
- 变量可以存放不同类型的值
- 使用var声明的变量均为全局变量
- 同名变量可以重复定义，后定义的会覆盖之前的
- ECMAScript6 新增了 let 关键字用于定义局部变量，且不能重复定义
- const定义常量
数据类型
- number：数字
- string：字符串，可单双引号
- boolean：布尔
- null：空
- undefined：未初始化变量的默认值
- 变量前加typeof可获取变量的数据类型，如：alert(typeof a)
运算符
- 大多数与 Java 一致
- 特殊运算符：=== 全等
  - ==会进行类型转换，===不会进行类型转换
  - 示例：
```
var a = 10;
alert(a == "10") // true
alert(a === "10") // false
alert(a === 10) //true
```
类型转换
- 字符串转数字：如果是数字转number，否则转NaN。特殊的，转换时从前往后看，如 12A45 将转换成 $12$
- 其他类型转为boolean：
  - Number：0和NaN为false，其他为true
  - String：空字符串为false，其他为true
  - Null和undefined：均为false
流程控制语句基本和Java一致
函数
- 定义：
```
function functionName(para1, para2 ...) {
  // code
}
```
- 特点：
  - 形式参数不需要类型
  - 返回值也不需要类型，直接使用return返回即可
  - 如果传递的参数数量不对应，就会从前往后对应
- 调用：fun(para)

对象

自定义对象

var user = {
  name:"Tom",
  age:20,
  eat: function() {
    alert("eating");
  }
  // 简化
  eat() {
    alert("eating");
  }
}
user.name;
user.eat();

Array数组
- 定义
```
var arr = new Array(1,2,3,4); // 方式1
var arr = [1,2,3,4]; // 方式2
```
- 访问
```
arr[10] = "hello";
```
- 特点：长度、类型可变
- 属性
  - length 设置或返回数组中元素的数量
- 方法
  - forEach()遍历数组中的每个有值的元素，并调用一次传入的函数
```
// 新建function
arr.forEach(function(e) {
  console.log(e);
})
// 箭头函数（Lambda)
arr.forEach((e) => {
  console.log(e);
})
```
  - push()将新元素添加到数组末尾，并返回新的长度
  - splice(index, number)从数组index开始删除number个元素
String字符串
- 创建
```
var str = new String("Hello");
var str = "Hello";
```
- 属性
  - length 返回字符串长度
- 方法
  - charAt()：返回在指定位置的字符
  - indexOf()：检索字符串
  - trim()：去除字符串两边的空格
  - substring()：提取字符串中两个指定的索引号之间的字符
JSON
- 概念：JavaScript Object Notation，JavaScript对象标记法
- 形式：基本与JS对象一致，但key要用双引号引用，单引号不行
```
{
  "name":"Tom",
  "age":20
}
```
- 定义
```
var jStr = '{"key1": value1, "key2": value2}';
```
- 数据类型
  - 数字（整数或浮点数）
  - 字符串（在双引号中）
  - 逻辑值（true或false）
  - 数组（在方括号中）
  - 对象（在花括号中）
  - null
- 字符串与对象的转换
```
var jsObj = JSON.parse(jsStr);
var jsonStr = JSON.stringify(jsObj);
```
BOM
- 概念：Browser Object Model 浏览器对象模型，允许JS与浏览器对话，JS将浏览器的各个组成部分封装成对象
- 组成：
  - Window：浏览器窗口对象
    - 介绍：浏览器窗口对象
    - 获取：直接使用window，其中，window.可以省略
    - 示例：
```
window.alert("H");
alert("H");
```
    - 属性
      - history：对history对象的只读引用
      - location：用于窗口或框架的Location对象
      - navigator：对Navigator对象的只读引用
    - 方法
      - alert()：显示带有一段消息和一个确认按钮的警告框
      - confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
      - setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
      - setTimeout()：在指定的毫秒数后调用函数或计算表达式
  - Navigator：浏览器对象
  - Screen：屏幕对象
  - History：历史记录对象
  - Location：地址栏对象
    - 获取：使用window.location获取，其中window.可以省略
    - 属性
      - herf：设置或返回完整的URL
DOM
- 概念：Document Object Model，文档对象模型
- 将标记语言的各个组成部分封装为对应的对象
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
- JS通过DOM，能够对HTML进行操作：
  - 改变HTML元素的内容
  - 改变HTML元素的样式（CSS）
  - 对HTML DOM事件作出反应
  - 添加和删除HTML元素
- HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。获取的方法如下：
  - 根据id属性获取，返回单个Element对象
```
var h1 - document.getElementById('h1')
```
  - 根据标签名称获取，返回Element对象数组
```
var divs = document.getElementsByTagName('div');
```
  - 根据name属性值获取，返回Element对象数组
```
var hobbys = document.getElementsByName('hobby');
```
  - 根据class属性值获取，返回Element对象数组
```
var clss = document.getElementsByClassName('cls');
```

事件监听

事件绑定

通过HTML标签中的事件属性进行绑定

<input type="button" οnclick="on()" value="Button1">

<script>
  function on() {
    alert('click!');
  }
</script>

通过DOM元素属性绑定

<input type="button" id = "btn" value="Button2">

<script>
  document.getElementById('btn').οnclick=function() {
    alert('click!');
  }
</script>

常见事件
- onclick：鼠标单击
- onblur：元素失去焦点
- onfocus：元素获得焦点
- onload：完成加载
- onsubmit：表单提交
- onkeydown：键盘按下
- onmouseover：鼠标移到
- onmouseout：鼠标移开

Vue

Vue 是一套前端框架，免除原生JavaScript中的DOM操作
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
官网：https://v2.cn.vuejs.org/

快速入门

简单的Vue程序：

新建HTML页面，引入Vue.js文件
```
<script src="js/vue.js></script>
```

在JS代码区域，创建Vue核心对象，定义数据模型

<script>
  new Vue({
    el: "#app", //Vue接管区域
    data: {
      message: "Hello Vue!"
    }
  })
</script>

编写视图

<div id="app">
  <input type="text" v-model="message">
  {{ message }}
</div>

差值表达式
- 形式：{{ 表达式 }}
- 内容可以是：
  - 变量（最常见）
  - 三元运算符
  - 函数调用
  - 算术运算

常用指令

大致可以理解为：v-model修改数据、v-bind调用数据
被绑定的变量必须在数据模型中声明
v-bind
- 作用：为HTML标签绑定属性值，如设置herf、css样式等
- 使用
```
<a v-bind:herf="url">text</a>
```
  其中，v-bind可省略：
```
<a :herf="url">text</a>
```
v-model
- 作用：在表单元素上创建双向数据绑定
- 使用
```
<input type="text" v-model="url">
```

v-on

作用：为HTML标签绑定事件

使用

<input type="button" value="btn" v-on:click="handle()">

<input type="button" value="btn" @click="handle()">

<script>
  new Vue({
    el: "#app",
    data: {
      // ...
    },
    methods: {
      handle:function() {
        alert('click~');
      }
    }
  })

v-if/v-else/v-else-if

作用：条件性的渲染某元素，判定为true时渲染，否则不渲染

使用：

年龄{{age}},经判定为：
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>

v-show
- 作用：根据条件展示元素，但只切换display属性的值
- 使用
```
年龄{{age}},经判定为
<span v-show="age <= 35">年轻人</span>
```

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

使用

<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{addr}} </div>
<!-- 索引index从0开始 -->
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}} </div>

data:{
  ...
  addrs: ['北京', '上海', '广州']
},

生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期时间，会自动执行一个生命周期方法（钩子）。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载后
beforeUpdate	更新前（数据改变，但还没更新）
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

Ajax

Ajax: Asynchronous JavaScript And XML, 异步的JS和XML
作用：
- 与服务端数据交换
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验
参考手册：https://www.w3school.com.cn/js/js_ajax_intro.asp

原生Ajax

准备数据地址
创建XMLHttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

<body>
  <input type="button" value="获取数据" οnclick="getData()">
  <div id="div1"></div>
</body>

<script>
  function getData(){
    // 1.创建XMLHttpRequest
    var xmlHttpRequest = new XMLHttpRequest();

    // 2.发送异步请求
    xmlHttpRequest.open('GET', 'http://test/list');
    xmlHttpRequest.send();

    // 3.获取服务响应数据
    xmlHttpRequest.onreadystatechange=function() {
      if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200) {
        document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;
      }
    }
  }

Axios2

介绍：Axios对原生的Ajax进行了封装，简化书写
官网：https://www.axios-http.cn/

快速入门：

引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

使用Axios发送请求，并获取响应结果

axios({
  method: "get",
  url: "http://test/list"
}).then((result)) => { // 成功回调函数
  console.log(result.data);
}

axios({
  method: "post",
  url: "http://test/list",
  data: "id=1"
}).then((result) => { // 成功回调函数
  console.log(result.data);
})

简化请求方式

axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])

示例：

// GET
axios.get("http://test/list").then((result) => {
  console.log(result.data);
})
// POST
axios.post("http://test/update").then((result) => {
  console.log(result.data);
})

示例：结合Vue实现页面数据加载

new Vue({
  el: "#app",
  data: {
    emps:[]
  },
  mounted() {
    // 发送异步请求，加载数据
    axios.get("http://test/list").then( result => {
      this.emps = result.data.data;
    })
  }
});

前端工程化

模块化、组建化、规范化、自动化

YAPI

介绍：高效易用的接口管理平台
地址：http://yapi.smart-xwork.cn/

vue-cli

介绍：vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS
Vue项目创建
- 命令行：vue create vue-project01
- 图形化界面：vue ui
- 使用图形化创建新项目时，预设选择“手动”，功能将“Router”打开，语法检查器选择第一个，创建好了之后使用VSCode打开创建好的文件夹即可
目录结构
- node_modules：整个项目的依赖包
- public：项目的静态文件
- package.json：模块基本信息，项目开发所需要模块，版本信息
- src：存放项目的源代码
  - asset：静态资源
  - components：可重用的组建
  - router：路由配置
  - views：视图组件（页面）
  - App.vue：入口页面（根组件）
  - main.js：入口JS文件
Vue项目启动
- 方式1：图形化界面，点击VSCode左下角“NPM脚本”，点击第一个的运行按钮
- 方式2：命令行，npm run server

配置端口
修改vue.config.js

const { defineConfig } = require('@vue/cli-server')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080, // 在这里设置端口
  }
})

Vue项目开发流程

默认首页：自带的index.html默认引入了Vue项目的入口文件main.js
export关键字可以将对象或者函数导出为模块，在其他地方用import导入
main.js通过import引入了App.vue等公共组件
.$mount('#app')表示将对象挂载到#app中，相当于el: "#app"
在ES6中，如果属性名和属性值一致，可以合并为一个，如router: router可以简写为router
HTML内容是在main.js中通过render函数创建了虚拟DOM元素，这个元素是在组件中定义的
Vue的组件文件以.vue结尾，每个组件由三部分组成：<tmplate>、<script>、<style>
- tmplate：对应HTML，模板部分，用于生成HTML代码，在它里面可以定义原生的HTML代码
- script：对应JS，控制模板的数据来源和行为，在它里面定义数据、函数
- css：对应CSS，定义样式

Vue组件的标准格式：

<template>
  <div> // 根标签

  </div>
</template>

<script> // 这一部分在VSCode中输入script，在自动提示中选择倒数第二个javascript.vue，自动生成
export default { // 把定义的部分导出为模块
}
</script>

<style>

</style>

定义数据模型

data() { // 输入data后可以自动补全生成模型
  return {
    message: "Hello Vue"
  }
},
methods: { //定义方法

}

根组件（App.vue）只有一个，自己写的其他组件都放在views文件夹下

Element

是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库
官网：https://element.eleme.cn/#/zh-CN

快速入门

安装组件库：npm install element-ui@2.15.3

在main.js中引入组件库：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体的组件和用法参照官网

Vue路由

Vue Router是Vue的官方路由
组成
- VueRouter：路由器类
- ：请求链接组件，浏览器会解析成
- ：动态视图组件，用来渲染展示与路由路径对应的组件
安装：npm install vue-router@版本号

使用

在router目录下创建index.js文件，示例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
    // meta: {
    //   title: "登录",
    //   requireAuth: false // 标识该路由是否需要登录
    // }
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },

  {
    path: '/example',
    component: Layout,
    redirect: '/example',
    name: 'System',
    meta: { title: '班级学员管理', icon: 'el-icon-collection' },
    children: [
      {
        path: 'classes',
        name: 'Classes',
        component: () => import('@/views/classes'),
        meta: { title: '班级管理', icon: 'el-icon-menu' }
      },
      {
        path: 'student',
        name: 'Student',
        component: () => import('@/views/student'),
        meta: { title: '学员管理', icon: 'el-icon-user-solid' }
      }
    ]
  }, 

  {
    path: '/course',
    component: Layout,
    redirect: '/course',
    name: 'course',
    meta: { title: '课程信息管理', icon: 'el-icon-notebook-2' },
    children: [
      {
        path: 'course-manage',
        name: 'Course-manage',
        component: () => import('@/views/course-manage'),
        meta: { title: '课程管理', icon: 'el-icon-reading' }
      },
      {
        path: 'course-arrange',
        name: 'Course-arrange',
        component: () => import('@/views/course-arrange'),
        meta: { title: '课程安排', icon: 'el-icon-s-claim' }
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

2.在main.js中引入并指定路由

import router from `/router`
new Vue({
  router,
  render: h => h(App)
}).$mount

3.在需要使用路由链接的地方使用标签

<router-link to="/student">学员管理</router-link>

東木_叁貳陸伍

关注

23
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫