認識 Vue

關于 Vue 的描述有不少，不外乎都會拿來與 Angular 和 React 對比，同樣頭頂 MVVM 雙向數據驅動設計模式光環(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ā)者的追求。

關于 Vue、React 和 Angular，其實都是在原生 JS 基礎上，對面向對象不一樣的實現(xiàn)方式而已，所以要想使用這三者中的任意一種，首先要有一定的 JS 基礎和對面向對象有一定的認識。

在代碼層面，Vue 只是一個構造函數，整個 Vue 的實現(xiàn)都在實例化這個構造函數開始。

<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"></div> var vm = new Vue({el: '#app'// Vue 實例元素data: {//數據}...})

認識數據驅動模式

開始接觸前端編程的基本上都是先學習 DOM 節(jié)點操作，jQuery 在這一領域上一度成為了標準，所以在前端編程的領域中，jQuery 幾乎是每個開發(fā)者的標配。隨著前后端分離的成熟，產品或項目都趨于分布式部署，開發(fā)者已不滿足于操作 DOM 節(jié)點， 設計模式便慢慢的被前端化。

數據驅動的設計模式在思維邏輯上與 DOM 節(jié)點操作完全不一樣。

<div id="div1"></div><div id="app"><span>{{message}}</span></div> //DOM 節(jié)點操作document.getElementById('div1').innerText = '節(jié)點被動改變' //Vue 數據驅動： 當 message 發(fā)生改變的時候，span 會相應的發(fā)生改變，而不需要手動去改變 span。var vm = new Vue({el: '#app',data: {message: '我是通過映射顯示的文本'}})

認識 MVVM 模式

M：Model，稱之為數據模型，在前端以對象的形式表現(xiàn)。

var data = {message: '我就是一個數據模型'}

V：View，視圖，也就是 HTML

<div id="app"><span>我是視圖</span></div>

VM：ViewModel，就是連接數據和視圖的橋梁，當 Model 發(fā)生改變的時候，ViewModel 便將數據映射到視圖。

那么數據驅動模式和 MVVM 模式有什么關系，換句話說，MVVM 是數據驅動模式的一種實現(xiàn)，Vue 是 MVVM 的一種實現(xiàn)。

總結

以上是生活随笔為你收集整理的Vue 教程第一篇——基础概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。