vue基礎

資料的頁面展示{{}} ,v-once,v-html

資料繫結屬性v-bind,簡寫用:

事件呼叫：v-on,簡寫：@

V-if與v-show，異同

v-for 用in和of都一樣，迴圈陣列的時候，可以有兩個引數，迴圈物件時，可以有三個引數

style與class繫結

計算屬性

表單雙向繫結

新建vue單頁面應用

一共有兩種方式：

1. vue/cli

2. vite

vue/cli

vue/cli是基於webpack

npm install -g @vue/cli

這樣就可以在全域性安裝vue/cli，輸入命令，檢視安裝是否成功

vue  --version
#or
vue -V
 

能出現對應的vue/cli的版本，即為安裝成功。

在這一步過程中，很可能會出錯，出錯率10%左右，如果安裝明明成功了，但是無法顯示版本號，並且提示vue not ...command，則為環境變數需要配置。

npm list -g

檢視全域性環境下，包安裝路徑，複製其，配置電腦的環境變數，重啟cmd即可。

vue/cli安裝成功後，即可新建專案

使用vue/cli新建專案有兩種方式

命令列新建

vue create hello-world

中間經過若干步驟，按需匯入使用。

O Babel   把es6等高階程式碼轉成低端程式碼，供低版本瀏覽器使用
O TypeScript     TS微軟新出的一門語言，可以用來生成js
o Progressive Web App (PWA) Support      移動端app支援
o Router    路由
o Vuex      一種統一狀態管理工具（存資料的）
o CSS Pre-processors       css前處理器支援（可以用來把less等高階css語言轉成普通css）
• Linter / Formatter     （程式碼風格）
o Unit Testing      測試
O E2E Testing       測試
 

vue ui新建（不推薦）

vue ui

正常情況下，會自動開啟預設瀏覽器頁面，進行配置

如果出錯，檢查把防毒軟體都關掉

使用vite新建

不基於webpack，速度更快，體積更小，僅支援vue3.x，不支援2.x，並且目前還不是很穩定，正在完善中，建議將來使用。

npm init vite-app hello-world

如果報錯：

Need to install the following packages:
create-vite-app
Ok to proceed? (y)

輸入y進行安裝create-vite-app即可。