HTML

html的标签是已经定义的，不可以随意更改

这是一个图片标签

最外层的标签为

1
2
3
4
<!DOCTYPE html>
<head>
    <title>ciallo!</title>
</head>

CSS

Javascript

js弱类型语言，使用let声明，不需要指定变量的数据类型，定义函数的时候也不需要指定返回值类型

具名函数类似于普通编程语言的函数和方法

匿名函数类似于构造函数可以用来直接赋值

匿名函数：

1
2
3
let add=function(a,b){
    return a+b;
}
1
2
3
let add=(a,b)=>{
    return a+b;
}

箭头函数省略function

js自定义对象

1
2
3
4
5
let 对象名={
    属性名:属性值,
    方法名:function(形参列表){}
    方法名(){}
}

不建议使用匿名方法，并且要使用逗号分隔

json

js对象标记法写的文本，本质是字符串，多用于网络报文的数据载体，所有的key使用双引号引起来，数字直接写，最外层使用大括号包裹

1
JSON.stringify(person)

可以将一个自定义对象转换成json对象

1
2
let person='{"name":"0d00","age":18}'
alert(JSON.parse(person).name)

先将json字符串转成对象，再进行访问

DOM可以将网页中的所有元素当作对象来进行处理

1
2
document.querySelector('选择器')//获取匹配到的第一个元素
document.querySelectorAll('选择器')//返回匹配到的所有元素，是一个伪数组

操作DOM对象的步骤，专门用来操作网页内容的操作

1.先获取DOM对象

2.调用DOM对象中的属性可以进行修改或调用

事件监听

1
2
3
4
事件源.addEventListener('事件类型',事件触发的函数)
document.querySelector('button').addEventListener('click',function(){
    alert("0721")
})

事件类型对应关键字

鼠标事件：

1
2
3
click//鼠标点击
mouseenter//鼠标移入
mouseleave//鼠标移出

键盘事件：

1
2
keydown//键盘按下触发
keyup//键盘抬起触发

焦点事件：

1
2
focus//获得焦点触发
blur//失去焦点触发

表单事件：

1
2
input//输入时出发
submit//表单提交时触发
1
2
3
4
document.querySelector("#id")
document.querySelector(".class")
document.querySelector("标签名")
document.querySelector("[type="button"]")

外联js代码

1
<script src="路径" type="module"></script>

module意思是模块化代码就是外联js代码

Vue

构建用户界面的渐进式js框架，基于数据渲染用户界面

使用步骤

引入Vue模块，创建Vue应用实例，定义元素后交给Vue控制

1
2
3
4
5
6
7
8
9
10
<script type="module">
    import {createApp} from'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                message:'Hello Vue'
            }
        }
    }).mount('#app');
</script>

mount指定接管的区域，里面引用的一半是id(#的引用在这里体现)

动态接收客户端请求并渲染显示在页面上，无需自己通过dom树修改页面元素，规避xss风险

Vue常用指令(感觉有点像c++里的模板)

v-for

列表渲染，遍历容器元素或对象属性

1
<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>

items为遍历的数组

item为遍历出来的元素

index为索引，从0开始；可以省略

key用于为元素添加唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能

从对象中获取key，推荐使用id作为key，因为id的值唯一

为想要遍历展示多次的元素

插值表达式不可出现在标签内部

v-bind

动态为html标签绑定属性值，如设置href，src，style

1
<img v-bind:src="item.image" width="30px">

绑定的数据必须是遍历的对象中已经定义的属性

v-if &v-show

均为用来控制元素显示与隐藏

1
2
3
<span v-if="gender==1">男生</span>
<span v-else-if="gender==2">女生</span>
<span v-else="gender==3">xnn</span>

基于条件判断来显示元素，适用于不频繁切换的场景

v-show语法与v-if一致

区别在于v-show基于CSS样式display来控制显示与隐藏，适用于频繁切换的场景

v-show没有else的用法

v-model

绑定表单项，获取表单项中的数据或设置表单项的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    createApp({
        data(){
            return{
                searchForm:{
                    name:'',
                    gender:'',
                    job:''
                }
            }
        }
    }).mount('#container')
</script>
<input type="text" id="name" v-model="searchForm.name">

v-model中的数据类型必须在data中定义

该绑定为双向绑定，即可以通过页面数据改变数据模型中的数据，反之也可以

v-on

为html添加事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button type="button" v-on:click="handle">
    显示
</button>
<script>
    createApp({
        data(){
            message:''
        },
        methods:{
            handle(){
                console.log("ciallo")
            }
        }
    }).mount("#app");
</script>

methods表示的是函数与data齐平，用逗号分隔，内部可定义多个函数，同样函数之间是齐平的，用逗号分隔

八个钩子方法自动调用，mounted()在vue挂载完毕接管区域的时候自动调用类似于构造函数

Ajax

异步的js和xml(可扩展的标记语言)

作用：通过Ajax可以给服务器发送请求并获得响应数据

异步交互：指在不重新加载整个页面的情况下与服务器交换数据并更新部分页面

1
2
3
4
5
6
7
8
9
10
axios({
	method:'GET',
	url:'https://www.baidu.com',
	data:POST请求数据
	params:GET请求数据的url参数?key=val
}).then((result) => {
	consloe.log(result.data);
}).catch((err) => {
	alert(err);
});

MAVEN

方便快捷的管理项目依赖的资源(jar包)

pom.xml是maven的配置文件

1
2
3
4
5
6
7
<dependencies>
    <depedency>
        <groupId>commoms-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.11.0</version>
    </depedency>
</dependencies>
1
2
3
<groupId>com.example</groupId>//项目组织名
<artifactId>web-demo</artifactId>//项目名
<version>1.0-SNAPSHOT</version>//项目版本
1
2
3
4
5
<properties>
   <maven.compiler.source>1.8</maven.compiler.source>//项目使用的jdk
   <maven.compiler.target>1.8</maven.compiler.target>
   <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>//项目的字符集
 </properties>

标准化的自动化的项目构建方式

Lifecycle/compile一键编译

Lifecycle/package一键打包

提供一套统一标准的项目结构

MAVEN坐标

资源的唯一标识，可以通过坐标定位资源位置

groupId：定义当前Maven项目的组织名

artifactId：定义当前Maven项目名称

version：定义当前项目的版本号

SNAPSHOT：不稳定的快照版本

RELEASE：稳定的发行版本

http://example.com/2026/05/19/理论/前端/
作者
John Doe
发布于
2026年5月19日
许可协议