本文目錄一覽：
Vue.js入門教程（三）雙向綁定和數據渲染
既然清楚了原理，那麼，接下來進入正題——我知道了vue怎麼安裝，那麼我怎麼使用呢？
在告訴你基礎用法之前，我還是要先告訴你一個情況。
可能要令你有點失望。vue主要是側重於數據端的。他的目的就是渲染數據和在前端調整一下數據邏輯。
他不是像jquery那樣讓你用來做特技的。就算你要做特技。你也應該通過css3/canvas而不是dom。
所謂的雙向綁定，你可以理解就是把view。（你還不清楚mvc的話，請看第一章）
和model綁定到一起。說白了，就是你js中的綁定值變了。你dom中的內容就跟著一塊變了。
vue是通過解析{{文字..}}來生成內容的。後面綁定方法，輸出內容的時候都會講到。
列表輸出使用 v-for，這些v開頭加橫杠的叫做命令
這些命令是可以自定義的。但是那都屬於高級操作，我們不用它也完全足夠支撐做一個大型項目了。
其實你回發現，這裡無論是v-for或者是v-什麼其他玩意
它都深刻的遵循了es6的語法。這裡不就是一個典型的for in 循環嗎。不過我們現在都用for of了。
你記住這個用法，它就長這樣。
前後端分離開發的關鍵在於：後台只提供介面。
我們獲得的數據多數情況下，僅僅是一個json，而mvvm的關鍵就再於解析數據在前端完成了。如果你了解jsp或者php你會了解，數據的解析在mvc中，
是由後端完成的，而html只負責顯示。
所以，當你了解了數據綁定和渲染以後，你可以第一時間先把數據輸出到頁面了。
我們前端最厲害的地方不就是處理能看得見的東西嗎？
前端Vue.js框架是什麼？
前端Vue.js框架是什麼？有哪些特點？Vue.js是一個前端框架，用於構建用戶界面的漸進式框架。在Vue中一個核心的概念是讓用戶不再操作DOM元素解放了用戶的雙手，讓程序員可以更多的時間去關注業務邏輯，Vue框架能夠提高開發的效率。
科普時刻 ：
黑馬程序員vue前端基礎教程-4個小時帶你快速入門vue
前端開發利器vue，微信小程序快速開發實戰
web前端基礎必備教程-2小時玩轉Vue單元測試
黑馬程序員Vue2.0+Vue3.0入門到精通，大廠前端崗位必備技能
1、Vue.js是什麼？
Vue是一個js庫，且無依賴別的js庫跟jquery差不多。Vue核心庫只關注視圖層，非常容易與其它庫或已有項目整合。Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。
Vue.是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是Vue 被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
2、Vue的MVVM設計模式是什麼？
如果了解前端一定知道MVVM和MVC這兩種設計模式，且很有可能對mvp也有一些了解。MVC即model，view，control，jQuery就是採用的這種設計模式。MVVM即model，view，viewmodel，是數據驅動模式，即所有的一切通過操作數據來進行而盡量避免操作DOM樹。
不關注DOM結構，考慮數據該如何儲存，用戶的操作在view通過viewmodel進行數據處理，分情況是否通過ajax與model層進行交互，再返回到view層，在這個過程中view和viewmodel的數據雙向綁定使得我們完全的擺脫了對DOM的繁瑣操作，而是專心於對用戶的操作進行處理，避免MVC中control層過厚的問題。
在vue調試方面可以選擇安裝chrome插件vue Devtools。打開vue項目，在console控制台選擇vue面板。在Devtools對象中，可以選擇組件，查看對應組件內的數據信息。也可以選擇Vuex選項，查看該項目內Vuex的狀況變數信息。
3、Vue.js有哪些優點？
聲明式，響應式的數據綁定；組件化的開發；Virtual DOM；響應式的數據綁定
（1）jQuery首先獲取到DOM對象，然後對DOM對象進行進行值的修改等操作；
（2）Vue首先把值和js對象進行綁定，然後修改js對象值，Vue框架會自動把DOM的值就行更新；
（3）簡單理解為Vue幫我們做了DOM操作，以後用Vue就需要修改對象的值和做好元素和對象的綁定，Vue框架會自動做好DOM相關操作；
（4）DOM元素跟隨JS對象值的變化而變化叫做單向數據綁定，若JS對象的值也跟隨著DOM元素。
4、需要學習哪些Vue.js框架相關知識點？
Vue.js 安裝、Vue.js 目錄結構、Vue.js 起步、Vue.js 模板語法、Vue.js 條件語句、Vue.js 循環語句、Vue.js 計算屬性、Vue.js 監聽屬性、Vue.js 樣式綁定、Vue.js 事件處理器、Vue.js 表單、Vue.js 組件、Vue.js 組件自定義事件、Vue.js 自定義指令、Vue.js 路由、Vue.js 過渡 動畫、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 響應介面、Vue.js 實例等。
Vue.js 是一個JavaScriptMVVM庫，一套構建用戶界面的漸進式框架。以數據驅動和組件化的思惟構建的，採取自底向上增量開闢的設計。比擬於Angular.js，Vue.js供給了加倍簡潔、更易於懂得的API，使得我們快速地上手並應用Vue.js。
Web 前端怎樣入門
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
第三：注重動手實踐能力的培養。學習前端開發一定要注重動手實踐能力的培養，因為前端開發的細節比較多，所以只有多操作才能逐漸熟悉。
前端開發目前被稱為「大前端」，整個前端開發也被賦予了更多的含義，包括Web前端開發、移動端開發、大數據呈現端開發以及部分後端開發任務等等。所以，想要在前端行業中走的更遠，一定要注重知識結構的豐富性。
與其他編程語言相比，前端是公認的入行門檻較低的一門語言，但依然有很多人在學習之前會問零基礎學習web前端難不難，要多久才能學會。學習的難易和時間當然是取決於學習的方式。
前端入門簡單，但是深入學習之後，還是有一定學習難度的。如果你是零基礎自學web前端的話，那麼所花費的時間與精力是不可估計的。 如果系統學習5個月的時間可以幫助你快速成長為合格的web前端工程師。
路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：Node.js全棧開發(1周)
內容包括：(WebApp後端系統開發、一、Node.js基礎與Node.js核心模塊；二、Express；三、noSQL資料庫)
至於視頻教程，我這裡有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！
如何學習vuejs
最近VueJs確實火了一把，自從Vue2.0發布後，Vue就成了前端領域的熱門話題，github也突破了三萬的star，那麼對於新手來說，如何高效快速的學習Vue2.0呢。既然大家會看這篇文章，那麼肯定是vue的學習者了，或是遇到的瓶頸，或者剛剛開始學，不知道如何快速起步，本篇文章將帶領大家在最短的時間內構件一個學習Vue的學習路線Vuejs的作者尤雨溪尤大也寫過一篇關於新手學習vue路徑的文章新手向：Vue 2.0 的建議學習順序百度vuejs搜索的是vue1的文檔，推薦大家直接上2.0,畢竟1和2還是有區別的。vue2.0文檔地址Vue2.0Vue基礎對於沒有接觸過es6和webpack的童鞋來說，不建議直接用官方的腳手架vue-cli構件項目。先按文檔順序最少學習完組件那一章。直接在html文件中引入vue.js開始學習,了解vue的基礎指令和語法。vue的生命周期很重要，了解這點以後可以免去很多問題。學完這些可以做一些練手的小項目，比如萬年不變的todolist。。。現在可以開始學習使用vue-cli構件項目了，學習組件化之前，推薦先看一下es6關於模塊的介紹。阮一峰《ECMAScript6》 Module光會這些還是不夠的，還得會一些npm基礎，知道如何用git-bash來安裝依賴，會一些常用的命令。這方面的知識可以參閱npm入門文檔看完這些就可以試著將之前的寫的demo用搭建的vue-cli來實現。附上我寫的一個入門小demovue-demo-search多看看組件那裡，看看如何在vue-cli中怎麼實現組件化，說白了，vue玩的就是組件。到這裡vue基礎篇就結束了。你還可以有條件的參閱剩下的官方文檔裡面的進階篇，如果時間有限，就直接進入vue-router Vue-router和之前一樣，推薦直接用html+js過一遍文檔對路由導航鉤子得好好看一看。看完文檔就可以上手vue-cli，一般新手在這幾天都會死活跑不出來。偷笑最直接的方法就是去github上搜一些關於vue-router2.0的demo，看如何構件路由，如何構件項目目錄。我這裡有一個傳送門如果能跑出來，就可以做一些小項目了，比如寫一個知乎日報啊偷笑，這些demo在github上很多。可以結合一些組件庫寫demo，這樣可以更加了解組件化。比如餓了么團隊的Element、mint-ui Vuex什麼是vuex？Vuex 是一個專門為 Vue.js 應用設計的 狀態管理模型 + 庫。它為應用內的所有組件提供集中式存儲服務，其中的規則確保狀態只能按預期方式變更。說白了就是控制應用的一些全局狀態。狀態改變了，對應的視圖也會改變。在學習Vuex時，會有一些ES6特性，當遇到這些時，最好不要一帶而過，去好好看一看這些es6特性。比如在學習Action時可以看看ES6新增的Promise和參數解構。實踐的方法一樣是先看別人別人寫的代碼，比如官方的購物車實例的應用結構。把之前寫的demo優化一下，有些地方可以用用vuex。vuex主要是用來對不同組件間進行通信，它構建了一個Vue實例的全局數據與方法，這些數據與方法可以在該Vue實例的所有組件中getter與setter。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/243186.html
微信掃一掃 
支付寶掃一掃 