文章目錄
- 前言
- 一、HTML
- 1、< th >、< tr > 和 < td >標簽：
- 2、< button > 標簽：
- 3、< input type="text" >：
- 4、< br >：
- 二、CSS
- 1、選擇器
- 2、聲明塊
- 3、常用屬性及值
- 三、JS
- 1、Vue 實例對象：
- 2、@click 指令：
- 3、v-for 指令：
- 4、:key 綁定：
- 5、v-model 指令：
- 6、axios.請求（）.then（以axios.get為例）：
- 7、data的理解：
- 8、箭頭函數：
- 四、完整代碼展示
- 結語
前言
HTML、CSS 和 JavaScript 是網頁開發的三大核心技術，它們之間存在著緊密的關系，各自有著不同的職責和用途。HTML 負責構建網頁的基本結構和內容框架，CSS 用于設定網頁的樣式和布局以美化頁面外觀，JavaScript 為網頁添加動態效果和交互行為使其更加靈活和生動。
一、HTML
1、< th >、< tr > 和 < td >標簽：
在 HTML 里，< th >、< tr > 和 < td >都是用于構建表格的標簽：
< tr > 是 “table row” 的縮寫，代表表格的行。一個 < tr > 標簽就對應表格中的一行數據。在 < table > 標簽內部使用 < tr > 標簽來創建表格的行結構；
< th > 是 “table header” 的縮寫，用于定義表格的表頭單元格。在 < tr > 標簽內部使用 < th > 標簽來創建表頭單元格；
< td > 是 “table data” 的縮寫，用來定義表格中的單元格，也就是表格里實際顯示數據的地方。通常要放在 < tr > 標簽內部，每一個 < td > 標簽對應表格中的一個單元格。
2、< button > 標簽：
< button > 是 HTML 中的標準標簽，用于創建一個按鈕元素。
3、< input type=“text” >：
< input > 是 HTML 里用于創建表單輸入元素的標簽。
type=“text” 明確了輸入框的類型為文本輸入框，用戶能夠在其中輸入任意文本內容。
text寫成password就會以掩碼形式（星星或圓點）出現。
4、< br >：
換行標簽。
二、CSS
CSS可以通過三種方式引入到 HTML 頁面中：
1、內聯樣式，直接在 HTML 元素的 style 屬性中編寫 CSS 樣式；
2、內部樣式表，在 HTML 頁面的 < head > 標簽內使用 < style > 標簽定義 CSS 樣式；
3、外部樣式表，將 CSS 代碼寫在獨立的 .css 文件中，然后在 HTML 頁面的 < head > 標簽內使用 < link > 標簽引入該文件。
CSS常用語法如下：
1、選擇器
選擇器用于指定 CSS 樣式要應用到的 HTML 元素，以下是幾種常見選擇器：
- 元素選擇器：通過元素名稱選擇 HTML 元素。
p {color: blue;
}//將所有 <p> 標簽內的文本顏色設置為藍色。
- 類選擇器：使用 . 開頭
.highlight {background-color: yellow;
}//HTML 中使用 class="highlight" 的元素背景顏色會變為黃色。
- ID 選擇器：使用 # 開頭
#header {font-size: 24px;
}//id="header" 的元素字體大小會被設為 24px。
- 屬性選擇器：根據元素的屬性及其值來選擇元素。
input[type="text"] {border: 1px solid gray;
}//給所有 type 屬性為 text 的 <input> 元素添加灰色邊框。
2、聲明塊
由一對花括號 { } 包裹，包含一個或多個聲明，每個聲明由屬性和值組成，用冒號 : 分隔，聲明之間用分號 ; 分隔。
p {color: red;font-size: 16px;
}
3、常用屬性及值
- 文本相關
color：設置文本顏色。
font-size：設置字體大小。常用單位:像素px - 盒模型相關
width 和 height：設置元素的寬度和高度。
margin：設置元素的外邊距，即元素與其他元素之間的距離。
padding：設置元素的內邊距，即元素內容與邊框之間的距離。
border：設置元素的邊框 - 背景相關
background-color：設置元素的背景顏色。
background-image：設置元素的背景圖像。
div {background-image: url('image.jpg');
}
三、JS
1、Vue 實例對象：
Vue 實例對象本質上是 JavaScript 對象，Vue.js 基于JavaScript 編寫的一個前端框架。new Vue() 會創建一個新的 Vue 實例，傳入配置對象：el、data、methods 等屬性。
el： 用于指定 Vue 實例的掛載點；
data： 用于定義實例的數據，初始化數據；
methods： 用于定義實例的方法。
格式示例如下：
new Vue({el: '#app',data: {message: 'Hello, Vue!',count: 0},methods: {greet() {alert(this.message);},increment() {this.count++;}}
});
2、@click 指令：
@click 是 Vue.js 中的事件綁定指令，它是 v-on:click 的縮寫形式。v-on 指令用于監聽 DOM 事件，而 @click 則專門用于監聽鼠標點擊事件。當用戶點擊這個按鈕時，就會執行 @click 后面指定的表達式或方法。
3、v-for 指令：
v-for 是 Vue.js 提供的一個用于循環渲染的指令，可以動態生成表格行；
語法格式： item in items；
items： 是一個數組或對象（通常是Vue 實例 data 選項中的一個數組，通過 axios 從后端獲取數據后賦值給 depts）：
item： 是當前循環到的數組元素或對象屬性。
4、:key 綁定：
:key 是一個特殊的屬性，用于給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素。保證了渲染效率和準確性。
5、v-model 指令：
v-model 是 Vue.js 提供的一個非常實用的指令，它實現了表單輸入元素和 Vue 實例數據之間的雙向綁定。
<div id="user"><input type="text" v-model="newDept.name"><br><button @click="addDept">添加</button>
</div>
v-model=“newDept.name” 表明輸入框的內容和 newDept.name 屬性綁定。newDept 是 Vue 實例 data 選項里定義的一個對象，name 是該對象的一個屬性。
6、axios.請求（）.then（以axios.get為例）：
loadDepts(){axios.get('http://localhost:8080/selectAll').then(response=>{this.depts=response.data.data;//Javascript不加;也是可以的})
}
axios.get 方法： 返回一個 Promise 對象,是用于處理異步操作的對象，它有三種狀態：進行中pending、已成功fulfilled和已失敗rejected
then ： 是 Promise 對象的一個方法，用于處理 Promise 成功的情況，它接受一個回調函數作為參數。
7、data的理解：
服務器返回的data字段： 在使用 axios 發送請求并獲取服務器響應時，服務器返回的數據通常會包含在響應對象response的 data 字段中。
Vue實例中的data： 在 Vue 中，data 是一個選項，用于定義 Vue 實例的數據對象。
response.data.data中： 第一個 data 是 axios 響應對象的屬性，用于獲取服務器返回的整體數據；第二個 data 是服務器返回數據中的一個字段，用于獲取具體需要的數據。
8、箭頭函數：
response => { this.depts = response.data.data;
}
語法形式：(參數列表) => { 函數體 }；
使用時機: 當 axios.get 發起的請求成功完成，服務器返回響應后，Promise 對象的狀態會從 pending 變為 fulfilled。此時，then 方法中傳入的回調函數就會被調用；
優點: 語法簡潔。
傳統函數定義方式：
function(response) {this.depts = response.data.data;//將服務器返回的數據中的data字段賦值給this.depts
}
四、完整代碼展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>部門信息列表</title>
<!-- vue的核心庫vue2.0 渲染數據-->
<!-- <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>--><script src="js/vue2.js"></script> <!--保存到本地加載比較快-->
<!-- axios庫-->
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>--><script src="js/axios.js"></script><style>#app table{//這是一個組合選擇器，它表示選擇 id 為 app 的元素內部的所有 <table> 元素border:solid 1px red;margin:0 auto;width:700px;font-size:20px;border-collapse:collapse;}tr,td{border:solid 1px red;}</style>
</head>
<body>
<div id="app"><div id="user"><input type="text" v-model="newDept.name"><br>
<!-- br換行--><button @click="addDept">添加</button></div><table><tr><th>ID</th><th>部門名稱</th><th>創建時間</th><th>更新時間</th><th>操作</th></tr><tr v-for="dept in depts":key="dept.id"><td>{{dept.id}}</td><td>{{dept.name}}</td><td>{{dept.createTime}}</td><td>{{dept.updateTime}}</td><td><button @click="deleteDept(dept.id)">刪除</button><button @click="updateDept(dept.id)">更新</button></td>
<!-- td是單元格--></tr></table>
</div>
<!--上面是css，下面是js-->
<script>new Vue({el:"#app",//這里的 '#app' 是一個 ID 選擇器，表示 Vue 實例會掛載到 HTML 文檔中 id 為 app 的元素上。data:{newDept:{name:""},depts:[]//渲染的數據},mounted(){//生命周期鉤子，當前頁面完整加載之后執行this.loadDepts();},methods:{//1.加載部門列表loadDepts(){axios.get('http://localhost:8080/selectAll').then(response=>{this.depts=response.data.data;//Javascript不加分號也是可以的})},//2.刪除方法，請求后端刪除的apideleteDept(id){if(confirm("確認刪除該條記錄嗎?")){axios.delete(`http://localhost:8080/dept/${id}`).then(()=>this.loadDepts()//重新加載)}},//3.請求后端的添加數據接口addDept(){if(this.newDept.name==''){alert("未添加數據");return;}axios.post("http://localhost:8080/insertInfo",this.newDept).then(//箭頭函數、回調函數()=>{this.newDept.name="";this.loadDepts();})},//4.修改數據接口updateDept(id){axios.get(`http://localhost:8080/getOne/${id}`).then(response=>{let a=response.data.data;console.log(a);//把數據打印到瀏覽器控制臺let newName=prompt("請輸入部門新名稱",a.name);//輸入框//構造新的對象let updateDept={id:a.id,name:newName,createTime:a.createTime,updateTime:new Date().toISOString()//前端獲取時間的方式}//發送請求axios.put("http://localhost:8080/updateDept",updateDept).then(()=>{this.loadDepts();//刷新頁面})})}}})
</script>
</body>
</html>
結語
通過對 HTML、CSS、JS 相關知識的梳理，從標簽到指令，希望能幫大家了解前端基礎。前端技術發展迅速，學習之路漫漫，如果有錯誤之處期待與大家在評論區交流，一起進步！
)
