正文
創(chuàng)新互聯(lián)是一家集網站建設,陽江企業(yè)網站建設,陽江品牌網站建設,網站定制,陽江網站建設報價,網絡營銷,網絡優(yōu)化,陽江網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。
前言：關于Vue框架，好幾個月之前就聽說過，了解一項新技術之后，總是處于觀望狀態(tài)，一直在猶豫要不要系統(tǒng)學習下。正好最近有點空，就去官網了解了下，看上去還不錯的一個組件，就抽空研究了下。最近園子里vue也確實挺火，各種入門博文眼花繚亂，博主也不敢說寫得多好，就當是個學習筆記，有興趣的可以看看。
一、MVVM大比拼
關于MVVM，原來在介紹knockout.js的時候有過講解，目前市面上比較火的MVVM框架也是一抓一大把，比如常見的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它們自己的優(yōu)勢。
其實在博主的博文里面，說得最多的還是那句：任何技術和框架都有它存在的價值和意義！由上也可以看出沒有哪個框架是真正完美的，關鍵看你如何取舍，在你的項目中用好了以上任何一種框架，你就是技術大牛。不過話雖這樣說，博主覺得多了解一些框架對我們并無壞處，至少能開闊我們的眼界吧。
二、Vue常用網址
上文說了，Vue是一個開源框架，最新版本已經更新到了2.0，是一個獨立的Javascript框架，不依賴于任何其他框架（例如jquery），下面是博主收集的一些常用網址。
Vue.js開源地址：https://github.com/vuejs/vue
Vue.js英文api地址：http://vuejs.org/v2/api/
后來博主又找到一個中文的api地址，感謝開源社區(qū)工作者的翻譯。https://vuefe.cn/api/
還有一個博主覺得很方便的就是一個Vue的在線測試網址：https://jsfiddle.net/chrisvfritz/50wL7mdz/。里面鍵入相應的html+js+css可以直接運行查看效果。
三、Vue基礎入門
1、MVVM圖例
說到MVVM，先來看看下面下面這張圖
這張圖足以說明MVVM的核心功能，在這三者里面，ViewModel無疑起著重要的橋梁作用。
ViewModel通過Dom樹的監(jiān)聽機制，觸發(fā)對應的Model的數(shù)據(jù)變化。
當然在Vue.js里面ViewModel也是核心部件，它就是一個Vue實例。這個實例作用于單個或者多個html元素，從而實現(xiàn)Dom樹監(jiān)聽和數(shù)據(jù)綁定的雙向更新操作。
2、第一個Vue實例
關于第一個實例，無疑是最簡單的應用。要使用vue，不用多說，肯定是先去github上面下載源碼嘍，然后引入到我們的項目中來，需要引用的js就一個vue.js，版本是2.0.5。
先來看一個最簡單的例子：
姓名：{{ Name }}
年齡：{{ Age }}
學校：{{ School }}
這段代碼不難理解，我們的Model就是data變量，而ViewModel就是這里的new Vue()得到的對象。這里兩個最簡單的屬性相信大家一看就能明白。
如果僅僅是展示，只需要 姓名：{{ Name }} 這樣寫就好了。運行的效果如下：
值得一提的是 {{ Name }} 這種寫法僅僅只能實現(xiàn)單向綁定，只有在Model里面數(shù)據(jù)發(fā)生變化的時候會觸發(fā)界面Dom元素的變化，反之并不能觸發(fā)Model數(shù)據(jù)的變化。可以通過瀏覽器的Console來驗證這一理論。
那么，對于雙向綁定的機制，Vue是如何實現(xiàn)的呢？
3、雙向綁定
vue里面提供了v-model指令，為我們方便實現(xiàn)Model和View的雙向綁定，使用也非常簡單。還是上文的例子，我們加入一個文本框，里面使用v-model指令。
編輯姓名：
姓名：{{ Name }}
年齡：{{ Age }}
學校：{{ School }}
得到效果：
雙向綁定效果展示：
通過v-model指令，很方便的實現(xiàn)了Model和View之間的雙向綁定。單從這種綁定的方式來看，還是比Knockout要簡單一點，至少不用區(qū)分什么普通屬性和監(jiān)控屬性。
四、常用指令
本來按照Vue文檔說明，常用指令應該是放在后面介紹的，但是從使用的層面考慮，先介紹常用指令還是非常必要的，因為博主覺得這些指令是我們入手使用Vue的橋梁，沒有這些基石，一切的高級應用都是空話。
Vue里面為我們提供的常用指令主要有以下一些。
每一個指令都可以鏈接到相關文檔，博主覺得文檔里面每種指令的語法寫得非常詳細，在此就沒必要重復做說明了，下面博主打算將一些常用的指令以分組的形式分別結合demo來進行解釋說明。
1、v-text、v-html指令
v-text、v-html這兩者分為一組很好理解，一個用于綁定文本，一個用于綁定html。上文使用到的 {{ Name }}這種寫法就是v-text的的縮寫形式。這個很簡單，沒什么好糾結的，看一個Demo就能明白。
姓名：
姓名：{{ Name }}
年齡：
效果如下：
代碼說明：
{{Name}}這種寫法和v-text的作用是相同的，用于綁定標簽的text屬性。注意如果標簽沒有text屬性，該綁定會失效，比如你在一個文本框上面使用v-text是沒有效果的
由得到的效果可以看出，v-html綁定后會覆蓋原來標簽里面的內容（比如上面的“年齡：”），記住此處是覆蓋而非append。
對于v-html應用的時候要慎重，在網站上動態(tài)渲染任意 HTML 有一定的危險存在，因為容易導致 XSS 跨站腳本攻擊。所以最好是在信任的網址上面使用。
注意v-text和v-html綁定都是單向的，只能從Model到View的綁定，不能實現(xiàn)View到Model的更新。
2、v-model指令
v-model上面有介紹它的雙向綁定功能，對于v-model指令，vue限定只能對表單控件進行綁定，常見的有、
以上列舉了v-model的一些常見用法，應該都不難，基本都是雙向綁定，效果如下：
關于selece的數(shù)據(jù)源的動態(tài)綁定，我們留在v-for指令的時候介紹。
3、v-if、v-else指令
v-if和v-else是一對離不開的好兄弟，使用條件運算符判斷時常用。需要說明的是，v-if可以單獨使用，但是v-else的前面必須要有一個v-if的條件或者v-show指令（后面介紹），這個和我們編程的原理是一樣一樣的。
它們作為條件渲染指令，他們的基礎語法如下：
v-if="expression",v-else;
注意這里的v-else可以不寫，expression表達式是一個返回bool類型的屬性或者表達式。
姓名：
是否已婚：是
大人or小孩：大人小屁孩
學校：{{ School }}
得到結果：
只有有一點編程基礎，上述應該不難看懂。
4、v-show指令
v-show指令表示根據(jù)表達式之bool值，覺得是否顯示該元素。需要說明的是，如果bool值false，對應的Dom標簽還是會渲染到頁面上面，只是將該標簽的css屬性display設為none而已。而如果你用v-if值，bool值為false的時候整個dom樹都不被渲染到頁面上面。從這點上來說看，如果你的需求是需要經常切換元素的顯示和隱藏，使用v-show效率更高，而如果你只做一次條件判斷，使用v-if更加合適。
v-show還常和v-else一起使用，表示如果v-show條件滿足，則顯示當前標簽，否則顯示v-else標簽。
姓名：
是否已婚：是
學校：{{ School }}
得到效果：
5、v-for指令
v-for 指令需要以 item in items 形式的特殊語法。常用來綁定數(shù)據(jù)對象。
最簡單的例子：
- {{value}}
效果：
除了基礎數(shù)據(jù)之外，還支持Json數(shù)組的綁定。比如：
- 姓名：{{value.Name}}，年齡：{{value.Age}}
效果：
在v-for里面，可以使用 標簽來渲染多個元素塊，下面就基于bootstrap樣式使用v-for、v-if、v-else等實現(xiàn)一個簡單的demo。
得到效果
是不是很easy！需要說明一點的是，pages是10，然后遍歷它的時候，page的值會從1依次到10。
v-for指令除了支持數(shù)據(jù)對象的迭代以外，還支持普通Json對象的迭代，比如：
- {{ key }} : {{ value }}
- {{ index }}. {{ key }} : {{ value }}
得到效果：
6、v-once指令
v-once表示只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點將被視為靜態(tài)內容并跳過。什么意思呢？還是來看demo說話：
姓名：
年齡：{{ Age }}
學校：{{ School }}
效果動態(tài)圖：
可以看出，只要使用v-once指令的，View和Model之間除了初次渲染同步，之后便不再同步，而同一次綁定里面沒使用v-once指令的還是會繼續(xù)同步。
7、v-bind指令
對于html標簽的text、value等屬性，Vue里面提供了v-text、v-model去綁定。但是對于除此之外的其他屬性呢，這就要用到接下來要講的v-bind指令了。博主的理解是v-bind的作用是綁定除了text、value之外的其他html標簽屬性，常見的比如class、style、自定義標簽的自定義屬性等。它的語法如下：
v-bind:property="expression"
先來看幾個簡單的例子。
姓名：
是否紅領巾：
學校星級：aa
需要說明的是同一個標簽里面的同一個屬性，可以既有綁定的寫法，也有靜態(tài)的寫法，組件會自動幫你合并，比如上文中的class屬性。
得到效果如下：
關于自定義屬性的綁定，打算在綜合應用里面來說。
8、v-on指令
屬性jquery的朋友應該很熟悉這個“on”，對于時間的監(jiān)聽和綁定，jquery里面最常用的就是on了。同樣，在Vue里面，v-on指令用來綁定標簽的事件，其語法和v-bind基本類似。
v-on:event="expression";
這里的event可以是Javascript里面的常用事件，也可以是自定義事件。
姓名：
年齡：{{ Age }}
這段代碼是一個最簡單的應用，直接在click事件里面執(zhí)行邏輯，改變變量的值。效果如下：
除了直接在標簽內寫處理邏輯，還可以定義方法事件處理器。
姓名：
年齡：{{ Age }}
結果應該不難猜。
9、實例一：30分鐘搞定增刪改查
有了我們的Vue框架，關于行內編輯的增刪改查，我們很簡單即可實現(xiàn)，如果你熟的話應該還不用30分鐘吧。代碼如下：
重慶分公司
重慶分公司