前端三剑客与VUE
HTML、CSS、JavaScript、VUE的学习笔记
前端三剑客
前端三剑客分别是html、javascript、css
html记录了这个页面的内容，css记录了这个页面的样式风格颜色等、javascript用于这个页面的用户交互
vscode前端插件
HTML CSS Support
Live Server
Auto rename tag
HTML
HTML标签
HTML全称是超文本标记语言
通过一系列标签来定义文本、图像、链接等等
标签一般是成对出现的，如下
<h1>标题</h1>
<p>这是一个段落</p>
也存在一部分单标签，如下：
<br>
<hr>
<input type="text">
HTML文件结构
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello</h1>
</body>
<html>
其中<!DOCTYPE html>是DOCTYPE用于告知浏览器，这是一个HTML文档
<html>和</heml>为html的根标签
<head>和</head>为头标签，定义了文档的标题编码等信息
常用文本标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>段落标签</p>
<p>段落标签<b>加粗的字体</b></p>
<p>段落标签<i>倾斜的字体</i></p>
<p>段落标签<u>下划线字体</u></p>
<p>段落标签<s>删除线字体</s></p>
<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
</ul>
<ol>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
</ol>
<table border="1">
<tr>
<th>列标题</th>
<th>列标题</th>
<th>列标题</th>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列2</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列2</td>
</tr>
</table>
预览
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
段落标签
段落标签加粗的字体
段落标签倾斜的字体
段落标签下划线字体
段落标签删除线字体
- 无序列表元素1
- 无序列表元素2
- 无序列表元素1
- 无序列表元素2
| 列标题 | 列标题 | 列标题 |
|---|---|---|
| 列1 | 列2 | 列2 |
| 列1 | 列2 | 列2 |
HTML属性
每个html标签可以有不同的属性
属性名不区分大小写，属性值区分大小写
<a href="https://www.baidu.com">百度</a>
大多数标签拥有拥有class、id、style属性
class：定义一个或多个类目
id：定义元素的id
style：定义元素的行内样式
A标签
A标签可以定义一个超链接
用href指定url
用target指定打开方式
-
_self：当前标签页打开
-
_blank：新窗口或者标签页打开
-
_parent：父窗口打开
-
_top：在顶层窗口或者标签页打开
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com" target="_blank">新页面打开百度</a>
换行标签
<br>可以创建一个换行
<hr>可以创建一个水平分割线
图片标签
<img src="图片.jpg" alt="图片加载失败" width="100" height="100">
-
src：指定图片位置（可以放url）
-
alt：可以滞空，为图片加载失败后的内容
-
width：指定宽度
-
height：指定高度
HTML区块-块元素和行内元素
块元素
用于组织布局页面
例如：<div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>、<tablee>、<form>
行内元素
通常在同一行显示，不会独占一行
例如：<span>、<a>、<input>、<em>、<br>、<strong>
行内块元素
例如：<img>
div标签
用于布局，创建一个块
<div>
<a href="xxx">文章1</a>
<a href="xxx">文章2</a>
<a href="xxx">文章3</a>
<div>
<div>
<h1>标题</h1>
<p>文章内容1</p>
<p>文章内容2</p>
<p>文章内容3</p>
<div>
示例
标题
文章内容1
文章内容2
文章内容3
span标签
用于给一小段文本赋予css、js效果等
<span>这是一个<a href="xxx">链接</a></span>
标签
form标签
- action：提交的url地址
label标签，同span一样用于布局
input标签为输入框
-
type：规定了input的类型（text为输入框，password为密码框、radio为单选框、checkbox为多选框、submit为提交）
-
placeholder：input的默认值
-
value：默认值
<form actioin="http://xxx.com/api">
<input type="text" placeholder="输入的提示">
<input type="text" value="默认的值">
</br>
<span>账号<input type="password"></span>
</br>
<label>密码</label>
<input type="password">
</br>
<label>物种</label>
<input type="radio" name="animal">猫
<input type="radio" name="animal">狗
<!-- name中写名字，表示同一个name中单选 -->
</br>
<label>爱好（多选）</label>
<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">music
<br>
<input type="submit" value="提交">
</form>
CSS
CSS是层叠样式表
可以控制html的样式，比如颜色等
格式
选择器{
属性名1:属性值;
属性名2:属性值;
}
给所有p标签换颜色和大小
p{
color:blue;
font-size:26px;
}
CSS优先级
优先级从高到低为：
-
内联样式（html标签中定义css）
-
内部样式表（style标签中放css）
-
外部样式表（单个css文件）
三种写法示例如下：
内联样式
<h1 style="color:red;">红标题</h1>
内部样式
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8" />
<style>
p{
color:red;
font-size:26px;
}
</style>
</head>
<body>
<p>Hello</p>
</body>
<html>
外部样式
一个css文件
p{
color:blue;
font-size:26px;
}
html文件的head中引用
<head>
<link rel="stylesheet" href="1.css">
<head>
常用选择器
标签选择器：直接写标签名字
p{
color:blue;
}
类选择器：.class名字
.hello{
color:blue;
}
<h1 class="hello">你好<h1>
<h2 class="hello">你好<h2>
ID选择器：#id值
#hello{
color:blue;
}
<h1 id="hello">你好<h1>
<h2 id="hello">你好<h2>
通用选择器：*
更换字体为楷体
*{
font-family:"KaiTi";
}
子元素选择器（>）
选择.AA中的.BB元素
.AA > .BB{
color:blue;
}
后代选择器（空格）
选择.AA中的p标签的后代
.AA p{
color:blue;
}
伪类选择器（:）
特殊的选择器，它用于定义元素在特定状态下的样式
鼠标指中后变色
#AA:hover{
color:red
}
-
:hover：选择鼠标悬停其上的元素。 -
:focus：选择获得焦点的元素。
CSS属性
字体属性font
line-height：调整行高
width：宽度
height：高度
盒子模型
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┃
┃ Margin ┌──────────────Border────────────┐ ┃
┃<-------->│ Padding │ ┃
┃ │<--------> ┌ ┐ │ ┃
┃ │ 元素内容 │ ┃
┃ │ └ ┘ │ ┃
┃ └────────────────────────────────┘ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Content：元素内容
Padding：内边距，元素到边框的距离
Margin：外边距 ，边框到边界的距离（边界划分了不同盒子）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
display: inline-block;
background-color: aqua;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
Hello
</div>
<div class="demo">
World
</div>
</body>
</html>
网页布局方式
浮动
使元素脱离文档流，进行左右浮动
浮动的活动范围是相对于父元素的，只会在父元素内部浮动
选择器{
float:left/right/none;
}
示例
其中overflow: hidden;是清除浮动，避免高度坍缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo1{
background-color: orange;
border: 5px,solid,greenyellow;
overflow: hidden;
}
.demo2{
display: inline-block;
background-color: aqua;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
float: left;
}
.demo3{
display: inline-block;
background-color: aqua;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
float: right;
}
</style>
</head>
<body>
<div class="demo1">
<div class="demo2">
Hello
</div>
<div class="demo3">
World
</div>
</div>
</body>
</html>
相对定位
position: relative;设置为相对定位
通过left、right、top、bottom对位置进行调节
不会脱离文档流
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
display: inline-block;
background-color: aqua;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
}
.demo1{
display: inline-block;
background-color: greenyellow;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
position: relative;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div class="demo">demo</div>
<div class="demo1">相对定位</div>
<div class="demo">demo</div>
</br>
<div class="demo">demo</div>
<div class="demo">demo</div>
<div class="demo">demo</div>
</body>
</html>
绝对定位
position: absolute;进行设置，会脱离文档流，其它与相对定位相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
display: inline-block;
background-color: aqua;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
}
.demo1{
display: inline-block;
background-color: greenyellow;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div class="demo">demo</div>
<div class="demo1">绝对定位</div>
<div class="demo">demo</div>
</br>
<div class="demo">demo</div>
<div class="demo">demo</div>
</body>
</html>
固定定位
position: fixed;设置 固定定位，此定位相较于浏览器
会脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
display: inline-block;
background-color: aqua;
color: red;
border: 10px,solid,black;
padding: 180px;
margin: 10px;
}
.demo1{
display: inline-block;
background-color: greenyellow;
color: red;
border: 10px,solid,black;
padding: 50px;
margin: 10px;
position: fixed;
top: 10px;
right: 50px;
}
</style>
</head>
<body>
<div class="demo1">固定定位</div>
<div class="demo">demo</div>
<div class="demo">demo</div>
<div class="demo">demo</div>
<div class="demo">demo</div>
</br>
<div class="demo">demo</div>
</br>
<div class="demo">demo</div>
</br>
<div class="demo">demo</div>
</br>
<div class="demo">demo</div>
</br>
<div class="demo">demo</div>
</body>
</html>iv class="demo">demo</div>
</body>
</html>
JavaScript
JavaScript提供了前端与用户的交互功能，且可以直接嵌入HTML当中
如何导入JS
内联式：使用<script>标签直接嵌入
外部引入：使用<script>src="./xxx.js"</script>引入外部JS
JS基本语法
变量
使用var申明变量（函数作用域）
使用let申明变量（块级作用域）
使用const申明常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var a=111;
let b=222;
const c=333;
alert(a);
alert(b);
alert(c);
</script>
</body>
</html>
条件与循环
条件语句同C相同
示例：
if(1>2){
alert('aaa');
}else if(1>3){
alert('bbb');
}else{
alert('ccc');
}
循环语句同C相同
for(var i=0;i<5;i++){
if(i==3)continue;
alert(i);
}
var i=0
while(1){
alert(i)
i++
if(i==2)break
}
函数
使用function申明函数
function add_func(a,b){
return a+b;
}
事件处理
| 事件 | |
|---|---|
| onClick | 点击 |
| onMouseOver | 鼠标经过 |
| onMouseOut | 鼠标移出 |
| onChange | 文本内容改变 |
| onSelect | 文本框选中 |
| onFocus | 光标聚集 |
| onBlur | 移开光标 |
示例
<div onclick="Hello()">aaa</div>
<script>
function Hello(){
alert("hello world");
}
</script>
DOM
可以获取html文档树并进行操作
示例
<div id="demo1">aaa</div>
<div class="demo2">aaa</div>
<script>
var a=document.getElementById("demo1")
var b=document.getElementsByClassName("demo2")
var c=document.getElementsByTagName("div")
console.log(a)
console.log(b[0])
console.log(c[0])
c[0].innerHTML="修改值(会解析)"
c[1].innerText="修改值"
c[0].style.backgroundColor="red"
c[1].onclick=function (){alert(666)}
c[1].addEventListener('click',function (){alert(666)})
</script>
关于AI
善用AI可以有效提高效率，如下：
参考：https://www.bilibili.com/video/BV1BT4y1W7Aw
VUE
初始化
nodejs换源
npm config set registry http://mirrors.cloud.tencent.com/npm/
创建项目
npm init vue@latest
之后按照提示启动项目
cd 你的项目
npm install
npm run dev
VUE文件里面写什么
分为三部分
一个<template>，组件模板结构，可以包含html代码和其它组件
一个<script>，组件的js代码
一个<style>，CSS代码-组件的样式
模板插值-文本绑定-属性绑定
使用{{xx}}进行文本绑定
使用v-html="xx"绑定html内容（会作为html解析）
使用v-bind:xx进行属性绑定（可以直接写:xx省略v-bind）
<template>
<h1>{{ msg }}</h1> <!--vue-->
<h1>{{ id+num }}</h1> <!--30-->
<h1>{{msg+id+num}}</h1> <!--vue1020-->
<p v-html="baidu"></p> <!--原始html-->
<p v-bind:class="clsname">11</p> <!--属性绑定-->
</template>
<script>
export default{
data(){
return{
msg:"vue",
id:10,
num:20,
clsname:"hello",
baidu:'<a href="http://www.baidu.com">百度</a>'
}
}
}
</script>
<style>
.hello{
color: red;
}
</style>
条件渲染v-if
通过v-if="xx"判断是否渲染某个属性
同时还有v-else和v-else-if等语法
v-show有相同的用法（基于CSS的display，v-if是直接不渲染）
<template>
<div v-if="flag_t">看见了吗？</div> <!--flag_t为true能显示-->
<div v-if="flag_f">看见了吗？</div> <!--flag_f为false不能显示-->
<div v-else>C那你看我吧</div> <!--else语句-->
</template>
<script>
export default{
data(){
return{
flag_t:true,
flag_f:false
}
}
}
</script>
列表渲染v-for
使用v-for可以遍历数组元素进行循环渲染
如下会打印三行学生的名字，my_school是数组名，stu_name用于后面的{{xx}}
也可以使用(name,index) in xx来进行遍历，index为下标
也可以使用(value,key,index)来遍历对象
in也可以改为of
<template>
<div>
<span v-for="stu_name in my_school">学生：{{stu_name}}<br></span>
</div>
</template>
<script>
export default{
data(){
return{
my_school:["小张","小红","小明"]
}
}
}
</script>
复杂数据
可以通过.取到对应的数据
推荐为所有标签添加一个key属性<p :key="friend.id">（添加唯一索引可以节省性能）
<template>
<div>
<span v-for="(friend,num) in http_json">
<p v-bind:id="friend.id">
第{{ num }}条数据<br>
Name:{{ friend.name }}<br>
Say:{{ friend.say }}<br>
</p>
</span>
</div>
</template>
<script>
export default{
data(){
return{
http_json:[
{"id":100,"name":"小张","say":"你好啊"},
{"id":101,"name":"小红","say":"HelloWorld"},
{"id":102,"name":"小明","say":"拜拜"},
]
}
}
}
</script>
事件处理v-on
用v-on:事件="xx"和@事件="xx"来处理事件
其中xx可以是函数（此函数要放在methods中）
method要获取data中的变量用this.xx
<template>
<div v-on:click="my_alert('hello')">点击弹窗,id自增</div>
<div @click="id++">点击自增--id为{{ id }}</div>
</template>
<script>
export default{
data(){
return{
id:0,
},
methods:{
my_alert(eid){
this.id++;
alert('666'+eid);
}
}
}
</script>
项目结构
以最简单的vue项目为例，展示项目的结构
通过main.js将app.vue绑定到``index.html`中
自己写组件
在components中创建一个hello.vue
<template>
<div>
<h1>这个是{{ MyComponents }}</h1>
</div>
</template>
<script>
export default {
data(){
return{
MyComponents:"我的组件"
}
}
}
</script>
去App.vue，也就是根组件中，import导入为Hello，通过components进行注册
之后在template中使用
<template>
<div>
<Hello></Hello>
<div>{{msg}}</div>
</div>
</template>
<script>
import Hello from './components/hello.vue'
export default{
components:{
Hello
},
data(){
return{
msg:"vue",
}
},
}
</script>
组件内部的传值
-
可以通过内部的Data提供数据
-
可以通过父组件prop传值
-
兄弟组件可以通过Vuex来传递数据
直接传值
在组件的export中，写对应的数值即可向外传递
在导入组件后，可以使用导入名.变量名进行使用
A-Components.vue
<template>
<div>
<h2>商品名称：{{ msg }}</h2>
</div>
</template>
<script>
export default{
AAAexport:"A组件导出的内容",
data(){
return{
msg:"电视机"
}
}
}
</script>
App.vue
<template>
<div>
<h1>{{ msg }}</h1>
<div>{{ Amsg }}</div>
<AAA></AAA><br>
</div>
</template>
<script>
import AAA from './components/A-Components.vue';
export default{
components:{
AAA
},
data(){
return{
msg:"APP.vue",
Amsg:AAA.AAAexport
}
}
}
</script>
props传值
通过在组件的export中设置一个props数组，向组件内传值
数组的值为外部使用本组件标签的属性值
A-components.vue
<template>
<div>
<h2>商品名称：{{ msg }}</h2>
<h3>来自{{ address }}的{{ name }}</h3>
</div>
</template>
<script>
export default{
props:["name","address"],
AAAexport:"A组件导出的内容",
data(){
return{
msg:"电视机"
}
}
}
</script>
App.vue
<template>
<div>
<h1>{{ msg }}</h1>
<AAA name="椅子" address="北京"></AAA>
</div>
</template>
<script>
import AAA from './components/A-Components.vue';
export default{
components:{
AAA
},
data(){
return{
msg:"APP.vue",
}
}
}
</script>
组件被创建时候的函数
组件在被创建时，和被挂载时，会执行对应的函数
<script>
export default{
created:function(){
console.log("组件被创建")
},
mounted:function(){
console.log("组件被挂载")
},
data(){
}
}
</script>
Axios与后端交互
在项目目录下安装
npm install axios
使用前需要导入
import axios from 'axios';
发送请求
以下代码会去后端接口的url处请求一个标题回来
ps：如果使用了代理的方式解决跨域问题，则直接写
/api/index这种路径即可，无需带协议端口
<script>
import axios from 'axios';
export default{
created:function(){
axios.get('这里是后端接口的url').then((response)=>{
console.log(response.data)
this.msg=response.data
})
console.log("组件被创建")
},
data(){
return{
msg:"默认值"
}
}
}
</script>
<template>
<h1>{{ msg }}</h1>
</template>
跨域问题
-
用代理方式解决
-
用后端解决
代理方式解决，在vite.config.js中的export default defineConfig加入
server: {
proxy: {
'/api': {
target: 'http://localhost:8080', // 目标地址
changeOrigin: true,
rewrite: (path) => (path)
}
}
}
表示将所有/api开头的请求转发到本地的8080端口（服务器端转发，用户浏览器无感）
vue路由
安装
vue3对应的vue-router版本为4
npm install vue-router@4
使用
template中给跳转按钮
首先，在.vue文件的<template>中可以使用如下格式制作一个导航栏
<RouterLink to="/A">A页面</RouterLink>
<RouterLink to="/B">B页面</RouterLink>
<RouterLink to="/C">C页面</RouterLink>
<RouterView></RouterView>
其中<RouterView>为占位符号，跳转的组件将会填充到此处
js中设置路由
之后在.js文件中（这里我创建route.js方便管理）
需要导入你写的子页面
import { createWebHistory, createRouter } from 'vue-router'
import pageA from './components/pageA.vue';
import pageB from './components/pageB.vue';
import pageC from './components/pageC.vue';
import pageD from './components/pageD.vue';
import pageE from './components/pageE.vue';
const routes=[
{path:'/',redirect:'/A'}, // /重定向到/A
{path:'/A',component:pageA}, // /A加载pageA
{path:'/B',component:pageB}, // /B加载pageB
{path:'/C',component:pageC}, // /C加载pageC
{path:'/C/D',component:pageD},
{path:'/C/E',component:pageE},
]
const router = createRouter({
history: createWebHistory(), //createMemoryHistory可以使浏览器端url不变化
routes,
})
export default router
使用以上格式添加路由，即/A对应pageA组件，也就是pageA.vue
然后此组件会被渲染到占位符<RouterView>中
如果将createWebHistory换成createMemoryHistory，则浏览器中url保持不变，用户无法通过url直接前往某个功能点，必须一次次点击跳转
main.js中注册路由
随后将router导出传入到main.js中进行注册
使用use进行注册（注册要在mount前）
例如：createApp(App).use(router).mount('#app')
一个路由的小项目
pageA/B.vue
以如下方式写2个一级页面
<template>
<div>
<h1>page-A内容</h1>
</div>
</template>
<script>
export default{data(){return{}}}
</script>
pageC/D/E.vue
写一个pageC
<template>
<br><!--这里不是根组件，所以这里的按钮离开本页面就不会渲染了，需要手动在子页面添加-->
<br>二级导航栏：
<RouterLink to="/C/D">D页面</RouterLink><span>----</span>
<RouterLink to="/C/E">E页面</RouterLink>
<RouterView></RouterView>
<div>
<h1>page-C内容</h1>
</div>
<RouterView></RouterView>
</template>
<script>
export default{data(){return{}}}
</script>
App.vue
<script>
export default{data(){return{}}}
</script>
<template>
<!--这里是根组件，所以这里的按钮和内容不论如何都会渲染-->
<h1>XX系统</h1>
<span>一级(根)导航栏：</span>
<RouterLink to="/A">A页面</RouterLink>
<RouterLink to="/B">B页面</RouterLink>
<RouterLink to="/C">C页面</RouterLink>
<RouterView></RouterView>
</template>
main.js
import './assets/main.css'
import router from './router';
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(router).mount('#app')
效果
系统任何页面都有一级导航栏（写在根组件App.vue的导航栏，可以前往ABC）
CDE中有二级导航栏（写在pageC/D/E中）
访问默认跳转A页面
结构为
/A
/B
/C
--/C/D
--/C/E
浙公网安备 33010602011771号