簡易版 vue實現
阿新 • • 發佈：2022-05-15
今日內容
前端與後端的概念
前端
任何與使用者直接打交道的操作介面 都可以稱之為前端
後端
不直接與使用者打交道 主要負責內部真正的業務邏輯的執行
前端三劍客
HTML 網頁的骨架>>>:光著身子
CSS 網頁的樣式>>>:穿上衣服
JavaScript 網頁的動態>>>:做動作
前端前戲
1.編寫服務端
2.瀏覽器充當客戶端訪問服務端
3.瀏覽器無法正常展示服務端內容（因為服務端的資料沒有遵循標準）
4.HTTP協議>>>:最主要的內容就是規定了瀏覽器與服務端之間資料互動的格式
HTTP2協議
1.四大特性
1.基於請求相應
客戶端傳送請求 服務端迴應相應
2.基於TCP、IP作用於應用層之上的協議
該協議屬於應用層
3.無狀態
服務端不會儲存客戶端的狀態
4.無連線
客戶端與服務端不會長久的保持連線
如果想長連線就不能用HTTP協議
2.資料模式
1.請求格式
請求首行(請求方式（有很多種）協議版本)
請求頭(一大堆k:v鍵值對)
換行
請求體(存放敏感資訊 並不是所有的請求方式都有請求體)
2.響應格式
響應首行(狀態碼(有很多種)協議版本)
響應頭(一大堆k:v鍵值對)
換行
響應體(存放給瀏覽器展示的資料)
3.響應狀態碼
用數字來表達一些文字意義（類似於暗號） 1xx：服務端已經接收到了你的請求正在處理 客服端可以繼續傳送或者等待（比較短暫） 2xx：200 ok 請求成功 服務端傳送了對應的響應 3xx：302（臨時） 304（永久）重定向（想訪問網頁A但是自動跳到了網頁B） 4xx：403 訪問許可權不夠 404請求資源不存在 5xx：服務端內部錯誤
HTML簡介
1.直接傳送手寫資料
2.轉為傳送檔案裡面的資料
3.編寫HTML出現特殊的現象
超文字標記語言：所見即所得
HTML概括
1.HTML註釋語法 <!--註釋內容--> 2.HTML文件結構 <html> 固定格式 html包裹 <head> 主要放跟瀏覽器互動的配置 </head> <body> 主要放給使用者檢視的花裡胡哨的內容 </body> </html> 3.HTML標籤分類 單標籤（自閉和標籤） <img/> 雙標籤 <h1></h1>
預備知識
1.網頁資訊資料一般也會存放於檔案中
html
2.pycharm支援前端所有型別的檔案編寫
內建有自動補全的功能 我們只需要專注於標籤名的編寫即可
3.html檔案的開啟
內建有自動呼叫瀏覽器的功能
head內常見標籤
1.title 網頁小標題
2.meta 定義網頁源資訊（很多配置）
<meta name="keywords" content="查詢關鍵字">
<meta name="description" content="網頁簡介">
3.style內部支援編寫css程式碼
<style>
h1{
color: deeppink;
}
</style>
</head>
<body>
<h1>Hi i'm joyce!</h1>
</body>
更改h1中標題的顏色
4.link引入外部css檔案
新建一個css檔案
<head>
<link rel="stylesheet" href="建立的css檔名">
</head>
5.script支援內部編寫js程式碼也可以引入外部js檔案
<script>
prompt('joyce好看嗎','當然啦')
</script>
彈窗
建一個js檔案
console.log('hello joyce!')
alert('hi!')
<head>
<script src="3.js"></script>
</head>
body內基本標籤
1.標題系列標籤
h1-h6
2.段落標籤
p
3.其他標籤
u 下劃線
i 斜體
s 刪除線
b 加粗
4.換行與分割線
br 換行
hr 分割
標籤的分類
行內標籤
u i s b
內部文字多大就佔多大
塊兒級標籤
h系列 p
獨佔一行
常見符號
1. 空格
2.>； 大於
3.<； 小於
4.&； &符
5.¥； ￥
6.©； ©
7.®； ®
body內佈局標籤
div
塊級標籤
span
行內標籤
'''
標籤之間可以互相巢狀 並且理論上可以無線套娃
塊級標籤內部可以巢狀塊級標籤和行內標籤
p標籤雖然是塊兒級標籤 但是他的內部也不能巢狀塊兒級標籤
行內標籤內部只能巢狀行內標籤
'''
bady內常用標籤
'''
標籤括號內填寫的 什麼=什麼 稱之為標籤的屬性
1.預設屬性
標籤自帶的 編寫的時候有自動提示
2.自定義屬性
使用者自定義 編寫不會有提示甚至會飄顏色
'''
a標籤 連結標籤
href
1.填寫網址 具備跳轉功能
href ='url'
2.填寫其他標籤的id值 具備錨點功能
href = '#id'
target
預設_self原網頁跳轉
_blank新建網頁跳轉
img標籤 圖片標籤
src
1.填寫圖片地址
tittle
滑鼠懸浮在圖片上 自動展示的文字
alt
圖片載入失敗提示資訊
width\height
圖片尺寸 兩者調整一個即可 等比例縮放
列表標籤
無序列表
<ul>
<li>手機</li>
<li>衣服</li>
</ul>
ps:頁面上所有有規律排列的橫向或者豎向的資料 一般使用的都是無序列表
有序列表
<ol type="a">
<li>111</li>
<li>222</li>
</ol>
ps:還可以通過type豎向切換數字
標題列表
<dl>
<dt>大標題</dt>
<dd>小標題</dd>
<dt>大標題</dt>
<dd>小標題</dd>
</dl>
表格標籤
1.先寫基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再寫表頭及表單資料
<tr> 一個tr標籤就代表一行
<th>編號</th> th主要用於表頭欄位中 用來加粗顯示
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>1</td> td主要用於表示式中
<td>jason</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>kevin</td>
<td>22</td>
</tr>
表單標籤
可以獲取到使用者的資料併發送給服務端
form標籤
action 控制資料的提交地址
method 控制資料的提交方法
input標籤
type屬性
text 普通文字
password 密文展示
date 日期選項
email 電子郵件
radio 單選
checkbox 多選
file 檔案
submit 提交按鈕
reset 重置表單
button 暫無功能
select標籤 下拉框
option 一個個選項
texearea標籤獲取大段文字
input 標籤應該有name屬性
name屬性相當於字典的鍵 input標籤獲取道德使用者資料相當與字典的值
點擊發送就會組織成字典的形式傳送給服務端 這樣才具有明確意義