前端基礎 JS Vue3 Ajax

一、JS

alert(' .... ') //彈出框

console.log(' ....... ') //輸出到控制臺瀏覽器

JS引入方式：1、內部腳本：將JS代碼定義在HTML頁面中位于<script></script>標簽之間

? ? ? ? ? ? ? ? ? ? ? ?2、外部腳本：將JS代碼寫在外部JS文件中，在HTML頁面中使用

????????????????????????????????<script src = ' ./js/eventDemo.js'></script>引入? ? ? (src就是js的地址)

在js中引入其他js：import { printLog } from "地址",{ }中間是其他js文件中的函數，這就是模塊化JS

要想使用JS文件中的函數：1、這個函數必須加上export 關鍵字

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、在html頁面中，必須加上type=”module“代表使用的時模塊化的js

html中：
<script src = "js/eventDemo.js" type="module"> 
</script>eventDemo.js：
import {printlog} from "./utils.js" ;//click: 鼠標點擊事件document.querySelector('#b2').addEventListener('click', () => {printlog("我被點擊了...");})utils.js:
//export使代碼能被別的地方使用
export function printlog(msg){console.log(msg);
}

1、函數

函數：是被設計用來執行特定任務的代碼塊，方便程序的封裝復用。

通過function關鍵字進行定義，語法：

  //1. 函數的定義-具名函數function add(a, b) {return a + b;}let sum = add(10, 20);alert(sum); //2. 函數的定義-匿名函數//2.1 函數表達式let add = function(a,b){return a-b;}let result = add(20,10);alert(result);//2.2 箭頭函數let add = (a , b)=> { return a + b;}let result = add(100,200);alert(result);

2、自定義對象

let 對象名 = {屬性名1：屬性值1，屬性名2：屬性值2，屬性名3：屬性值3，方法名： function (形參列表) { }}如：let user = {name: 'Tom',age: '18',gender: '男',sing: function () {alert(this.name + '悠悠地唱著最炫的民族風')}//方法簡化方式：sing() {alert(this.name+'唱著最炫的民族風')}
}調用格式：對象名.屬性名；
對象名.方法名（）；console.log(user.name);
user.sing();

注：在自定義對象時盡量不要使用箭頭函數，因為箭頭函數中的this并不指向當前對象，而是指向當前對象的父級對象。

3、JSON

JSON.stringify (...) 將JS對象轉為JSON格式的字符串

JSON.parse (...)?JSON格式的字符串轉為JS中的對象?

    let user = {name: 'Tom',age: '18',gender: '男',sing() {alert(this.name + '悠悠地唱著最炫的民族風');}}//js對象——>json字符串(JSON.stringify)alert(JSON.stringify(user));//json字符串——>js對象(JSON.parse)  let personJson = '{"name":"Tom","age":"18","gender":"男"}';alert(JSON.parse(personJson).name);

4、DOM

將HTML文件中，所有的元素都封裝成了JS對象，采用面向對象的方式來操作頁面中的所有的元素。

Document：整個文檔對象? ? 整個HTML

ELement：元素對象? ? ? ? ? ? ?每一個html的標簽都會封裝成一個元素對象 <html> <head> <body>等

Attribute：屬性對象? ? ? ? ? ? ? 如 href等屬性

Text：文本對象? ? ? ? ? ? ? ? ? ? ?文本內容

Comment：注釋對象? ? ? ? ? ? 注釋

DOM操作核心思想：將網頁中所有的元素當作對象來處理。

操作步驟:

獲取要操作的DOM元素對象
操作DOM對象的屬性或方法（查看文檔或AI）? ?

document.querySelector('選擇器') 根據css選擇器來獲取匹配到的第一個元素

document.querySelectorAll('選擇器')? ? ? ? ? ? ? ? ? ? ? ? ? ? ?獲取匹配到的所有元素

5、事件監聽

語法：事件源.addEventListener('事件類型'，事件觸發執行的函數)；

三要素：事件源：哪個DOM元素觸發了事件

? ? ? ? ? ? ? 事件類型：用什么方式觸發，比如：鼠標單擊 click

? ? ? ? ? ? ? 事件觸發執行的函數：要做什么事

 <input type="button" id="btn1" value="點我一下試試1"><input type="button" id="btn2" value="點我一下試試2"><script>//事件監聽，可以多次綁定同一事件document.querySelector('#btn1').addEventListener('click', function () {alert('試試就試試');});document.querySelector('#btn1').addEventListener('click', function () {alert('我還就得試試就試試');});</script>

常見事件：

click：鼠標點擊
mouseenter：鼠標移入
mouseleave：鼠標移出

keydown：鍵盤按下觸發
keyup：鍵盤抬起觸發

focus：獲得焦點觸發
blur：失去焦點觸發

input：用戶輸入時觸發
submit：表單提交時觸發

二、Vue3?

Vue是一款用于構建用戶界面的漸進式的JavaScript框架。

1、使用Vue

引入Vue模塊
創建Vue程序的實例化，控制視圖的元素
準備元素，被Vue控制

<body><div id="app"><!-- {{}}插值表達式渲染數據 --><h1>{{message}}</h1><h1>{{count}}</h1></div><script type="module">//引入模塊import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';//創建應用實例(調用createApp函數,在里面傳遞一個對象{})createApp({// 準備數據//對象中聲明方法data，之后聲明方法的返回值，返回值就是所要定義的數據 ，要返回對象，返回值就是對象，對象中聲明變量，變量的值就是數據 */data() {return {count: 100,message: 'Hello Vue!'}},}).mount('#app');/* 作用：創建的createApp實例，接管了id為"app"的div標簽 */</script>

2、常用指令

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

item 為遍歷的數組
item 為遍歷出來的元素
index 為索引/下標從0開始；可以省略省略index語法：v-for = " item in items"?
key：給元素添加唯一標識，便于vue進行列表項的正確排序復用，提升渲染性能，推薦使用id作為key。

v-bind:? ? v-bind:屬性名=“屬性值”??

? ? ?簡化：:屬性名= “屬性值”

v-if:? ? ? v-if=" 表達式?"? ? ? 要么渲染，要么不渲染，不頻繁切換的場景

v-show：? v-show = '' 表達式?''? ?全都渲染，控制顯示與隱藏，用于頻繁切換的場景

v-model：?v-model = " 變量名?''

v-on： v-on:事件名 = “方法名”

? ? ? ?簡寫： @事件名 = “ ... ”

 <!-- 表格主體內容 --><tbody><!-- 想讓哪個標簽循環展示多次，就在哪個標簽上使用v-for指令 --><tr v-for="(e, index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender ==1?'男' : '女'}}</td><!-- 插值表達式不能出現在標簽內部 --><!-- <td><img class="avatar" src="{{e.image}}" alt="{{e.name}}"></td> --><td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td><!-- v-if 控制元素的顯示與隱藏 --><td><span v-if="e.job == 1">班主任</span><span v-else-if="e.job == 2">講師</span><span v-else-if="e.job == 3">學工主管</span><span v-else-if="e.job == 4">教研主任</span><span v-else-if="e.job == 5">咨詢師</span><span v-else>其他</span></td><!-- v-show 控制元素的顯示與隱藏<td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">講師</span><span v-show="e.job == 3">學工主管</span><span v-show="e.job == 4">教研主任</span><span v-show="e.job == 5">咨詢師</span></td> --><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">編輯</button><button type="button">刪除</button></td></tr></tbody></table>

//使用v-model分別將數據雙向綁定
<input type="text" id="name" name="name" v-model="searchForm.name" placeholder="請輸入姓名">
<select id="gender" name="gender" v-model="searchForm.gender">
<select id="position" name="position" v-model="searchForm.job"><button type="button" v-on:click="search">查詢</button><button type="button" @click="clear">清空</button><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//創建應用實例(調用createApp函數,在里面傳遞一個對象{})createApp({ // 準備數據data() {return {searchForm: {//定義數據模型，采集員工搜索表單數據   ，是一個對象name: '',gender: '',job: ''}}},//聲明methods屬性，在里面定義方法methods: {//方法search(){//將搜索條件，輸出到控制臺console.log(this.searchForm);},clear(){this.searchForm = {name: '',gender: '',job: ''}}}</script>

createApp中data是聲明數據的

? ? ? ? ? ? ? ? ? ? 與data平級的method: {} 是定義方法。

三、Ajax

作用：通過ajax可以向服務器端發送請求，并獲取服務器響應的數據。

? ? ? ? ? ?異步交互：可以在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁的技術。

<body><input type="button" value="獲取數據GET" id="btnGet"><input type="button" value="操作數據POST" id="btnPost"><script src="js/axios.js"></script> //這里的js是已經提供的，所以自己引入官方js文件<script>//發送GET請求document.querySelector('#btnGet').addEventListener('click', () => {///* 事件監聽器 */axios({method: 'GET',url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',}).then((result) => {  //成功回調函數console.log(result.data);  }).catch((error) => {   //失敗回調函數console.log(error);})})//發送POST請求document.querySelector('#btnPost').addEventListener('click', () => {axios({method: 'POST',url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',data: 'id=1'  //post請求方式，請求體的數據}).then((result) => {   //成功回調函數console.log(result.data);}).catch((error) => {   //失敗回調函數console.log(error);})})</script>
</body>

另一種寫法（推薦寫法）：

axios.請求方式（url [,data[,config]]）

<body><input type="button" value="獲取數據GET" id="btnGet"><input type="button" value="操作數據POST" id="btnPost"><script src="js/axios.js"></script><script>//發送GET請求document.querySelector('#btnGet').addEventListener('click', () => {axios.get(' https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {console.log(result.data);}).catch((error) => {console.log(error);})console.log('++++++++++++++++++++++++++++');})//發送POST請求document.querySelector('#btnPost').addEventListener('click', () => {axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => {console.log(result.data);}).catch((error) => {console.log(error);})})</script>
</body>

使用async & await使異步變為同步

await關鍵字只在async函數內有效，await關鍵字取代then函數，就不用寫成功失敗回調了。

  methods: {//方法async search() { //async(加在search前) + await（加在axios請求服務器前）讓異步操作變為同步//讓異步變成同步操作，即會等待服務器響應let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`)this.empList = result.data.data }

?Vue生命周期

生命周期八個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法（鉤子方法）

聲明與生命周期相關的鉤子方法，需要與data，method 平級，

必須掌握的 mounted? 在這個方法中可以發送請求，獲取數據，用于加載就查詢一次

 //鉤子函數mounted(){//當頁面加載完成后，自動調用search方法this.search();}