vue
教程簡介
本教程要實現(xiàn)一個簡單的后臺管理系統(tǒng)，包含登陸、數(shù)據(jù)列表、數(shù)據(jù)查詢、列表分頁、添加數(shù)據(jù)、修改數(shù)據(jù)和刪除數(shù)據(jù)等功能，教程會從 Vue 入門開始講解，包含 es6、Sass、Webpack、Bootstrap、jQuery 等技術(shù)，再到后臺管理系統(tǒng)的一些常規(guī)功能，用 Vue 如何去實現(xiàn)。
也許會有人質(zhì)疑 Vue 和 jQuery 的搭配，在我本人看來，jQuery 本身已很成熟，而且包含了很多非常好用的插件，比如表單驗證，會比 Vue 的成本低很多。在本教程中會用純 Vue 和 Vue + jQuery 兩種方式去實現(xiàn)某些功能，可用于對比兩種方案在開發(fā)成本和性能上到底有多大的影響。
如果對 Vue 還不了解的建議先看看 Vue 基礎(chǔ)教程，如果對 Vue 有一定了解的可以直接看 VueERP
項目目錄結(jié)構(gòu)
- VueBisc [Vue 基礎(chǔ)教程]
- VueERP [Vue 項目教程]
技術(shù)點目錄
- 認識 Vue
- 認識數(shù)據(jù)驅(qū)動模式
- 認識 MVVM 模式
- 模版語法
- 樣式綁定
- Vue 實例化時基本屬性
- 修飾符
- 組件
- 組件通信
- 指令
- 自定義指令
- 動畫和過度效果
- 路由
- vue-cli
- Vuex
認識 Vue
關(guān)于 Vue 的描述有不少，不外乎都會拿來與 Angular 和 React 對比，同樣頭頂 MVVM 雙向數(shù)據(jù)驅(qū)動設(shè)計模式光環(huán)的 Angular 自然被對比的最多，但到目前為止，Angular 在熱度上已明顯不及 Vue，性能已成為最大的詬病。
在我看來，Vue 和 Angular 的對比有種早些年 Java 和 ASP.NET 的對比，對于開發(fā)者而言，ASP.NET 官方本身已實現(xiàn)好了大量的框架和功能，使用起來非常的方便快捷，同時也提供了無限的可擴展性，對比起 Java 而言，后者在本身框架和功能上都不及 ASP.NET，但同樣都擁有無限的可擴展性，相比之下，本來 ASP.NET 很有一統(tǒng)天下的可能，但現(xiàn)實終歸現(xiàn)實，ASP.NET 本身的框架和功能實現(xiàn)并沒有換來多少稱贊，反在性能和安全性方面被詬病。回看 Vue 和 Angular 的陣營，我也總有這么一種感覺。
所以，在這個開源的年代，我認為一個框架功能不需要有多么強大，再強大再完善的功能都抵不上“適合”兩字，反而輕量級且有無限可擴展性會成為所有開發(fā)者的追求。
關(guān)于 Vue、React 和 Angular，其實都是在原生 JS 基礎(chǔ)上，對面向?qū)ο蟛灰粯拥膶崿F(xiàn)方式而已，所以要想使用這三者中的任意一種，首先要有一定的 JS 基礎(chǔ)和對面向?qū)ο笥幸欢ǖ恼J識。
在代碼層面，Vue 只是一個構(gòu)造函數(shù)，整個 Vue 的實現(xiàn)都在實例化這個構(gòu)造函數(shù)開始。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app"></div>
var vm = new Vue({
el: '#app'// Vue 實例元素
data: {
//數(shù)據(jù)
}
...
})
認識數(shù)據(jù)驅(qū)動模式
開始接觸前端編程的基本上都是先學習 DOM 節(jié)點操作，jQuery 在這一領(lǐng)域上一度成為了標準，所以在前端編程的領(lǐng)域中，jQuery 幾乎是每個開發(fā)者的標配。隨著前后端分離的成熟，產(chǎn)品或項目都趨于分布式部署，開發(fā)者已不滿足于操作 DOM 節(jié)點， 設(shè)計模式便慢慢的被前端化。
數(shù)據(jù)驅(qū)動的設(shè)計模式在思維邏輯上與 DOM 節(jié)點操作完全不一樣。
<div id="div1"></div> <div id="app"> <span>{{message}}</span> </div>
//DOM 節(jié)點操作
document.getElementById('div1').innerText = '節(jié)點被動改變'
//Vue 數(shù)據(jù)驅(qū)動： 當 message 發(fā)生改變的時候，span 會相應(yīng)的發(fā)生改變，而不需要手動去改變 span。
var vm = new Vue({
el: '#app',
data: {
message: '我是通過映射顯示的文本'
}
})
認識 MVVM 模式
M：Model，稱之為數(shù)據(jù)模型，在前端以對象的形式表現(xiàn)。
var data = {message: '我就是一個數(shù)據(jù)模型'}
V：View，視圖，也就是 HTML
<div id="app"> <span>我是視圖</span> </div>