ue

Vue基礎

框架

什么是MVVM: MVVM 是 Model-View-ViewModel 的縮寫。

Model代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯。

View 代表UI 組件，它負責將數據模型轉化成UI 展現出來。

ViewModel 監聽模型數據的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。

數據會綁定到viewModel層并自動將數據渲染到頁面中，視圖變化的時候會通知viewModel層更新數據

在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。

ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。 核心：數據驅動、組件化思想 單頁面優缺點: 優點：Vue 的目標是通過盡可能簡單地 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。

缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、后退。

基礎語法

模板語法： 1.文本：Message:{{msg}} 2.原始HTML 3.Attribute:

4.JavaScript:{{ message.split('').reverse().join('') }} class與style綁定： 1.2.3.<div v-bind:style="{color:activeColor, fontSize:fontSize+'px'}> 4.

條件渲染

v-if:

Vue is awesome!

Oh no

Woo

v-show:

Hello!

v-if vs v-show: v-if會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀、重建。且是惰性的，如果初始渲染條件為假，則什么也不做，直到條件第一次變真。 v-show：無論條件為什么，元素都會被渲染，只是簡單地基于css變化。 v-if與v-for一同使用時，v-for有更高優先級。v-if會被應用于每個v-for循環中。

計算屬性和偵聽器

計算屬性 var vm=new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function () { // this 指向 vm 實例 return this.message.split('').reverse().join('') } } })

偵聽器： var vm=new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName=val + ' ' + this.lastName }, lastName: function (val) { this.fullName=this.firstName + ' ' + val } } })

列表渲染

例子：

• {{ item.message }}

就地更新策略：如果數據項的順序改變，Vue將不會移動DOM元素來匹配數據項的順序，而是就地更新每個元素。并且確保它們在每個索引位置正確渲染。 key：使用 key 來給每個節點做一個唯一標識，Diff 算法就可以正確地識別此節點，找到正確的位置區插入新的節點 所以一句話，key 的作用主要是為了高效的更新虛擬 DOM

事件處理

內聯處理器：Say hi 需要在內聯語句處理器中訪問原始事件的DOM事件，可以使用特殊變量$event Submit methods: { warn: function (message, event) { // 現在我們可以訪問原生事件對象 if (event) { event.preventDefault() } alert(message) } } 事件修飾符：

1. 1. .stop阻止單擊事件繼續傳播
2. 2. .prevent提交事件不再重載頁面
3. 3. .capture添加事件監聽器時使用事件捕獲模式，內部元素的事件先在此處理，然后才交由內部元素進行處理
4. 4. .self只當在event.target是當前元素自身時觸發處理函數，事件不是從內部觸發的
5. 5. .once點擊事件將只會觸發一次
6. 6. .passive對應addEventListener中的passive，不能與.prevent一起使用，.prevent會被忽略。

...

1. 1. 按鍵修飾符 keyup.enter keyup.page-down 8)按鍵碼：keyup.f1 9）系統修飾符：.ctrl, .alt, .shift, .meta 10）鼠標修飾符：.left, .right, .middle

表單輸入綁定v-model

修飾符：

1. 1. .lazy: 在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉為在 change 事件_之后_進行同步
2. 2. .number: 自動將用戶的輸入值轉為數值類型
3. 3. .trim: 自動過濾用戶輸入的首尾空白字符

組件

插槽 具名插槽：

A paragraph for the main content.

And another one.

動態組件、異步組件

動態組件保持狀態：keep-alive

異步組件：。Vue 只有在這個組件需要被渲染的時候才會觸發該工廠函數，且會把結果緩存起來供未來重渲染。 new Vue({ // ... components: { 'my-component': ()=> import('./my-async-component') } })

父子組件

方法調用： 1）父組件調用子組件方法

子組件

2）子組件調用父組件： 父組件：

子組件：

通信： 1）父傳子 父組件：prop單向數據流，父級prop的更新會向下流動到子組件中，反過來不行。這樣會防止從子組件意外變更父級組件的狀態。

子組件：

2）子傳父 父組件：

自定義事件

自定義組件的v-model：一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復選框等類型的輸入控件可能會將 value attribute 用于不同的目的。model 選項可以用來避免這樣的沖突 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > }) 將原生事件綁定至組件： 1. 2.$listener 3. .sync

生命周期

生命周期：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 父子組件生命周期： 1.父組件：beforeCreate->created->beforeMount 2.子組件：->beforeCreate->created->beforeMount->mounted 3.父組件： ->mounted->beforeDestroy 4.子組件：->beforeDestroy->Destroyed 5.父組件：->Destroyed 過渡、動畫： 當插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理： 自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。 如果過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的 nextTick 概念不同)

可復用性、組合

混入：混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。

自定義指令

Vue.directive('focus', { inserted: function(el){ el.focus() } }) 鉤子函數： bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。 inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。 componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。 unbind：只調用一次，指令與元素解綁時調用。

Vue.directive('demo', { bind: function (el, binding, vnode) { var s=JSON.stringify el.innerHTML='name: ' + s(binding.name) + '
' + 'value: ' + s(binding.value) + '
' + 'expression: ' + s(binding.expression) + '
' + 'argument: ' + s(binding.arg) + '
' + 'modifiers: ' + s(binding.modifiers) + '
' + 'vnode keys: ' + Object.keys(vnode).join(', ') } })

new Vue({ el: '#hook-arguments-example', data: { message: 'hello!' } }) 過濾器 {{ message | capitalize }}

filters: { capitalize: function (value) { if (!value) return '' value=value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }

Vue.filter('capitalize', function (value) { if (!value) return '' value=value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })

new Vue({ // ... })

Vue源碼

兩個核心API：h.js, patch(app, vnode)

虛擬DOM和diff算法

vdom：虛擬dom，用JS模擬DOM，因為DOM操作昂貴，將DOM對比操作放在JS層，提高效率 diff：linux的基礎命令，vdom中使用時為了更快找出需更新的節點。 實現：patch(container, vnode) patch(vnode, newVnode) 核心邏輯：createElement，updateChildren 解析模板 模板本質是字符串，有邏輯，如v-if，v-for。與html很像，但是有區別，html無邏輯，最終要轉換為html來顯示 render函數： vm._c其實相當于snaddom中的h函數。render函數執行后，返回vnode。 1）with函數 2）類似vdom的h函數 updateComponent： updateComponent中實現vdom的patch，頁面首次渲染執行updateComponent，data中每次修改屬性，執行updateComponent。 數據響應式原理: 修改data屬性后，vue立刻監聽到，data屬性被代理到vm上

Vuex

State: state: { count: 0 },

this.$store.state.count

import { mapState } from 'vuex' ...mapState({})

Getter:就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

getters: { doneTodos: state=> { return state.todos.filter(todo=> todo.done) } }

Mutations: Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。

這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數

mutations: { increment (state) { // 變更狀態 state.count++ } }

Actions: Action 類似于 mutation，不同在于： Action 提交的是 mutation，而不是直接變更狀態。 Action 可以包含任意異步操作。 actions: { increment (context) { context.commit('increment') } } Modules: Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

Vue-router

基礎路由

動態路由匹配 { path: '/user/:id', component: User } this.$route.params 嵌套路由：借助router-view

編程式導航： router.push() router.replace(location,onComplete?,onAbort?)替換掉當前history的記錄 router.go(n)：在history記錄向前或向后幾步 命名路由： const router=new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })

鏈接到命名路由： User router.push({ name: 'user', params: { userId: 123 }}) 命名視圖：

User Settings

{ path: '/settings', // 你也可以在頂級路由配置命名視圖

component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions },

{ path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] } 重定向和別名： 1）

重定向：{ path: '/a', redirect: '/b' } 2）別名：/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。 { path: '/a', component: A, alias: '/b' } 路由組件傳參：使用props將組件和路由解耦 1）布爾模式：{ path: '/user/:id', component: User, props: true } 2）對象模式：{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } 3）函數模式：{ path: '/search', component: SearchUser, props: (route)=> ({ query: route.query.q }) } 路由模式： 1）默認hash模式（帶#），使用url的hash來模擬一個完整的url，于是當url改變時，頁面不會重新加載。 2）history模式：優美，利用history.pushState API完成URL跳轉，而無需重新加載頁面：mode: 'history'

進階路由

導航守衛：

1）全局前置守衛：

router.beforeEach((to, from, next)=>{})

2）全局解析守衛：

router.beforeResolve

3）全局后置鉤子：

router.afterEach((to, from)=>{})

4）路由獨享的守衛：beforeEnter: (to, from, next)=>{}

5）組件內的守衛：beforeRouterEnter(to,from,next){}, beforeRouteUpdate(to,from,next){}, beforeRouteLeave(to,from,next){} 路由元信息:=：定義路由的時候可以配置meta字段，通過遍歷$route.matched來檢查路由記錄中的meta字段。 過渡動效： 數據獲取： 1）導航完成后獲取：先完成導航，然后再接下來的組件生命周期茍子仲獲取數據。 2）導航完成之前獲取：導航完成前，在路由進入的守衛中獲取數據，在數據成功后執行。 滾動行為：只有在history模式才能使用。 scrollBehavior (to, from, savedPosition) { // return 期望滾動到哪個的位置 return { x: 0, y: 0 } } 路由懶加載 const Foo=()=> import('./Foo.vue') const router=new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

axios

特點：

1. 1. 從瀏覽器中創建 XMLHttpRequests
2. 2. 從 node.js 創建 http 請求
3. 3. 支持 Promise API
4. 4. 攔截請求和響應
5. 5. 轉換請求數據和響應數據
6. 6. 取消請求
7. 7. 自動轉換 JSON 數據
8. 8. 客戶端支持防御 XSRF 常用方法 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 攔截器： // 添加請求攔截器 axios.interceptors.request.use(function (config) { // 在發送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); });

// 添加響應攔截器 axios.interceptors.response.use(function (response) { // 對響應數據做點什么 return response; }, function (error) { // 對響應錯誤做點什么 return Promise.reject(error); });

刪除攔截器 const myInterceptor=axios.interceptors.request.use(function () {/.../}); axios.interceptors.request.eject(myInterceptor); VUE SSR

Vue3.0

Vite

新特性

組合式API Teleport 觸發組件選項createRenderer 單文件組件組合式API 單文件組件狀態驅動的CSS變量

變更

Global API模板指令 組件 渲染函數 生命周期 其它 斷開與目標 VM 的連接，地址：'javadebug', transport: '共享內存'

我們說到虛擬化，大多數人會想到VMware，VMware（威睿） 是全球桌面到數據中心虛擬化解決方案的領導廠商。今天就來介紹一下VMware的兩大產品Workstation和EXSi，看看從我們的個人電腦到企業的服務器虛擬化是怎么實現的。

VMware Workstation

VMware Workstation是一款功能強大的桌面虛擬計算機軟件，通過VMware Workstation這款軟件我們可以在單一的實體電腦桌面上創建出虛擬機。虛擬機是獨立運行于主機的，虛擬機的關機退出不會影響到你的主機操作系統，它可以運行自己的操作系統，安裝一些應用程序，并可以通過網絡來共享虛擬機。這樣我們就可以在一臺電腦上同時運行不同的操作系統了，方便我們進行學習，測試，開發等等。

Vmware Workstation安裝

1.官網下載最新的Vmware Workstation Pro 15.5。這里我們在Windows操作系統下安裝。

https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html

2.下載完成后雙擊運行，彈出界面點擊“下一步”。

3.我接受許可協議中的條款打勾，點擊“下一步”。

4.選擇安裝位置，根據需求勾選增強型鍵盤驅動程序，點擊“下一步”。

5.根據自身情況選擇是否檢查更新和加入體驗，點擊“下一步”。

6.默認創建桌面開始菜單快捷方式，點擊“下一步”。

7.準備就緒，點擊“安裝”。

8.安裝過程。

9.安裝完成，點擊“許可證”。

10.輸入許可證密鑰AV102-05Y9H-M89MQ-5ZN79-MZHR4。

11.VMware Workstation安裝完成。我們就可以創建虛擬機安裝不同的操作系統了。

創建虛擬機

1. 打開VMwear Workstation選擇創建新的虛擬機。

2. 典型安裝默認會將主流的配置應用在虛擬機的操作系統上。自定義安裝可以針對性的把一些資源加強，把不需要的資源移除，避免資源的浪費。這里選擇自定義安裝。

3. 默認下一步。

4. 選擇稍后安裝操作系統。

5. 這里選擇之后要安裝的操作系統，比如安裝選擇linux下的CentOS。

6. 為這臺虛擬機起個名稱，并指定虛擬機安裝位置。

7.根據自己的實際需求來分配處理器。在使用過程中CPU不夠的話是可以再增加的。

8. 內存也是要根據實際情況進行分配。

9.網絡連接類型的選擇，網絡連接類型一共有橋接、NAT、僅主機和不聯網四種。橋接、NAT能夠滿足虛擬機連接到外網。

• 橋接：虛擬機和宿主機在網絡上就是平級的關系，相當于連接在同一交換機上。虛擬機配置和宿主機同網段的IP信息進行聯網。
• NAT：NAT模式就是虛擬機要聯網得先通過宿主機才能和外面進行通信。自帶DHCP給虛擬機分配IP信息，然后通過NAT方式轉換為宿主機IP進行聯網。
• 僅主機：和NAT模式區別就是宿主機不會將數據包往外轉發，不能聯網。

橋接與NAT模式訪問互聯網過程，如下圖所示。

這里選擇網絡地址轉換模式。

10.選擇I/O控制器類型，默認推薦。

11. 選擇磁盤類型，默認推薦。

12．創建新虛擬機磁盤。

13.選擇磁盤大小，后面可以隨時增加，建議不要勾選立即分配所有磁盤，否則虛擬機會將20G直接分配給CentOS，會導致宿主機所剩硬盤容量減少。勾選將虛擬磁盤拆分成多個文件，這樣可以使虛擬機方便用儲存設備拷貝復制。

14.創建磁盤的名稱，默認即可。

15. 點擊自定義硬件。

選擇聲卡、打印機等不需要的硬件然后移除。

16. 點擊完成后，這樣一臺虛擬機就創建完成了。接下來就可以安裝操作系統了。

安裝操作系統

1. 編輯虛擬機設置。

2.選擇CD/DVD，再選擇使用ISO映像文件，瀏覽找到下載好的鏡像文件后確定。

最后開啟虛擬機安裝操作系統就行了。安裝CentOS參考。

VMware ESXi

企業服務器如果要虛擬化也是安裝VMware Workstation嗎？這里要介紹VMware的另一款產品ESXi用于企業服務器虛擬化。VMware服務器虛擬化產品VMware ESXi Server從本質上來說與VMware Workstation相同都是一款虛擬化軟件。但是ESXi簡化了VMware Workstation與主機之間的操作系統層，直接運行于裸機，其虛擬化管理就更加精簡，故ESxi的性能更好，安全性更高。ESXi是用于創建和運行虛擬機及虛擬設備的虛擬化平臺。ESXi是虛擬化的基礎，在虛擬化實施的第一步就是要安裝配置ESXi，然后在ESXi server中創建虛擬機。

Vmware ESXi安裝

1. 官網下載最新的Vmware ESXi 6.7。

https://my.vmware.com/web/vmware/details?downloadGroup=ESXI67U3&productId=742&rPId=39684

2. Vmware ESXi其實就可以理解為一個IOS操作系統，所以跟安裝Windows操作系統一樣，你可以把它刻成光盤或U盤進行安裝，服務器也可以通過遠程掛載進行安裝。啟動后出現以下畫面，選擇第一項進行安裝。

3.開始加載ESXi引導盤。

4. 加載系統信息，驗證硬件驅動。

5. 進入ESXi歡迎界面，按回車鍵繼續。

6.按F11接受許可協議繼續。

7. 系統會自動檢查可用的存儲設備，然后選擇安裝的磁盤位置，回車繼續。

8. 選擇安裝過程中的鍵盤模式，默認美式鍵盤。

9. 設置root管理員密碼。

10．按F11開始安裝。

11.VMware ESXi 6.7安裝中。

12. 等待安裝完成后，按回車重啟。

重啟以后，服務器就已經安裝了ESXi系統，ESXi是全文本的界面，我們平時基本很少需要在這臺服務器上進行操作，相關的操作都可以通過瀏覽器或客戶端遠程訪問進行，所以我們需要先對ESXi服務器的網絡進行一些配置。

1. 重啟完成后系統界面如下，按F2 進入系統配置界面。

2.輸入root管理員賬號密碼回車登陸。

3. 選擇Configure Management Network進行網絡管理配置。

4. 選擇配置IPv4。

5.配置IP地址按回車。

6.IP地址配置完成。

這樣我們就可以通過瀏覽器遠程登陸訪問EXSi服務器了。

1. 打開瀏覽器輸入EXSi服務器IP，輸入用戶名密碼。

2.登陸成功后，先分配許可證。

3.分配許可證。

4.創建虛擬機。

5.選擇創建新虛擬機。

6. 選擇名稱和客戶機操作系統。比如安裝選擇linux下的CentOS。

7.選擇存儲。

8.自定義設置。根據實際情況進行CPU、內存、硬盤分配。

9.一臺虛擬機創建完成。

10.最后和VMware Workstation掛載安裝操作系統就可以了。

本文安裝虛擬機主要用于新手初次接觸情況下安裝，本虛擬機主要用于系統安裝以及中間鍵的安裝以及使用，對于學習系統實施和系統運維過程有很大幫助。

1.首先安裝VMware

下載地址：https://www.vmware.com/cn/products/workstation-pro.html

下載安裝后如圖：（我自己下的是workstation 16 pro，根據自己需要下載）

2.安裝完成后點擊創建新的虛擬機

選擇自定義高級后點擊下一步（好像兩者并沒有區別，都試過）

直接下一步：

點稍后安裝光盤映像前提是我們光盤影響還沒有提前下載好：

點擊下一步后選擇liunx(L)

虛擬機名稱以及安裝目錄自己可以改成想要的：

虛擬機核數這里一般選擇默認值1：

虛擬機內存選擇8g，夠用（選擇16g的話到后期可能會因為虛擬機內存問題導致虛擬機打不開）

選擇NAT網絡連接與主機共享網絡（但后面打開虛擬機時候會遇到網絡連接不上則可以在命令行處輸入：sudo dhclient ens33 （用連接網絡命令））

下一步：

選擇磁盤內存，一般20G就夠我們平常模擬安裝用：

點擊完成后，隨后進行下一步光盤映像下載：

2.下載所需要光盤映像并使用

下載地址：http://ftp.sjtu.edu.cn/centos/7/isos/x86_64/

記住自己下載路徑：

路勁放到虛擬機里選用就好，然后點擊確定后開始啟動：

啟動遇到問題（因為自己裝的比較多，內存不夠降到4g，一般第一次裝8g是可以啟動的）

到此正在安裝會比較慢。過程可能會重啟

記得配置里面勾選圖形化，否則會是命令行界面

隨后有提示用戶名密碼

最后出來即安裝成功

?