一、MVVM框架
- MVVM框架好處
- 針對具有復(fù)雜交互邏輯的前端應(yīng)用
- 提供的結(jié)構(gòu)抽象
- 主要目的是為了解決應(yīng)用程序展示結(jié)構(gòu)、業(yè)務(wù)邏輯之間的緊耦合關(guān)系
- 通過ajax數(shù)據(jù)持久化，保證前端用戶體驗(yàn)(部分異步刷新)
MVVM框架
Angular.js/React.js/Vue.js
Angular.js 文件大小在60KB左右，相對學(xué)習(xí)曲線較為波折，而且每個版本的語法改動特別大；
React.js 文件大小40KB左右，需要學(xué)習(xí)專門的語法；
Vue.js 文件大小18KB左右，借鑒Angular的指令和React組件化；
MVC組成
- 模型(Model): 處理數(shù)據(jù)和業(yè)務(wù)邏輯
- 視圖(View): 向用戶展示數(shù)據(jù)的界面
- 控制器(Controller): 組織調(diào)度相應(yīng)的處理模型
二、Vue簡介
Vue是一個前端的雙向綁定類的框架，新的Vue版本參考了React的部分設(shè)計(jì)，當(dāng)然也有自己獨(dú)特的地方，比如Vue的單文件組件開發(fā)方式都很有創(chuàng)新，另外Vue自身的一些綁定的語法、用法等都非常精煉，很容易上手，而且第三方的插件都非常豐富，社區(qū)非常活躍，最新的文檔都有中文版本。而且Vue配合官方的和第三方的庫可以實(shí)現(xiàn)單文件的組件化開發(fā)、SPA等現(xiàn)代化前端開發(fā)。
- 是一個輕量級MVVM框架(大小只有18KB)
- 數(shù)據(jù)驅(qū)動+組件化的前端開發(fā)
- 社區(qū)完善
三、Vue入門
Vue 可以直接把它當(dāng)做一個js庫使用，可以很簡單的接入到你的項(xiàng)目中，或者你只需要使用雙向數(shù)據(jù)綁定。
需求: 網(wǎng)頁中有個div標(biāo)簽，而需要有json對象存儲數(shù)據(jù)，把json對象上的數(shù)據(jù)放到div。
- 在頁面中引入Vue庫
<script src="https://unpkg.com/vue/dist/vue.js"></script>
- 在頁面中div標(biāo)簽添加一個id，例如app
<div id='app'></app>
- 創(chuàng)建Vue的對象，并把數(shù)據(jù)綁定到上面創(chuàng)建好的div上去
<html>
<head>
<meta charset="utf8"/>
<title>hello vue</title>
<!--1、引入Vue庫-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2、創(chuàng)建一個Div -->
<div id="app">
<!--Vue的模板的綁定數(shù)據(jù)的方法，可以用兩對花括號進(jìn)行綁定Vue中的數(shù)據(jù)對象的屬性 -->
{{message}}
</div>
</body>
<!-- 3、創(chuàng)建Vue的對象，并把數(shù)據(jù)綁定到上面創(chuàng)建好的div上去 -->
<script>
// 創(chuàng)建Vue對象(Vue的核心對象)
var app = new Vue({
el: '#app', // el屬性：把當(dāng)前Vue對象掛載到 div標(biāo)簽上，#app是id選擇器
data: { // data: 是Vue對象中綁定的數(shù)據(jù)
message: 'hello Vue!' // message 自定義的數(shù)據(jù)
}
});
</script>
</html>
四、Vue核心思想
-
數(shù)據(jù)驅(qū)動(即是雙向的數(shù)據(jù)綁定)
DOM是數(shù)據(jù)的一種自然映射。雙向是指：HTML標(biāo)簽數(shù)據(jù) 綁定到 Vue對象，另外反方向數(shù)據(jù)也是綁定的。Vue對象的改變會直接影響到HTML的標(biāo)簽的變化，而且標(biāo)簽的變化也會反過來影響Vue對象的屬性的變化。之前Dom驅(qū)動的開發(fā)方式尤其是以jQuery為主的開發(fā)時代，都是dom變化后，觸發(fā)js事件，然后在事件中通過js代碼取得標(biāo)簽的變化，再跟后臺進(jìn)行交互，然后根據(jù)后臺返回的結(jié)果再更新HTML標(biāo)簽，異常的繁瑣。有了Vue這種雙向綁定，讓開發(fā)人員只需要關(guān)心json數(shù)據(jù)的變化即可，Vue自動映射到HTML上，而且HTML的變化也會映射回js對象上，開發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動的開發(fā)時代。
數(shù)據(jù)驅(qū)動 組件化
擴(kuò)展HTML元素，封裝可重用的代碼。
組件設(shè)計(jì)原則
- 頁面上每個獨(dú)立的可視/可交互區(qū)域視為一個組件(例如頭部尾部)；
- 每個組件對應(yīng)一個工程目錄，組件所需要的各種資源在該目錄下就近維護(hù)；
- 頁面不過是組件的容器，組件可以嵌套自由組合，形成完整的頁面；
五、Vue組件
Vue組件*.vue由三部分組成分別是<template></template>HTML代碼、<script></script>javascript腳本、<style></style>css樣式。【官方推薦，將三個部分都寫到一個.vue文件中】
六、vue的安裝
- 直接通過
script引入
<script src="https://unpkg.com/vue"></script>
直接下載并用 <script> 標(biāo)簽引入，Vue 會被注冊為一個全局變量。重要提示：在開發(fā)時請用開發(fā)版本，遇到常見錯誤它會給出友好的警告。
- 通過npm
# 最新穩(wěn)定版
$ npm install vue
- 通過Vue-cli腳手架
Vue-cli是Vue的腳手架工具，是官方命令行工具 (CLI)，腳手架即編寫好基礎(chǔ)的代碼，包括目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測試。
- $ npm install -g vue-cli // 安裝操作
- $ vue -V // 查看版本，檢查是否安裝成功
- $ vue list // 查看可以使用哪些模版
- $ vue init <template-name> <project-name>
例如 $ vue init webpack my-project // 官方模版，也可以使用自定義等模版
// 基本項(xiàng)目設(shè)置
$ vue init webpack sell
? Project name sell
? Project description 餓了嗎項(xiàng)目
? Author EndEvent <xxxx@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "sell".
To get started:
cd sell
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
// 之后再按照上面提示執(zhí)行對應(yīng)命令即可
$ cd sell
$ npm install
$ npm run dev // 開啟服務(wù)器，之后提示例如打開http://localhost:8080頁面，如果可以打開說明配置完成
建議: 基礎(chǔ)學(xué)習(xí)時，直接通過script引入或通過npm方式更快捷，后續(xù)項(xiàng)目中才是建議使用Vue-cli腳手架方式構(gòu)建項(xiàng)目工程。
