VUE超詳細入門

1.什么是 Vue.js

2.Vue.js 優點

Vue中的第一個hello world

Vue指令

?v-model

v-bind

v-on

v-if

v-show

v-for

Vue 實例生命周期

從傳統架構轉向單文件架構(通過組件拼接)

安裝element-ui使用

1.什么是 Vue.js

Vue (讀音 /vju ? /，類似于 view) 是一套用于構建用戶界面的漸進式框架。Vue

的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。

Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成為前端三

大主流框架！地址:https://v2.cn.vuejs.org/

2.Vue.js 優點

1.體積小壓縮后 33K

2.更高的運行效率,用 JQuery 或者原生的 JavaScript DOM 操作函數對 DOM 進行頻繁操作的

時候，瀏覽器要不停的渲染新的 DOM 樹，導致頁面看起來非常卡頓。

基于虛擬 dom，一種可以預先通過 JavaScript 進行各種計算，把最終的

DOM 操作計算出來并優化的技術，最后在計算完畢才真正將 DOM 操作提交。

3.雙向數據綁定,簡化 Dom 操作

通過 MVVM 思想實現數據的雙向綁定，讓開發者不用再操作 dom 對象,

把更多的精力投入到業務邏輯上.

MVVM 是 Model-View-ViewModel 的簡寫。MVVM 就是將其中的 View 的

狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。

如圖如果使用dom來操作需要拿到文本框對象的值賦給上面div中的對象，反復的操作對象不利于我們寫業務邏輯，所以vue簡化了這一操作，不用再操作對象.

此圖就反映了mvvm思想，model就是data數據，dom就是標簽對象，vue框架實現了數據和標簽的雙向綁定，使data數據在改變時dom中的值也隨之改變，dom標簽中的值改變data數據也隨之改變

Vue中的第一個hello world

在vue官方中用這在線地址找到內容并保存。（這相當于一個vue的jar包）

在左側的js中將vue.js導入進去然后src引用官方中的第一hello world就實現了

接下來我們對這個hello world解析

{{}}插值表達式在vue中用來獲取data中的值，el和標簽綁定通過id獲取

Vue指令

指令帶有前綴 v- 開頭，以表示它們是 Vue 提供的特殊屬性。

如圖我們用插值表達式{{}} v-text v-html也都可以實現，那么它們有什么區別呢？

答：插值表達式會將msg1中的你好賦值給插值表達式{{}}后面的vue不產生影響

? ? ? ? 而v-text和v-html會將標簽vue中的vue覆蓋掉，(就是把你好放在了這個p標簽里)

v-text和{{}}都是拿到msg1文本然后賦值，而v-html還可以對這個msg1文本進行解析里面的標簽

?v-model

作用是便捷的設置和獲取表單元素的值

綁定的數據會和表單元素值相關聯

綁定的數據<---->表單元素的值雙向數據綁定

這里先解釋一點： body標簽中需要一個最大的div標簽，這是因為div和這個vue.js用el綁定之后在這個最大的div里的子標簽都可以使用這個new Vue對象了（不直接在body上綁定是因為vue不允許）

再來看這個圖，邏輯是通過<input>文本框標簽通過 v-model實現了和msg的雙向數據綁定，更改文本框的值，這個data中的msg就會改變(在代碼中看不見)，之后又通過標簽使用插值表達式對msg進行雙向數據綁定。最終則會實現在文本框中打字，標簽也會顯示出來。（總結：也就是說文本框和對msg）

v-bind

對圖片的屬性進行雙向數據綁定

如圖中所示顯示一張圖片僅僅用src"地址"這樣會把src圖片寫死了，用v-bind可以綁定data中的img，通過改變data中的img從而改變圖片.（這里v-bind：可以簡寫成：src默認使用（v-bind））

我們在改變前端一些樣式的時候也會用到

我們定義了一個.imgcss，然后可以用v-bind：class={imgcss:isActive},將isActive寫在data里設為true，則在使用時默認綁定的就是這個樣式，當不想用這個樣式時可以用按鈕添加事件將isActive改變為false

v-on

作用是為元素綁定事件

事件名不需要寫 on 指令可以簡寫為@（例如v-on：click和@click）

綁定的方法定義在 methods 屬性中,可以傳入自定義參數

這里強調一點:在methods方法中調用data中的數據必須要用this

v-if

作用是根據表達式的真假切換元素的顯示狀態

本質是通過操縱 dom 元素來切換

顯示狀態表達式的值為 true ，元素存在于 dom 中，為 false，從 dom 中移除

v-show

作用是根據真假切換元素的顯示狀態原理是修改元素的 display，實現顯示隱藏指令后面的內容，最終都會解析為布爾值

值為 true 元素顯示，值為 false 元素隱藏

數據改變之后，對應元素的顯示狀態會同步更新

這里強調一下：v-if和v-show的區別是前者在dom中如果為false直接移除，而后者則是display將其隱藏，總的來說頻繁的切換用v-show，反之使用 v-if，前者的切換消耗小。

v-for

v-for的使用更像是java中的增強for循環，每一個值用插值表達式輸出出來

對于一個表格來說前面的值可以為兩個一個為對象，一個為索引。

Vue 實例生命周期

每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數

據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時

在這個過程中也會運行一些叫做 生命周期鉤子 的函數，這給了用戶在不同階段添

加自己的代碼的機會。（new 了一個vue的對象之后，在這個運行過程中的一些函數例如java中的創建一個構造函數在創建時就初始化了一些東西）

鉤子函數和methods、data是平級的

運行后就可看到輸出到控制器中，所以我們在每一個時間段想要執行什么就在哪個函數里面寫。

從傳統架構轉向單文件架構(通過組件拼接)

什么是node?

服務器端 JavaScript：Node.js 讓 JavaScript 可以在服務器端運行，這樣開發者可以使用同一種語言（JavaScript）來編寫前端和后端代碼，實現全棧開發。
事件驅動和非阻塞I/O模型：Node.js 是基于事件驅動和非阻塞I/O 的模型，這使得它能夠處理大量并發連接，非常適合構建高性能、可伸縮的網絡應用。
模塊化：Node.js 支持 CommonJS 規范的模塊系統，使得代碼可以以模塊的形式組織、管理和重用。
包管理器 npm：Node.js 自帶 npm（Node Package Manager），是世界上最大的開源庫生態系統，開發者可以通過 npm 輕松地安裝、分享和管理 JavaScript 包和依賴項。
文件操作：Node.js 提供了豐富的文件操作 API，使得開發者可以輕松地對文件進行讀取、寫入和操作。
跨平臺：Node.js 可以運行在多種操作系統上，包括 Windows、Mac OS 和各種 Linux 發行版，具有較高的可移植性。
構建工具和任務自動化：由于 Node.js 生態系統豐富，開發者可以使用各種構建工具和任務自動化工具（如 Gulp、Webpack 等）來簡化開發流程、優化代碼和資源管理。

??類似與java中的maven

需要的環境

Node.js（沒有node環境創建不了vue項目）

簡單的說 Node.js 是一個前端 js 運行環境或者說是一個 JS 語言解釋器。

npm

npm 是 Node.js 的包管理工具，用來安裝各種 Node.js 的擴展。npm 是

JavaScript 的包管理工具，也是世界上最大的軟件注冊表。有超過 60 萬個

JavaScript 代碼包可供下載。npm 讓 JavaScript 開發人員可以輕松地使用

其他開發人員共享的代碼。

組件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建

單頁面應用變得易如反掌。( 我們在沒有組件路由之前網站上訪問不了vue組件 )

安裝

vue-router 是一個插件包，所以我們還是需要用 npm 來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。

npm i vue-router@3.5.3

安裝成功之后，我們創建一個router包里面放一個js文件，先必須導入再包中導入router和Vue,之后再導入我們需要的組件， Vue.use(router) 的作用是在 Vue.js 應用中安裝并注冊 Vue Router，使得我們可以在應用中使用 Vue Router 提供的各種路由功能和組件。path就是我們配置的網站可以訪問到的路徑，最后導出這個rout對象(雖然默認訪問的是App組件但是通過路由配置路徑'/'即可在什么也沒有時訪問到index組件)