轉自：https://www.jianshu.com/p/5d0d913d2453 轉到這只是自己記錄一下
如果說是JQuery是手工作坊，那么Vue.js就像是一座工廠，雖然Vue.js做的任何事情JQuery都可以做，但無論是代碼量還是流程規范性都是前者較優。
Vue.js的官方中文教程其實也是一個不錯的教程，不過相比於一次性把所有概念掌握，我更傾向於先會用，之后再在實際應用中把未涉及到的知識點逐步補全。
就像開車，不是非要知道發動機的工作原理才能上路的，甚至你可能一輩子也不用知道。
好了，開始吧
准備
首先，以下幾點希望你已經知道或者做到了:
- 你會用html+css+javascript 寫一些網頁
- 你知道什么是DOM和BOM(Browser Object Model)
- 你知道Vue.js是一個框架而不是一個新語言
- 你會用百度或者Google其中之一去查找答案
接着，我會圍繞以下幾個Vue.js的基本（核心）使用方法逐個做測試和使用說明：
- 新建vue對象
- 數據綁定
- 事件綁定
- 表單控件綁定
最后，根據上面的知識點結合起來寫出我們的第一個vuejs前端頁面
新建Vue對象
- 引用vue.js
在桌面建立一個 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> - 新建Vue實例
在Vue.html中插入一個id為firstVue的<div>
<div id="firstVue"></div> 在Vue.html中插入下面js代碼:
<script type="text/javascript"> var myVue = new Vue({ el:"#firstVue" }) </script> 然后整個代碼看起來是這樣的:
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></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框架在html頁面的引入工作完成，但是如果我們訪問這個頁面並不能看到任何效果,一篇空白
數據綁定
VUE這個框架的數據流向是單向的，不懂沒關系，記住就好了
所以數據綁定后的數據流向是從
vue實例——>DOM文檔的
我們給上一步的<div>標簽添加下面一句話
{{ my_data }}
變成這樣
<div id="firstVue"> {{my_data}} </div> 這個雙大括號的語法叫做mustache 語法，大括號里面的是作為變量形式出現的。
然后在創建 vue實例的代碼中加入下面數據聲明:
data:{ my_data: "test" } 整個代碼看起來向下面這樣:
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> {{my_data}} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#firstVue", data:{ my_data: "test" } }) </script> </html> data參數用來綁定VUE實例的數據變量，每個不同變量之間用逗號分隔，上面我們綁定了自定義變量my_data，並賦初值'test'
完成數據綁定工作，<div>標簽里的{{myData}}數據會隨着myVue實例里的myData數據的變動而變動，瀏覽器查看當前頁面,會出現'test'字符串，說明數據綁定成功
這是在HTML標簽內部的數據綁定，那么如果想綁定某個HTML標簽的屬性值，就要用到v-bind:屬性了，比如我想綁定一個標簽是否可見的屬性(hidden)，那么就應該這么寫:
<div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div> v-bind:后面寫想要綁定的屬性，my_hidden也不需要用兩個大括號括起來了，直接寫就可以了，然后在VUE實例中聲明這個綁定數據
var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" } }) 這時候再瀏覽這個網頁,又變成了空白，但是F12查看源代碼，發現其實是div標簽的hidden屬性被激活了
當然，v-bind:不僅可以綁定hidden屬性，disabled屬性，style屬性, color屬性，凡是標簽有的屬性，都可以通過這個方法進行綁定
v-bind由於經常會用到，所以也可以縮寫成冒號:，比如上面的<div>標簽就完全可以這樣寫
<div id="firstVue" :hidden="my_hidden">{{my_data}}</div> 這是和v-bind:hidden="my_hidden"完全等價的一種寫法
至此，Vue.js兩種綁定數據的方法都寫完並進行了測試
事件綁定
v-bind:是用來綁定數據的，v-on:則是用來綁定事件的，比如我要綁定一個<button>的 click事件就這么寫
<button v-on:click="clickButton()">Click Me</button> 當然這里的click可以換成任意一個html事件，比如load , doubleclick , mouseon , mousedown這些，不過click肯定是我們最常用的
將click動作綁定到clickButton()函數之后就需要實現這個函數了,我們要在之前的vue實例中加入新字段methods
var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) 我們在methods關鍵字里面定義了clickButton方法，並在方法內改變了之前定義的my_data變量的值
這里涉及到如何在vue實例中引用data字段的變量，如上所示，需要加this后面直接寫要引用的變量就可以了
如果不加this，系統會默認你想引用的是一個全局變量，可是這里我們需要引用的是這個vue實例里的局部變量
現在整體代碼和之前有些變化，看起來是這樣的：
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <button v-on:click="clickButton">Click Me</button> <p>{{my_data}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script> </html> 好了，運行一下，點擊Click Me的時候"test"就會變成"Wow! I'm changed!"，這是因為變量my_data的改變。
另外，v-on:語法同樣有一個縮寫@，比如v-on:click="clickButton"就等價於@click="clickButton"
表單控件綁定
之前有說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>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <input type="text" v-model="my_data" /> <button v-on:click="clickButton">Click Me</button> <p>{{my_data}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script> </html> 可以發現，我們增加了一個<input>標簽，並且用v-model語法綁定了之前定義的變量my_data
這個時候，當我們在<input>輸入框輸入值的時候，v-model會實時將最新值(value)賦值給vue實例的my_data變量，而my_data變量又將實時展現在<p>標簽中
這樣我們看起來實現了這么一個數據流:
DOM1(input標簽)——>VUE——>DOM2(p標簽)
先從用戶輸入的DOM1獲取輸入保存在VUE實例，用從VUE實例里拿到數據輸出到DOM2
運行這個頁面，發現<p>標簽中的內容會隨着<input>標簽實時的變化，說明我們利用v-model語法變相實現了數據的雙向傳遞
總結
看看我們學到了什么
- 用
new Vue({})新建vue實例 - 使用
v-bind:和{{}}雙大括號語法在html中綁定變量 - 使用
v-on:和@語法綁定函數到標簽的事件 - 使用
v-model:語法使用戶的頁面輸入反向傳遞回vue實例變量
現在簡單完善一下上面的代碼，做成一個計數器程序，用戶可以在輸入框輸入任意數字，點擊按鈕進行總數累加
下面是對剛才代碼進行了一些小的改動，相信你一定可以看明白的
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <input type="number" v-model.number="my_step" /> <button v-on:click="clickButton">Add</button> <p>{{my_total}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_step: 1, my_total: 0 }, methods:{ clickButton:function(){ this.my_total = this.my_total + this.my_step } } }) </script> </html> 上面v-model.number后面的這個.number的意思是說在返回my_step值的時候自動轉換成integer類型，因為默認是string類型，所以要多這么一句。
作者：景行1023
鏈接：https://www.jianshu.com/p/5d0d913d2453
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。