若是說是JQuery是手工做坊，那麼Vue.js就像是一座工廠，雖然Vue.js作的任何事情JQuery均可以作，但不管是代碼量仍是流程規範性都是前者較優。javascript
Vue.js的官方中文教程其實也是一個不錯的教程，不過相比於一次性把全部概念掌握，我更傾向於先會用，以後再在實際應用中把未涉及到的知識點逐步補全。css
就像開車，不是非要知道發動機的工做原理才能上路的，甚至你可能一生也不用知道。html
好了，開始吧
前端
準備vue
首先，如下幾點但願你已經知道或者作到了:java
你會用html+css+javascript 寫一些網頁npm
你知道什麼是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>
<!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>
<div id="firstVue"> {{my_data}} </div>
這個雙大括號的語法叫作mustache 語法，大括號裏面的是做爲變量形式出現的。
而後在建立 vue實例的代碼中加入下面數據聲明:
data:{
my_data: "test"
}
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>
<!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>
1
v-bind:後面寫想要綁定的屬性，my_hidden也不須要用兩個大括號括起來了，直接寫就能夠了，而後在VUE實例中聲明這個綁定數據
var myVue = new Vue({
el:'#firstVue',
data:{
my_data: "test",
my_hidden: "hidden"
}
})
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!"
}
}
})
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>
<!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>
<!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>
<!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類型，因此要多這麼一句。
準備首先，如下幾點但願你已經知道或者作到了:你會用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>1新建Vue實例 在Vue.html中插入一個id爲firstVue的<div><div id="firstVue"></div>1在Vue.html中插入下面js代碼:<script type="text/javascript"> var myVue = new Vue({ el:"#firstVue" })</script>12345而後整個代碼看起來是這樣的:<!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>12345678910111213141516解釋一下代碼js變量 myVue 就是Vue建立的一個對象，能夠理解成把<div id="firstVue></div>和這個標籤裏面包含的全部DOM都實例化成了一個JS對象， 這個對象就是myVueel是Vue的保留字，用來指定實例化的DOM的ID號, #firstVue這句話就是標籤選擇器，告訴Vue要實例化ID=「firstVue」的這個標籤。至此，Vue.js框架在html頁面的引入工做完成，可是若是咱們訪問這個頁面並不能看到任何效果,一篇空白數據綁定VUE這個框架的數據流向是單向的，不懂不要緊，記住就行了 因此數據綁定後的數據流向是從vue實例——>DOM文檔的咱們給上一步的<div>標籤添加下面一句話{{ my_data }}1變成這樣<div id="firstVue"> {{my_data}}</div>123這個雙大括號的語法叫作mustache 語法，大括號裏面的是做爲變量形式出現的。而後在建立 vue實例的代碼中加入下面數據聲明:data:{ my_data: "test"}123整個代碼看起來向下面這樣:<!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>1234567891011121314151617181920data參數用來綁定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>1v-bind:後面寫想要綁定的屬性，my_hidden也不須要用兩個大括號括起來了，直接寫就能夠了，而後在VUE實例中聲明這個綁定數據var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }})1234567這時候再瀏覽這個網頁,又變成了空白，可是F12查看源代碼，發現實際上是div標籤的hidden屬性被激活了固然，v-bind:不只能夠綁定hidden屬性，disabled屬性，style屬性, color屬性，凡是標籤有的屬性，均可以經過這個方法進行綁定v-bind因爲常常會用到，因此也能夠縮寫成冒號:，好比上面的<div>標籤就徹底能夠這樣寫<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>1這是和v-bind:hidden="my_hidden"徹底等價的一種寫法至此，Vue.js兩種綁定數據的方法都寫完並進行了測試事件綁定v-bind:是用來綁定數據的，v-on:則是用來綁定事件的，好比我要綁定一個<button>的 click事件就這麼寫<button v-on:click="clickButton()">Click Me</button>1固然這裏的click能夠換成任意一個html事件，好比load , doubleclick , mouseon , mousedown這些，不過click確定是咱們最經常使用的將click動做綁定到clickButton()函數以後就須要實現這個函數了,咱們要在以前的vue實例中加入新字段methodsvar myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } }})123456789101112咱們在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>123456789101112131415161718192021222324252627好了，運行一下，點擊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>12345678910111213141516171819202122232425262728能夠發現，咱們增長了一個<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>12345678910111213141516171819202122232425262728上面v-model.number後面的這個.number的意思是說在返回my_step值的時候自動轉換成integer類型，由於默認是string類型，因此要多這麼一句。--------------------- 做者：秦洛1023 來源：CSDN 原文：https://blog.csdn.net/true1023/article/details/80674764 版權聲明：本文爲博主原創文章，轉載請附上博文連接！