概述
官網的介紹
感覺還是虛了，如果對一個沒用過Vue的程式設計師來說。為啥用Vue來開發前端，只是因為MVC，或者說的MVVM，如果還加一條，就是這個MVVM做得效能還不錯。
例項下面這個例子，以往直接用javascript來實現，說不得要監聽下input的輸入事件，然後還要操作下結果的資料。用Vue的確比較省事。
一個最小的例子
<html> <head> <meta charset="UTF-8"> <script src="/Js/vue.js"></script> </head> <body> <span class="title"># 看Vue.js如何處理資料與檢視的繫結. </s></span> <div id="app"> {{ message }} <p><input v-model="x"/> + <input v-model="y"/>=<span style="color: red;" v-text="result"></span></p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Vue.js , hello world!', x:0, y:0 }, computed:{ result:function(){ let x = parseFloat(this.x); let y = parseFloat(this.y); return x+ y; } } }); </script> </body></html>文字
有多重方式，實現html標籤內值與js值的關聯關係。如在標籤內的
{{text-msg-var-name}}
以及在標籤屬性的
v-text="text-msg-var-name"
Html
v-html="html-msg-var-name"
繫結屬性v-bind
可以將標籤的屬性與js值起來，如v-bind:value用在input標籤中。
但是這個只是單向的（js變數到輸入框），如果要實現雙向的，可以用v-model.
繫結事件v-on
<button class="default" v-on:click="addToChat"> Add to chat </button>條件v-if
用來實現對一個標籤的存在與否的控制。
computed
當資料發生變化時，computed裡面的函式會被執行。
watch
特定的格式函式，監聽某個引數的變化，執行相關動作。
繫結樣式v-bind:class={classname:isCond;...}
根據isCond的bool值，確認classname的存在與否。
迴圈v-for
....
總結Vue並非一個構件工具，如果要做分工協作，還是要與webpack結合起來一起看。但是這個也許並非更好的選擇，如果基於less、typescript來完成css與js的編寫，與gulp結合使用，也許會更好
最新評論