vue介紹與入門
總結所學習的知識,能讓我進步的更快。
一.什麼是vue.js
vue.js是javascript的一個輕量開源庫。它的作者是尤雨溪,於2014年2月編寫的開源庫,到目前為止,它在 github 上已經超過了10w多顆star。Vue.js是用於構建互動式的Web介面的庫,提供了MVVM資料繫結和一個可組合的元件系統,具有簡單、靈活的API。
我們現在所學習的是vue2.0的版本,那麼我們可以通過登入國內站點訪問,
MVVM輕量級框架
github
gitHub是一個面向開源及私有軟體專案的託管平臺,因為只支援git 作為唯一的版本庫格式進行託管,故名gitHub。
gitHub於2008年4月10日正式上線,除了git程式碼倉庫託管及基本的 Web管理介面以外,還提供了訂閱、討論組、文字渲染、線上檔案編輯器、協作圖譜(報表)、程式碼片段分享(Gist)等功能。目前,其註冊使用者已經超過350萬,託管版本數量也是非常之多,其中不乏知名開源專案 Ruby on Rails、jQuery、python等。
API
API就是作業系統留給應用程式的一個呼叫介面,應用程式通過呼叫作業系統的 API 而使作業系統去執行應用程式的命令。
舉個例子:前端程式設計師要從後臺拿資料需要一個介面,通過這個介面來獲取資料,而這個介面就是API。
vue.js具備了以下6大特點:
-
簡潔: HTML 模板 + JSON 資料
-
資料驅動: 自動追蹤依賴的模板表示式和計算屬性。
-
元件化: 用解耦、可複用的元件來構造介面。
-
輕量: ~24kb min+gzip,無依賴。
-
快速: 精確有效的非同步批量 DOM 更新。
-
模組友好: 通過 NPM 或 Bower 安裝,無縫融入你的工作流。
二. 什麼是mvvm?
2.1 MVC
mvc是應用最為廣泛的軟體架構之一,一般MVC分為:Model(模型),Controller(控制器)和view.這主要書基於分層的目的,讓彼此的職責分開。
View層一般都是通過controller
來和Model進行聯絡.Controller是Model和View的協調者,View和Model不直接聯絡.基本都是單向聯絡的。
MVC結構
那麼,使用者操作應該放在什麼位置,MVC之間又會發生什麼變化呢?
使用者(User)通過Controller來操作DOM的變化。
2.2 MVP
MVP 是從經典的 MVC 模式演變而來,它們的基本思想有相通的地方:Controller/Presenter 負責邏輯的處理,Model 提供資料,view負責顯示。
在MVP中,Presenter 完全把 view 和 Model 進行了分離,主要的程式邏輯在 Presenter 實現.而且, Presenter 與具體的view 是沒有直接關聯的,而是通過定義好的介面進行互動,從而使得在變更 View 的時候可以保持Presenter不變。
2.3 MVVM
MVVM 代表框架有:知名度相對偏低的 Knockout.js ,早期的 Ember.js.目前比較火熱的來自 Google 的 Angular.js,和由我們國人前端大神尤雨溪編寫的 vue.js
相比前面兩種模式.MVVM 只 是 把 MVC的 Controller 和 MVP 的 Presenter 改成了 ViewModel.View 的變化會自定更新到 ViewModel, ViewModel 的變化也會自動同步到 View 上顯示.
2.4 單頁面應用程式
單頁Web應用(single page web application,SPA),就是隻有一張Web頁面的應用,是載入單個HTML 頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式,是指在瀏覽器中執行的應用,它們在使用期間不會重新載入頁面。像所有的應用一樣,它旨在幫助使用者完成任務,比如“編寫文件”或者“管理Web伺服器”。可以認為單頁應用是一種從Web伺服器載入的富客戶端。
單頁面應用程式的優點:
2.4.1首先,最大的好處是使用者體驗,對於內容的改動不需要載入整個頁面。這樣做好處頗多,因為資料層和UI的分離,可以重新編寫一個原生的移動裝置應用程式而不用(對原有資料服務部分)大動干戈。
2.4.2單頁面Web應用層程式最根本的優點是高效。它對伺服器壓力很小,消耗更少的頻寬,能夠與面向服務的架構更好地結合。
2.4.3雖然還有一些歷史遺留問題(大部分是針對HTML5的改進)以及SEO。如果你看中SEO,那就不應該在頁面上使用JavaScript,你應該使用網站而不是Web應用。目前該技術還存在一些爭議,但這並不是重點,因為這種型別的體系架構為SAAS Web Apps提供了一個極大的可用性。
三.Vue.js 和 juqery 的區別
jquery:這個曾經也是現在依然最流行的web前端js庫,可是現在無論是國內還是國外他的使用率正在漸漸被其他的js庫所代替,隨著瀏覽器廠商對HTML5規範統一遵循以及ECMA6在瀏覽器端的實現,jquery的使用率將會越來越低.
vue:是一個興起的前端js庫,是一個精簡的MVVM。從技術角度講,Vue.js 專注於 MVVM 模型的 ViewModel 層。它通過雙向資料繫結把 View 層和 Model 層連線了起來,通過對資料的操作就可以完成對頁面檢視的渲染。當然還有很多其他的mvmm框架如Angular,React都是大同小異,本質上都是基於MVVM的理念。 然而vue以他獨特的優勢簡單,快速,組合,緊湊,強大而迅速崛起 .
我們可以通俗的理解為這兩者有以下幾點的不同:
-
jQuery首先要獲取到 dom 物件,然後對 dom 物件進行進行值的修改等操作
-
Vue是首先把值和 js 物件進行繫結,然後修改js物件的值,Vue框架就會自動把 dom 的值就行更新。
-
可以簡單的理解為 Vue 幫我們做了 dom 操作,我們以後用Vue就需要修改物件的值和做好元素和物件的繫結,Vue 這個框架就會自動幫我們做好 dom 的相關操作,而且我們也要認識到 Vue是以資料驅動的前端框架。
-
這種 dom 元素跟隨 JS 物件值的變化而變化叫做單向資料繫結,如果 JS 物件的值也跟隨著 dom 元素的值的變化而變化就叫做雙向資料繫結。
jquery操作元素
Vue操作元素
四.第一個Vue程式
4.1 下載vue2.0的兩個版本
-
開發版本:包含完整的警告和除錯模式
-
生產版本:刪除了警告,進行了壓縮
通過 script 標籤匯入vue.js 與 jquery 的匯入方式一樣.
注意 在開發環境下不要使用壓縮版本,不然你就失去了所有常見錯誤相關的警告!
而且Vue不支援IE8以下的瀏覽器。
Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統,每個 Vue 應用都需要通過例項化 Vue 來實現。
可以看到在 Vue 構造器中有一個el 引數,它是 DOM 元素中的 id。在上面例項中 id為app,在 div 元素中
data 用於定義屬性,例項中有一個屬性分別為:message