簡介
這是一篇炒雞簡單的入門文章javascript
若是說是JQuery是手工做坊，那麼Vue.js就像是一座工廠，雖然Vue.js作的任何事情JQuery均可以作，但不管是代碼量仍是流程規範性都是前者較優。css
好了，開始吧html
準備
首先，我有以下假設:前端
- 你會用html+css+javascript 寫一些網頁
- 你知道什麼是DOM和BOM(Browser Object Model)
- 你知道Vue.js是一個框架而不是一個新語言
- 你會用百度或者Google其中之一
接着，我會圍繞如下幾個Vue.js的基本（核心）使用方法逐個作測試和使用說明：vue
- 新建vue對象
- 數據綁定
- 事件綁定
- 表單控件綁定
最後，根據上面的知識點結合起來寫一個VueDemo.htmljava
單元測試
- 引用vue.js
在桌面創建一個 Test.html , 而後引入 vue.js的CDN地址 https://unpkg.com/vue
<script type="text/javascript" src="https://unpkg.com/vue"></script>
- 新建Vue實例
在Test.html插入一個id爲"firstVue"的 div
<div id="firstVue"></div>
在Test.html中插入下面js代碼:ajax
<script type="text/javascript"> var myVue = new Vue({ el:"#firstVue" }) </script>
而後整個代碼看起來是這樣的:瀏覽器
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://unpkg.com/vue"></script> </head> <body> <div id="firstVue"> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#firstVue" }) </script> </html>
js變量 myVue 就是Vue建立的一個對象，能夠理解成把<div id="firstVue></div>和這個標籤裏面包含的全部DOM都實例化成了一個JS對象， 這個對象就是myVue ；'el'是Vue的保留字，用來指定實例化的DOM的ID號 ; '#firstVue'這句話就是標籤選擇器，告訴Vue要實例化ID=「firstVue」的這個標籤。框架
至此，Vue.js的引入和新建工做完成，可是若是咱們訪問這個頁面並不能看到任何效果,一篇空白，就不截圖了函數
- 數據綁定
VUE這個框架的數據流向是單向的，不懂不要緊，記住就行了
因此數據綁定後的數據流向是從vue實例——>DOM文檔的
咱們在上一步的<div>中加入下面代碼:
{{myData}}
這個雙大括號的語法叫作mustache 語法，
而後在建立 vue的代碼中加入下面數據聲明:
data:{ myData:"test" }
整個代碼看起來向下面這樣:
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://unpkg.com/vue"></script> </head> <body> <div id="firstVue"> {{myData}} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#firstVue", data:{ myData:"test" } }) </script> </html>
完成數據綁定工做，<div>標籤裏的{{myData}}數據會隨着myVue實例裏的myData數據的變更而變更，瀏覽器查看當前頁面,會出現'test'字符串，說明數據綁定成功
這是在HTML標籤內部的數據綁定，那麼若是想綁定某個HTML標籤的屬性值，就要用到v-bind:屬性了，好比我想綁定一個標籤是否可見的屬性(disabled)，那麼就應該這麼寫:
<div id="firstVue" v-bind:hidden="myHidden">{{myData}}</div>
v-bind:後面寫想要綁定的屬性，myDisabled也不須要用兩個大括號括起來了，直接寫就能夠了，而後在vue實例中聲明這個綁定數據
var myVue = new Vue({ el:'#firstVue', data:{ myData:"test", myHidden:"hidden" } })
這是後再瀏覽這個網頁,發現<div>隱藏起來了
固然，v-bind:不只能夠綁定hidden屬性，disabled屬性，style屬性, color屬性，凡是標籤有的屬性，均可以經過這個方法進行綁定
至此，Vue.js兩種綁定數據的方法都寫完並進行了測試
- 事件綁定
v-bind:是用來綁定數據的，v-on:則是用來綁定事件的，好比我要綁定一個<button>的click事件就這麼寫
<button v-on:click="tapButton()">Click Me</button>
固然這裏的click能夠換成任意一個html事件，好比load , doubleclick , mouseon , mousedown ,etc。
將click動做綁定到tapButton()函數以後就須要實現這個函數了,新的vue實例以下：
var myVue = new Vue({ el:'#firstVue', methods:{ tapButton:function(){ alert("Yes!Awesome!"); } } })
咱們在methods關鍵字裏面定義了tapButton方法的內容，顯示一個警告框。
如今總體代碼和以前有些不同，沒有了數據綁定，看起來是這樣的：
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://unpkg.com/vue"></script> </head> <body> <button id="firstVue" v-on:click="tapButton()">ClickMe</button> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', methods:{ tapButton:function(){ alert("Yes!Awesome!"); } } }) </script> </html>
好了，運行一下，每次點擊ClickMe的時候都會觸發tapButton函數從而彈出警告框
6.表單控件綁定
以前有說Vue這個框架是單向數據傳輸的，就是從vue實例傳送數據到DOM ，那麼咱們如何從DOM中實時獲取用戶輸入的數據賦值給vue實例呢，這用到了Vue.js提供給用戶的一個語法糖 v-model ,這個語法糖經過兩步實現了數據的反向傳遞，也就是從DOM傳送給vue實例數據。
下面說的原理看不懂能夠跳過，不會影響後續閱讀
v-model經過兩步實現了數據反向傳遞
第一步，綁定了DOM標籤的input事件(好比叫tapInput())
第二部，當用戶進行輸入時候，觸發tapInput()函數，tapInput()函數內部讀取此DOM標籤的Value值，賦值給vue實例
經過以上兩步，v-model語法糖實現了vue數據的反向傳輸
好，我直接寫一個例子吧
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://unpkg.com/vue"></script> </head> <body> <div id="firstVue"> <input type="text" v-model="inputData" /> <p>{{inputData}}</p> <div> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ inputData:"" } }) </script> </html>
能夠看到，咱們將<div id="firstVue">......</div>代碼塊所有實例化成一個vue實例，而後用v-model語法糖綁定上了inputData變量，此時，當咱們在input輸入框中輸入值得時候，input會實時將最新值(value)賦值給vue實例(myVue)的inputData變量。
而後，咱們在DOM中對inputData變量進行了數據綁定，每次inputData值變化的時候，就會實時展示在DOM上。
這樣咱們看起來實現了這麼一個數據流:
DOM1(input標籤)——>VUE——>DOM2(p標籤)
先從用戶輸入的DOM1獲取輸入保存在VUE實例，用從VUE實例裏拿到數據輸出到DOM2
運行程序，像是這樣：
編寫
如今我用上面提到的這幾點編寫一個前端計數器，用戶能夠在輸入框輸入任意數字，點擊按鈕進行總數累加
下面貼上代碼，看不懂的話翻上去再看一遍
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://unpkg.com/vue"></script> </head> <body> <div id="firstVue"> <p><input type="number" v-model="inputNum" /><button @click="add()">ADD</button></p> <p>{{total}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ inputNum:0, total:0 }, methods:{ add:function(){ this.total = parseInt(this.total) + parseInt(this.inputNum); } } }) </script> </html>
總結
上面會感受寫的很囉嗦 ，下次儘可能深刻Vue.js的進階內容講一下，
嗯，在這以前會先講一下Vue.js的插件，好比vue-resource.js，一個用來作http請求的插件，我都用它來作ajax。
做者：一杯濁酒難看紅塵透連接：https://www.jianshu.com/p/9000532590c1來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。