相信大家最近找工作的時(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ā)工具，這里不做介紹。
聲明式渲染
Hello Vue——全部代碼
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)顯示。
除了文本插值，我們還可以這樣綁定元素特性：
這里我們遇見(jiàn)一些新東西：v-bind，帶有前綴v-的被稱為指令，表示是Vue提供的特殊特性，它們會(huì)在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為。v-bind 意義是綁定，講元素節(jié)點(diǎn)的title特性和Vue實(shí)例的message屬性保持一致。
條件與循環(huán)
控制切換一個(gè)元素是否顯示，v-if 根據(jù)條件選擇
在瀏覽器中刷新網(wǎng)頁(yè)，在控制欄中輸入app3.seen=false，即可看到指定內(nèi)容消失：
這個(gè)例子演示了我們不僅可以把數(shù)據(jù)綁定到 DOM 文本或特性，還可以綁定到 DOM 結(jié)構(gòu)。
接下來(lái)展示 v-for 循環(huán)，用來(lái)渲染一個(gè)數(shù)組的數(shù)據(jù)
看到界面顯示的列表內(nèi)容有三個(gè)，如下：
在控制臺(tái)中輸入 app4.todos.push({text:'新項(xiàng)目'})，手動(dòng)修改了todos的內(nèi)容，實(shí)時(shí)看到網(wǎng)頁(yè)內(nèi)容修改，如下：
處理用戶輸入
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 綁定
看到原始內(nèi)容：頁(yè)面最下方文字區(qū)域和按鈕
點(diǎn)擊按鈕，看到文字變化，逆轉(zhuǎn)消息完成，再點(diǎn)擊即可變回來(lái)
上述例子中，我們?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)之間的雙向綁定。
可以看到，輸入框的內(nèi)容預(yù)先設(shè)定好，輸入框上的文本與輸入框內(nèi)容相同
v-model把input中的內(nèi)容同步到數(shù)據(jù)data中，文本顯示區(qū)域?qū)崟r(shí)變化，跟隨狀態(tài)。
組件化應(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)單：
案例上要先注冊(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è)面中。
在大型項(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)鍵差別：
- 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)。
- 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)鍵詞喲~
