Vue

概況：

Vue是一款用于構建用戶界面的漸進式的JavaScript框架。（官方;https:://cn.vuejs.org/)

框架:就是一套完整的項目解決方案，用于快速構建項目。

優點:大大提升前端項目的開發效率。

缺點:需要理解記憶框架的使用規則。（參照官網)

快速入門

<script type="importmap">{"imports": {"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"}}
</script><div id="app">{{ message }}</div><script type="module">import { createApp, ref } from 'vue'createApp({setup() {const message = ref('Hello Vue!')return {message}}}).mount('#app')
</script>

Vue常用指令

指令：HTML標簽上帶有 V- 前綴的特殊屬性，不同的指令具有不同的含義；可以實現不同的功能

常用的指令

v-for

作用：列表渲染，遍歷容器的元素或者對象的屬性

語法：

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

說明：items 為遍歷的數組

? ? ? ? item 為遍歷出來的元素

? ? ? ? index 為索引/下標，從0開始；可以省略，省略index語法：v-for="item in items"

v-bind

作用：動態為HTML標簽綁定屬性值，如設置href，src，style樣式等。

語法：v-bind：屬性名="屬性值"

簡化：:屬性名="屬性值"

v-if & v-show

作用：這兩類指令，都是用來控制元素的顯示與隱藏的

v-if

? ? ? ? ·語法：v-if="表達式",表達式為true，顯示；false隱藏

? ? ? ? ·原理：基于條件判斷，來控制創建或移除元素節點（條件渲染）

? ? ? ? ·場景：要么顯示，要么不顯示，不頻繁切換場景

? ? ? ? ·其他：可以配合v-else-if / v-else 進行鏈式調用判斷

例如

v-show

? ? ? ? ·語法：v-show="表達式",表達式為true，顯示；false隱藏

? ? ? ? ·原理：基于CSS樣式display來控制顯示與隱藏

? ? ? ? ·場景：頻繁切換顯示隱藏的場景

v-model

作用：在表單元素上使用，雙向數據綁定。可以方便的獲取或設置表單項數據

語法：v-model=“ 變量名”

v-model 中綁定的變量必須在data中定義

例如

定義數據模型：searchForm是一個對象，使用v-model="searchForm.name"綁定

v-on

·作用：為html標簽綁定事件（添加事件監聽）

·語法：

? ? ? ? ·v-on:事件名="方法名"

? ? ? ? ·簡寫為 @事件名=""

調用方法

聲明方法要在data平行的區域，并且是methods:{將方法寫在此處}

Ajax

介紹：Asynchronous JavaScript and XML，異步的JavaScript和XML

作用：

? ? ? ? ·數據交換：通過Ajax可以給服務器發送請求，并獲取服務器響應的數據。

? ? ? ? ·異步交互：可以在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁的技術，如：搜索聯想、用戶名是否可用的校驗等等

同步與異步的區別

Axios

? ? ? ? 介紹：Axios 對原生的Ajax進行了封裝，簡化書寫，快速開發。

? ? ? ? 官網：https://www.axios-http.cn/

? ? ? ? 步驟：

? ? ? ? ????????·引入Axios的js文件

? ? ? ? ????????·使用Axios發送請求，并獲取響應結果

簡寫

為了方便起見，Axios為所有支持的請求方法提供了別名

格式：axios.請求方式(url [,data[,config]])

例如：一下兩種請求方法

async&await

通過async，await可以讓異步變為同步操作。ssyvc就是來聲明一個異步方法，await是來等待異步任務執行

Vue生命周期

聲明周期：指一個對象從創建到銷毀的整個過程

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

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