JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查）
前言：關於
Vue框架
，好幾個月之前就聽說過，瞭解一項新技術之後，總是處於觀望狀態，一直在猶豫要不要系統學習下。正好最近有點空，就去官網瞭解了下，看上去還不錯的一個元件，就抽空研究了下。最近社群裡vue也確實挺火，各種入門博文眼花繚亂，博主也不敢說寫得多好，就當是個學習筆記，有興趣的可以看看。
一、MVVM大比拼
目前市面上比較火的MVVM框架也是一抓一大把，比如常見的有Knockout。js、Vue。js、AvalonJS、Angularjs等，每一款都有它們自己的優勢。
Knockout：微軟出品，可以說是MVVM的模型領域內的先驅，使用函式偷龍轉鳳，最短編輯長度演算法實現DOM的同步，相容IE6，實現高超，但原始碼極其難讀，最近幾年發展緩慢。
Vue：是最近幾年出來的一個開源Javascript框架，語法精簡，實現精緻，但對瀏覽器的支援受限，最低只能支援IE9。
AvalonJS：是一個簡單易用迷你的MVVM框架，由大神司徒正美研發。使用簡單，實現明快。
React：React並不屬於MVVM架構，但是它帶來virtual dom的革命性概念，受限於檢視的規模。
Angularjs：Google出品，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模組化、自動化雙向資料繫結、
語義化標籤
、依賴注入等等。入門容易上手難，大量避不開的概念也是很頭疼的。
更多
MVVM框架
優缺點比較，可以看下 這裡 。
其實在博主的博文裡面，說得最多的還是那句：任何技術和框架都有它存在的價值和意義！由上也可以看出沒有哪個框架是真正完美的，關鍵看你如何取捨，在你的專案中用好了以上任何一種框架，你就是技術大牛。不過話雖這樣說，博主覺得多瞭解一些框架對我們並無壞處，至少能開闊我們的眼界吧。
二、Vue常用網址
上文說了，Vue是一個開源框架，最新版本已經更新到了2。0，是一個獨立的Javascript框架，不依賴於任何其他框架（例如jquery），下面是博主收集的一些常用網址。
Vue。js開源地址：vuejs/vue
Vue。js英文api地址：Vue。js
後來博主又找到一箇中文的api地址，感謝開源社群工作者的翻譯。
https：//
vuefe。cn/api/
三、Vue基礎入門
1、MVVM圖例
說到MVVM，先來看看下面下面這張圖
這張圖足以說明MVVM的核心功能，在這三者裡面，ViewModel無疑起著重要的橋樑作用。
一方面，透過ViewModel將Model的資料繫結到View的Dom元素上面，當Model裡面的資料發生變化的時候，透過ViewModel裡面資料繫結的機制，觸發View裡面Dom元素的變化；
另一方面，又透過ViewModel來監聽View裡面的Dom元素的資料變化，當頁面上面的Dom元素髮生變化的時候，ViewModel透過Dom樹的監聽機制，觸發對應的Model的資料變化。
當然在Vue。js裡面ViewModel也是核心部件，它就是一個Vue例項。這個例項作用於單個或者多個html元素，從而實現Dom樹監聽和資料繫結的雙向更新操作。
2、第一個Vue例項
關於第一個例項，無疑是最簡單的應用。要使用vue，不用多說，肯定是先去github上面下載原始碼嘍，然後引入到我們的專案中來，需要引用的js就一個vue。js，版本是2。0。5。
先來看一個最簡單的例子：
<
body
>
<
div
id
=
“app”
>
<
h1
>
姓名：{{ Name }}
h1
>
<
h1
>
年齡：{{ Age }}
h1
>
<
h1
>
學校：{{ School }}
h1
>
div
>
<
script
src
=
“Content/vue/dist/vue。js”
>
script
>
<
script
type
=
“text/javascript”
>
//Model
var
data
=
{
Name
：
‘小明’
，
Age
：
18
，
School
：
‘光明小學’
，
}
//ViewModel
var
vue
=
new
Vue
（{
el
：
‘#app’
，
data
：
data
，
}）；
script
>
body
>
這段程式碼不難理解，我們的Model就是
data變數
，而ViewModel就是這裡的new Vue（）得到的物件。這裡兩個最簡單的屬性相信大家一看就能明白。
el：表示繫結的Dom元素，此例子中表示的是父級的Dom元素。
data：需要繫結的資料Model。
如果僅僅是展示，只需要 姓名：{{ Name }} 這樣寫就好了。執行的效果如下：
值得一提的是 {{ Name }} 這種寫法僅僅只能實現單向繫結，只有在Model裡面資料發生變化的時候會觸發介面Dom元素的變化，反之並不能觸發Model資料的變化。可以透過瀏覽器的Console來驗證這一理論。
那麼，對於雙向繫結的機制，Vue是如何實現的呢？
3、雙向繫結
vue裡面提供了v-model指令，為我們方便實現Model和View的雙向繫結，使用也非常簡單。還是上文的例子，我們加入一個文字框，裡面使用v-model指令。
<
body
>
<
div
id
=
“app”
>
<
h1
>
編輯姓名：
<
input
type
=
“text”
v-model
=
“Name”
/>
h1
>
<
h1
>
姓名：{{ Name }}
h1
>
<
h1
>
年齡：{{ Age }}
h1
>
<
h1
>
學校：{{ School }}
h1
>
div
>
<
script
src
=
“Content/vue/dist/vue。js”
>
script
>
<
script
type
=
“text/javascript”
>
//Model
var
data
=
{
Name
：
‘小明’
，
Age
：
18
，
School
：
‘光明小學’
，
}
//ViewModel
var
vue
=
new
Vue
（{
el
：
‘#app’
，
data
：
data
，
}）；
script
>
body
>
得到效果：
雙向繫結效果展示：
透過v-model指令，很方便的實現了Model和View之間的雙向繫結。單從這種繫結的方式來看，還是比Knockout要簡單一點，至少不用區分什麼普通屬性和監控屬性。
四、常用指令
本來按照Vue文件說明，常用指令應該是放在後面介紹的，但是從使用的層面考慮，先介紹常用指令還是非常必要的，因為博主覺得這些指令是我們入手使用Vue的橋樑，沒有這些基石，一切的高階應用都是空話。
Vue裡面為我們提供的常用指令主要有以下一些。
v-text
v-html
v-if
v-show
v-else
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once
每一個指令都可以連結到相關文件，博主覺得文件裡面每種指令的語法寫得非常詳細，在此就沒必要重複做說明了，下面博主打算將一些常用的指令以分組的形式分別結合demo來進行解釋說明。
1、v-text、v-html指令
v-text、v-html這兩者分為一組很好理解，一個用於繫結文字，一個用於繫結html。上文使用到的 {{ Name }}這種寫法就是v-text的的縮寫形式。這個很簡單，沒什麼好糾結的，看一個Demo就能明白。
<
body
>
<
div
id
=
“app”
>
<
h1
>
姓名：
<
label
v-text
=
“Name”
>
label
>
h1
>
<
h1
>
姓名：{{ Name }}
h1
>
<
div
style
=
“font-size：30px；font-weight：bold；”
v-html
=
“Age”
>
年齡：
div
>
div
>
<
script
src
=
“Content/vue/dist/vue。js”
>
script
>
<
script
type
=
“text/javascript”
>
//Model
var
data
=
{
Name
：
‘小明’
，
Age
：
“”
，
School
：
‘光明小學’
，
}
//ViewModel
var
vue
=
new
Vue
（{
el
：
‘#app’
，
data
：
data
，
}）；
script
>
body
>
效果如下：
程式碼說明：
{{Name}}這種寫法和v-text的作用是相同的，用於繫結標籤的text屬性。注意如果標籤沒有text屬性，該繫結會失效，比如你在一個文字框上面使用v-text是沒有效果的
由得到的效果可以看出，v-html繫結後會覆蓋原來標籤裡面的內容（比如上面的“年齡：”），記住此處是覆蓋而非append。
對於v-html應用的時候要慎重，在網站上動態渲染任意 HTML 有一定的危險存在，因為容易導致 XSS 跨站指令碼攻擊。所以最好是在信任的網址上面使用。
注意v-text和v-html繫結都是單向的，只能從Model到View的繫結，不能實現View到Model的更新。
2、v-model指令
v-model上面有介紹它的雙向繫結功能，對於v-model指令，vue限定只能對錶單控制元件進行繫結，常見的有、