淺談Vue基礎入門

前言

Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的漸進式框架。

Vue 只關注視圖層， 采用自底向上增量開發的設計。

Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

一、Vue是什么？

Vue是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。

1.框架做分層設計，每層都可選，不同層可以靈活接入其他方案

2.它給你提供足夠的optional，但并不主張很多required。

3. 而 Angular、react則是:強主張

自底向上逐層應用

由基層開始做起，把基礎的東西寫好，再逐層往上添加效果和功能。

vue的核心

MVVM: Model-View-ViewModel

Vue是數據驅動視圖的框架,采用了MWVM(Model、View、ViewModel)架構。其核心庫只關注視圖層,視圖與數據狀態保持同步

Vue的核心是一個“響應式的數據綁定系統”

數據和視圖建立綁定之后,DOM將與數據保持同步.

Vue的優勢（為什么要使用Vue）

輕量:

Angular~65KB

內置bundling和tree-shaking

vue+ Vuex+Vue Router ~ 30KB

學習成本低:

文檔組織結構清晰

API面積比Angular少

對ES6+的要求比React少

性能優越:

虛擬DOM

避免子組件重渲染

生態良好:

眾多廠商都在使用并持續增長

二、Vue安裝

1.標簽引入

我們可以在 Vue.js 的官網上直接下載 vue.min.js 并用

-：https://vuejs.org/js/vue.min.js

2.CDN引入

對于制作原型或學習，你可以這樣使用最新版本：

1

對于生產環境，我們推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：

1

如果你使用原生 ES Modules，這里也有一個兼容 ES Module 的構建文件：

1

2

3

3.NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

# 最新穩定版 $ npm install vue

1

2

4.命令行工具 (CLI)

Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries-included 的構建設置。只需要幾分鐘的時間就可以運行起來并帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。

三、Vue的簡單應用

聲明式

告訴Vue框架想要什么，如何達成由Vue去做，開發者不用管。如:下面將name的數據和標簽綁定在一起:

He1lo {{ name }]

1

2

3

指令

指令(Directives):是帶有v-前綴的特殊屬性。指令屬性的預期值是單一的JavaScript表達式。>職責:是當其表達式的值改變時相應的將某些行為應用到DOM上

常見指令

v-if:根據表達式的結果來判斷，是true則渲染元素，false則將元素注釋掉

v-show:與v-f類似，true就渲染，但是false并不是注釋掉，而是通過 displaynone;來將元素隱藏，如果需要來回切換，使用v-show更好。

v-for:遍歷元素，使用格式為v-for="(值,鍵) in遍歷內容"

v-bind:給標簽綁定屬性、類、樣式等，可以縮寫為冒號> v-html:向標簽內覆蓋注入HTML內容作為其子元素

v-on:給標簽綁定函數，可以縮寫為@，(Vue.js為v-on提供了事件修飾符。修飾符是由.開頭的指令后綴來表示的，用于對事件進行約束。

v-model:將組件與變量進行雙向綁定，當組件數據修改時，變量會隨之改變。它后面可加修飾符。

v-once:不允許修改數據

還有如下屬性

四、Vue的生命周期

下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

beforeCreate鉤子函數:

a.用戶使用new Vue()新建Vue實例

b.父實例實例化子實例，確認組件間的父子關系，將父組件的自定義事件傳遞給子組件

c.初始化將render函數轉為虛擬dom的方法

created鉤子函數:

a.初始化事件，進行數據的觀測

b.數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變)

c.此時還是沒有el選項

beforeMount鉤子函數:

a. el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命周期。

b.如刪掉el: ‘#app’

c. template參數

(1)如果vue實例對象中有template參數選項，則將其作為模板編譯成render函數。

(2)如果沒有template選項，則將外部HTML作為模板編譯。

(3)可以看到template中的模板優先級要高于outer HTMIL的優先級。

mounted

a.給vue實例對象添加$el成員，beforeMount之前el上還是undefined

b. mounted之前h1中還是通過{{message}}進行占位的，因為此時還有掛載到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內容發生了變化。

beforeUpdate

a. vue發現data中的數據發生了改變，則在下一次時間循環開始重新渲染組件

updated

a.重新執行render函數生成vnode。

b.將vnode轉化為真實Dom

c.重新掛載到HTML中，并且覆蓋掉上—次渲染的$el

beforeDestroy:

a.調用vm.$destroy(0準備銷毀vue實例

b. beforeDestroy鉤子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed:

a.在Vue實例銷毀后調用，調用后，Vue 實例指示的所有東西都會解綁定，所有的事件-會被移除，所有的子實例也會被銷毀。

總結

簡單說了下Vue的入門基礎,看完我這個博客，你應該對Vue有一個基本的認識，比如說Vue是一個漸進式的Js框架，它的核心是響應式數據綁定，它有什么優勢，它該如何安裝？它的生命周期如何？這些都是看完后值得思考的，其次，可以動手用NPM和Node.js安裝運行一下Vue，簡單體驗一下Vue。

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。