最新版教學Vue.js漸進式JavaScript框架

點擊藍色 「達達前端」 關注我哦!

加個 「星標」 ，天天一篇文章，一塊兒學編程

2020年02月09日

什麼是vue.js？

vue.js是一款漸進式的JavaScript框架。

什麼是漸進式？

漸進式就是指能夠由淺入深的，由簡單到困難的一種方式。

那麼vue.js有什麼優勢？

vue.js擁有更小的體積，壓縮後的vue.js就只有33k；vue.js擁有更高的運行效率，vue.js是基於虛擬dom的，虛擬dom是一種能夠預先經過JavaScript進行各類計算，把最終的dom操做計算出來並進行優化的技術。

由於這個Dom的操做屬於預處理操做，並無真實的操做Dom，因此叫作虛擬Dom。

vue.js基於虛擬Dom操做，大幅度提升了Dom的操做以及渲染效率。不只如此，vue.js還實現了雙向數據綁定。

vue.js的雙向數據綁定，讓開發者（程序員）不用再去操做Dom對象，能夠把更多的精力投入到業務邏輯上。

對於vue.js的學習，其學習成本低，生態豐富等，目前市場上擁有大量的成熟，穩定的基於vue.js的Ui框架，經常使用的組件，能夠拿來即用地進行快速開發。

安裝

vue.js的安裝方式有不少種，第一種：直接使用script標籤的方式去引入，vue會被註冊爲一個全局變量。

在開發環境下不要使用壓縮版本，不然會失去全部常見錯誤相關的警告！

由於開發版本，包含完整的警告和調試模式，而生產版本刪除了警告。

CDN

對於學習環境，可使用以下代碼：

對於生產環境，建議使用以下代碼：

連接到一個明確的版本號和構建文件

若是使用原生的ES Modules，以下使用一個兼容的構建文件：

在用vue構建大型應用時推薦使用npm的安裝方式，由於npm可以很好的使用webpack或Browserify模塊打包器配合使用。

使用命令行：

vue提供了一個官方的cli，爲單頁面應用快速搭建的腳手架。

隨便點擊下載一個開發版本的或者是生產版本的，下載文件以下，就一個vue.js文件。

而後建立vueDemo，把vue.js文件複製進入。

建立一個index.html文件，之後能夠用.vue文件。

開始建立第一個vue.js的應用

vue.js的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進Dom的系統。能夠說vue.js的應用能夠分紅兩個重要的組成部分，一個是視圖，一個是腳本。

文檔結構：

運行效果：

數據與方法

每一個vue應用都是經過用vue函數建立一個新的vue實例開始的：

雖然vue沒有徹底遵照mvvm模型，可是vue的設計也受到了它的啓發，因此咱們在開發中會常用vm來表明一個vue的實例。

這個vm就是viewModel視圖模型的縮寫，當一個vue實例被建立時，它將data對象中的全部屬性都加入到vue的響應式系統中。

核心：當這些屬性的值發生改變時，視圖將會產生「響應」，改變爲新的值。

生命週期

每一個vue實例在被建立時，都要經歷一系列的初始化過程。好比說要設置數據的監聽，編譯模板，將實例掛載到Dom結構，而且在數據變化時更新Dom等等。

在這些過程當中，運行的一些爲生命週期的鉤子函數，給咱們有了添加代碼的機會。

整個頁面調用以前建立的生命週期，beforeCreate，建立以前，在實例初始化後，數據觀測和事件配置以前被調用。

created建立以後，在實例建立完成後被調用的，實例已經完成的配置，如數據觀測屬性和方法的運算，事件回調，此時，掛載階段尚未開始，$el屬性目前不可見。

beforeMount掛載以前，準備掛載的階段，在掛載開始以前被調用，相關的渲染函數首次被調用。

mounted掛載成功，el被新建立的vm.$el替換。

數據變化以前被調用的函數，beforeUpdate數據更新時調用。

updated是組件dom已經更新，組件更新完畢的狀況。

activated，類型爲function，是在keep-alive組件激活時調用，該鉤子在服務器端渲染期間不被調用。

deactivated，類型爲function，是在keep-alive組件停用時調用，該鉤子在服務器端渲染期間不被調用。

beforeDestroy，類型爲function，是在實例銷燬以前調用，該鉤子在服務器端渲染期間不被調用。

destroyed，類型function，是在vue實例銷燬以後，vue實例指示的全部東西都會解除綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

errorCaptured是去捕獲來自子組件的一個錯誤的時候被調用，它能夠去捕獲子組件的錯誤。

模板語法

vue.js使用了基於HTML額模板語法，容許開發者聲明地將dom綁定到底層vue實例的數據。全部vue.js的模板都是合法的HTML，因此可以被規範的瀏覽器和HTML解析器所解析。

在底層的實現上，vue將模板編譯成虛擬dom渲染函數，結合響應系統，vue可以計算出最少須要從新渲染多少組件，並把dom操做次數減小。vue.js這樣能夠提升JavaScript的效率。

數據綁定的形式是使用「mustache"語法的文本插值：

使用v-once指令，執行一次性地插值，當改變數據時，插值裏的內容不會被更新。

雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令：

使用JavaScript的表達式

指令

什麼是指令？指令式帶有v-前綴的特性，指令特性的值預期是單個JavaScript表達式，指令的職責是，當表達式的值改變時，將其產出的連帶影響，響應地做用於Dom。

v-if，v-else，v-show，v-else-if

這些指令用於顯示與隱藏各種元素：

v-if和v-show的區別

v-if，在切換過程當中條件內的事件監聽器和子組件適當地被銷燬和重建，開銷高，在運行時條件不多改變時才使用這個指令。

v-show，調整的是css display屬性，開銷較小，在常頻繁地切換中使用。

v-for的基本用法和對象遍歷

v-text和v-html

v-text的取值有一個缺點，當網速慢時，會在頁面中顯示{{xx}}，而v-text能夠解決這個bug。

v-html指令式用於輸出Html代碼的

class與style綁定

綁定HTML class

對象語法，經過v-bind:class一個對象，以動態地切換class。

語法表示active這個class存在與否取決於isActive的值。這樣你能夠在對象中傳入更多屬性來動態切換多個class。

注意，v-bind:class指令能夠與普通的class屬性共存。

可使用計算屬性定義。

v-bind:class使用數組語法。

列表渲染

用v-for指令基於一個數組來渲染一個列表，v-for指令須要使用item in items形式的語法，其中items是源數據數組，而item是被迭代的數組元素的別名。

使用v-on指令監聽dom事件，並在觸發時運行一些JavaScript代碼。

v-pre，v-cloak，v-once

v-pre能夠在模板中跳過vue的編譯，直接輸出原始值。

v-cloak能夠在vue渲染完指定的整個dom後才進行顯示。它和css樣式一塊兒使用的。

v-once只顯示第一次渲染的值，再也不改變。

表單輸入綁定

能夠用v-model指令在表單input，textarea，以及selects元素上建立雙向數據綁定，它會根據控件類型自動選取正確的方法來更新元素。

v-model在內部會根據不一樣的輸入元素使用不一樣的屬性並拋出不一樣的事件。text和textarea元素使用value屬性和Input事件。checkbox和radio使用checked屬性和change事件。select字段將value做爲prop並將change做爲事件。

組件基礎

全局註冊

局部註冊

組件是可複用的vue實例。由於組件是可複用的vue實例，因此他們與New Vue接收相同的選項。

組件註冊

組件props屬性傳值。

組件註冊，在註冊一個組件的時候，咱們須要給它一個名字，好比在全局註冊的時候咱們須要按照以下代碼：

組件名的大小寫，定義組件名的方式能夠有兩種：

使用短橫線分隔命名定義一個組件

使用首字母大寫命名定義一個組件，駝峯式：

父子組件代碼以下：

vue.js支持咱們在模塊系統中的局部註冊，在這種狀況下，推薦建立一個components目錄，並將每一個組件放置在其各自的文件中。

須要在局部註冊以前導入你想使用的組件，讓ComponentA 和 ComponentC 均可以在 ComponentB 的模板中使用。

實例事件

$on是在構造器外部添加事件，它接收兩個參數，第一個參數是調用時的事件名稱，第二個參數是一個匿名的方法。

$off的用法，關閉事件和$emit的用法是事件調用。

vue.js的單文件組件

在不少vue.js項目中，咱們使用Vue.component來定義全局組件，這種方式在不少項目中運做是沒有什麼問題的。

在複雜的項目中，缺點就很明顯。好比說，在全局定義，強制要求每一個component中的命名不得重複。字符串模板缺少語法高亮的支持，不支持css，沒有構建步驟。

因此使用文件擴展名爲.vued的單文件組件解決了這些問題，而且還可使用webpack和browserify等構建工具。

安裝 npm

npm 全稱爲 Node Package Manager，是基於Node.js的包管理器，也是整個Node.js社區最流行、支持的第三方模塊最多的包管理器。

npm -v

因爲網絡緣由 安裝 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝 vue-cli

cnpm install -g @vue/cli

安裝 webpack

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack

建立一個組件示例：

優勢：

1. 完整語法高亮

2. CommonJS 模塊

3. 組件做用域的 CSS

cli方式開發，cli是命令行，須要掌握終端，node，npm等不少知識，搭建項目環境，運行和發佈項目，配置less/sass/typescript/babel等預編譯器。掌握安裝各類流行的組件庫等。

組件的建立

computed計算屬性，是對原始數據進行改造輸出。

watch屬性，數據變化的監聽器，用於監測data中的數據變化。

filters過濾器，經常使用格式化字符等做用。

mixins用於減小代碼污染，減小代碼量，實現代碼的重用。

extends是用於對構造器進行擴展的。

☆ END ☆

參考文檔來源：vue.js官方地址

目前文章內容涉及前端知識點，囊括Vue、JavaScript、數據結構與算法、實戰演練、Node全棧一線技術，緊跟業界發展步伐，將 Web前端領域、網絡原理等通俗易懂的呈現給小夥伴。更多內容請到達達前端網站進行學習：www.dadaqianduan.cn

推薦閱讀

一、你知道多少this，new，bind，call，apply？那我告訴你

二、爲何學習JavaScript設計模式，由於它是核心

三、一篇文章把你帶入到JavaScript中的閉包與高級函數

四、大廠HR面試ES6中的深刻淺出面試題知識點

以爲本文對你有幫助？請分享給更多人

關注「達達前端」加星標，提高前端技能

這是一個有質量，有態度的公衆號