Vue入門基礎

vue中文文件寫得很好，介面清爽，內容翔實。但文件畢竟不是教程，文件一上來出現了大量的新概念，對於新手而言，並不友好。個人還是比較喜歡類似於《js高階程式設計》的風格，從淺入深，娓娓道來

於是，還是按照自己的思路，對vue的知識體系從淺入深的開始學習，並把學習記錄總結成部落格，也是希望能夠幫助到同樣入門vue的朋友，本文將詳細介紹vue入門基礎

vue.js（讀音 /vjuː/，類似於view）是一套構建使用者介面的漸進式框架。vue 採用自底向上增量開發的設計，核心庫只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 vue 生態系統支援的庫結合使用時，vue 也完全能夠為複雜的單頁應用程式提供驅動

[注意]由於vue使用getter/setter等es5特性，所以相容到ie9

下面來解釋下，何為漸進式框架，如上圖所示　

如果只使用vue最基礎的宣告式渲染的功能，則完全可以把vue當做乙個模板引擎來使用

如果想以元件化開發方式進行開發，則可以進一步使用vue裡面的元件系統

如果要製作spa(單頁應用)，則使用vue裡面的客戶端路由功能

如果元件越來越多，需要共享一些資料，則可以使用vue裡的狀態管理

如果想在團隊裡執行統一的開發流程或規範，則使用構建工具

所以，可以根據專案的複雜度來自主選擇使用vue裡面的功能

vue.js有三種獲取方式

開發版本：包含完整的警告和除錯模式

生產版本：刪除了警告，28.96kb min+gzip

2、cdn

3、npm

# 最新穩定版

$ npm install vue

獲取vue後，直接使用script標籤引入即可使用

<
script 
src="vue.js"
>
script
>

<
script 
src=""
>
script
>

前面介紹過，對於vue最簡單的應用就是將其當作乙個模板引擎，也就是採用模板語法把資料渲染進 dom。vue使用雙大括號語法來進行文字插值，下面的message相當於乙個變數或佔位符，最終會表示為真正的文字內容

<
div 
id>
}div
>

每個vue.js應用都是通過建構函式vue建立乙個 vue 的根例項啟動的，經常使用vm(viewmodel 的簡稱) 這個變數名表示vue例項

var vm = new vue()

在例項化vue時，需要傳入乙個選項物件，它可以包含資料、模板、掛載元素、方法、生命週期鉤子等選項

var vm = new
vue(
})

上面為vue()建構函式傳入了乙個物件，物件中包括el和data這兩個引數

【el】

引數el，是element的縮寫，用於提供乙個在頁面上已存在的 dom 元素作為 vue 例項的掛載目標

引數值有兩種型別，包括string | htmlelement

【data】

引數data表示vue例項的資料物件

上例中，data: 表示變數message所代表的真實值為"hello vue!"

下面將vue的模板插值和構造器結合起來，製作乙個簡單例項

vue(
})

得到如下所示的結果

【資料繫結】

看起來上面的例子跟單單渲染乙個字串模板非常類似，但是vue在背後做了大量工作。現在資料和 dom 已經被繫結在一起，所有的元素都是響應式的

當然，vue學習的前提是要掌握es6、nodejs以及webpack

歡迎交流

Vue入門基礎

vue入門基礎

Vue 入門基礎

Vue入門（二）Vue基礎

Vue入門基礎

vue入門基礎

Vue 入門基礎

Vue入門（二）Vue基礎

相關推薦