1. 程式人生 > >vue介紹與入門

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大特點:

  1. 簡潔 HTML 模板 + JSON 資料

  2. 資料驅動: 自動追蹤依賴的模板表示式和計算屬性。

  3. 元件化: 用解耦、可複用的元件來構造介面。

  4. 輕量: ~24kb min+gzip,無依賴。

  5. 快速: 精確有效的非同步批量 DOM 更新。

  6. 模組友好: 通過 NPM Bower 安裝,無縫融入你的工作流。

二. 什麼是mvvm?

2.1 MVC

mvc是應用最為廣泛的軟體架構之一,一般MVC分為:Model(模型),Controller(控制器)view.這主要書基於分層的目的,讓彼此的職責分開。

 View層一般都是通過controller

來和Model進行聯絡.ControllerModel和View的協調者,ViewModel不直接聯絡.基本都是單向聯絡的。

                        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 applicationSPA),就是隻有一張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框架如AngularReact都是大同小異,本質上都是基於MVVM的理念。 然而vue以他獨特的優勢簡單,快速,組合,緊湊,強大而迅速崛起 .

我們可以通俗的理解為這兩者有以下幾點的不同:

  1. jQuery首先要獲取到 dom 物件,然後對 dom 物件進行進行值的修改等操作

  2. Vue是首先把值和 js 物件進行繫結,然後修改js物件的值,Vue框架就會自動把 dom 的值就行更新。

  3. 可以簡單的理解為 Vue 幫我們做了 dom 操作,我們以後用Vue就需要修改物件的值和做好元素和物件的繫結,Vue 這個框架就會自動幫我們做好 dom 的相關操作,而且我們也要認識到 Vue是以資料驅動的前端框架。

  4. 這種 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。在上面例項中 idapp,在 div 元素中

data 用於定義屬性,例項中有一個屬性分別為:message