目前前端最火的框架Vue,不學(xué)小心找不到工作

相信大家最近找工作的時(shí)候都會(huì)遇到很多公司都要求要會(huì)Vue的情況,那下面我就給大家說(shuō)一下Vue的學(xué)習(xí)方法,讓大家在工作中如魚(yú)得水。

Vue 是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。

Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。

Vue的核心庫(kù)只關(guān)注視圖層,易上手,便于和第三方庫(kù)或既有項(xiàng)目整合。

現(xiàn)代化的工具鏈和各種類庫(kù)結(jié)合使用,Vue也更適合做復(fù)雜的單頁(yè)面應(yīng)用SPA(SinglePage Web Application)

起步

假設(shè)您已經(jīng)了解了關(guān)于HTML、CSS和JavaScript的相關(guān)知識(shí)。

創(chuàng)建一個(gè)文件,命名·hello.html·,通過(guò)如下方式引用Vue:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

更多Vue的安裝方式網(wǎng)上有介紹,不過(guò)對(duì)于新手來(lái)說(shuō),上面的使用方法更貼近Web開(kāi)發(fā)。高階開(kāi)發(fā)者會(huì)使用更敏捷的開(kāi)發(fā)工具,這里不做介紹。

聲明式渲染

目前前端最火的框架Vue,不學(xué)小心找不到工作

Hello Vue——全部代碼

目前前端最火的框架Vue,不學(xué)小心找不到工作

Hello Vue——界面和控制臺(tái)

此時(shí),我們已經(jīng)成功的創(chuàng)建了第一個(gè)Vue應(yīng)用,現(xiàn)在的數(shù)據(jù)和DOM已經(jīng)被建立了關(guān)系,所有的東西都是響應(yīng)式的,應(yīng)用內(nèi)的數(shù)據(jù)可以通過(guò)控制臺(tái)顯示。

除了文本插值,我們還可以這樣綁定元素特性:

目前前端最火的框架Vue,不學(xué)小心找不到工作
目前前端最火的框架Vue,不學(xué)小心找不到工作

這里我們遇見(jiàn)一些新東西:v-bind,帶有前綴v-的被稱為指令,表示是Vue提供的特殊特性,它們會(huì)在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為。v-bind 意義是綁定,講元素節(jié)點(diǎn)的title特性和Vue實(shí)例的message屬性保持一致。

目前前端最火的框架Vue,不學(xué)小心找不到工作

條件與循環(huán)

控制切換一個(gè)元素是否顯示,v-if 根據(jù)條件選擇

目前前端最火的框架Vue,不學(xué)小心找不到工作

在瀏覽器中刷新網(wǎng)頁(yè),在控制欄中輸入app3.seen=false,即可看到指定內(nèi)容消失:

目前前端最火的框架Vue,不學(xué)小心找不到工作
目前前端最火的框架Vue,不學(xué)小心找不到工作

這個(gè)例子演示了我們不僅可以把數(shù)據(jù)綁定到 DOM 文本或特性,還可以綁定到 DOM 結(jié)構(gòu)。

接下來(lái)展示 v-for 循環(huán),用來(lái)渲染一個(gè)數(shù)組的數(shù)據(jù)

目前前端最火的框架Vue,不學(xué)小心找不到工作

看到界面顯示的列表內(nèi)容有三個(gè),如下:

目前前端最火的框架Vue,不學(xué)小心找不到工作

在控制臺(tái)中輸入 app4.todos.push({text:'新項(xiàng)目'}),手動(dòng)修改了todos的內(nèi)容,實(shí)時(shí)看到網(wǎng)頁(yè)內(nèi)容修改,如下:

目前前端最火的框架Vue,不學(xué)小心找不到工作

處理用戶輸入

v-on 添加一個(gè)事件監(jiān)聽(tīng)器,通過(guò)它來(lái)調(diào)用Vue使用中定義的方法,實(shí)現(xiàn)交互。

建立一個(gè)文本區(qū)域,再創(chuàng)建一個(gè)按鈕,寫(xiě)入逆轉(zhuǎn)消息的方法,使用 v-on 綁定

目前前端最火的框架Vue,不學(xué)小心找不到工作

看到原始內(nèi)容:頁(yè)面最下方文字區(qū)域和按鈕

目前前端最火的框架Vue,不學(xué)小心找不到工作

點(diǎn)擊按鈕,看到文字變化,逆轉(zhuǎn)消息完成,再點(diǎn)擊即可變回來(lái)

目前前端最火的框架Vue,不學(xué)小心找不到工作

上述例子中,我們?cè)趓everseMessage方法中更新了應(yīng)用狀態(tài),但是沒(méi)有觸碰DOM,因?yàn)樗械腄OM操作都由Vue來(lái)處理,我們只需要關(guān)注邏輯層面即可。

Vue還提供 v-model 指令,輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。

目前前端最火的框架Vue,不學(xué)小心找不到工作

可以看到,輸入框的內(nèi)容預(yù)先設(shè)定好,輸入框上的文本與輸入框內(nèi)容相同

目前前端最火的框架Vue,不學(xué)小心找不到工作

v-model把input中的內(nèi)容同步到數(shù)據(jù)data中,文本顯示區(qū)域?qū)崟r(shí)變化,跟隨狀態(tài)。

目前前端最火的框架Vue,不學(xué)小心找不到工作

組件化應(yīng)用構(gòu)建

組件系統(tǒng)是Vue的另一個(gè)重要的概念,允許我們使用小型、獨(dú)立和可復(fù)用的組建構(gòu)建大型應(yīng)用。個(gè)人理解為組件化開(kāi)發(fā),相當(dāng)于一個(gè)拼接積木的過(guò)程,把大項(xiàng)目無(wú)限拆分成不可分割或難以分割的小塊,靈活的組合各個(gè)部件,完成整體的拼接。

在Vue中,一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè)Vue實(shí)例。在Vue中注冊(cè)組建很簡(jiǎn)單:

目前前端最火的框架Vue,不學(xué)小心找不到工作

案例上要先注冊(cè)一個(gè)組件,再定義各個(gè)元素和數(shù)據(jù),v-for 進(jìn)行遍歷,v-bind 綁定每個(gè)item,todo作為組件的屬性傳入,設(shè)置組件的key為item.id,通過(guò) prop 接口與父單元進(jìn)行了良好的解耦,屬性傳入到組件中,在組件中構(gòu)建并渲染到頁(yè)面中。

目前前端最火的框架Vue,不學(xué)小心找不到工作

在大型項(xiàng)目中,我們有必要將整個(gè)應(yīng)用程序劃分為組件,方便開(kāi)發(fā)人員管理。未來(lái)使用組件的應(yīng)用模版盡可能的使用子組件進(jìn)行封裝。

Vue組件與自定義元素的關(guān)系

自定義元素是Web組件規(guī)范的一部分,Vue的組件語(yǔ)法部分參考了該規(guī)范,Vue組件實(shí)現(xiàn)了Slot API與 is 特性,但是還有幾個(gè)關(guān)鍵差別:

  1. Web Components 規(guī)范已經(jīng)完成并通過(guò),但未被所有的瀏覽器原生實(shí)現(xiàn)。目前Safari 10.1+、Chrome 54+和Firefox 63+原生支持Web Component。相比之下,Vue組件不需要任何 polyfill ,并且在所有支持的瀏覽器(IE9及更高版本)之下表現(xiàn)一致。必要時(shí),Vue組件也可以包裝于原生自定義元素之內(nèi)。
  2. Vue 組件提供了純自定義元素所不具備的一些重要功能,最突出的是跨組件數(shù)據(jù)流自定義事件通信以及構(gòu)建工具集成

以上是Vue的介紹和部分核心基本功能,希望對(duì)您有所幫助。

請(qǐng)多關(guān)注后期的Vue開(kāi)發(fā)講解和案例拆分,歡迎讀者私信提供意見(jiàn)和建議,未來(lái)會(huì)做改進(jìn)。

我是一名前端開(kāi)發(fā)程序員,自己整理了一份2019最全面前端學(xué)習(xí)資料,從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理,送給每一位前端小伙伴,這里是小白聚集地,歡迎初學(xué)和進(jìn)階中的小伙伴

前端資料獲取方式:

1.在你手機(jī)的右上角有【關(guān)注】選項(xiàng),點(diǎn)擊關(guān)注!

2.關(guān)注后,手機(jī)客戶端點(diǎn)擊我的主頁(yè)面,右上角有私信,請(qǐng)私信回復(fù):【學(xué)習(xí)】

電腦已經(jīng)設(shè)置好了關(guān)鍵詞自動(dòng)回復(fù),所以回復(fù)的時(shí)候請(qǐng)注意關(guān)鍵詞喲~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。