vue是現在很火的一個前端MVVM框架，它以資料驅動和元件化的思想構建，與angular和react並稱前端三大框架。
相比angular和react，vue更加輕巧、高效能、也很容易上手。大家也可以移步vue官網，看一下它的介紹和核心功能介紹。簡單粗暴的理解就是：用vue開發的時候，就是運算元據，然後vue就會處理，以資料驅動去改變DOM。使用vue，我們可以集中精力於如何處理資料上，資料改變後，頁面顯示也會隨之改變。
相比jquery那種操作DOM元素的開發方式，能有效提高開發效率，個人覺得有接近兩三倍的提升。
一、 安裝
我們可以通過npm或者直接引入script標籤兩種方式來安裝vue。這裡為了方便說明，採用第二種方式，我們只需要在html頁面引入標籤即可。個人測試開發可以使用bootcdn的資源。
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
複製程式碼二、核心思想
“資料繫結”是vue的核心思想，這裡筆者舉一個hello world例子來說明這種思想。
html程式碼
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
複製程式碼javascript程式碼
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
複製程式碼頁面效果
我們在html程式碼裡面設定了一個id為“app”的div，然後在javascript裡面例項化了一個屬性el為“#app”的vue物件，表示這個vue物件用來處理該div的顯示。
接著在vue物件的data屬性裡面設定了一個message欄位，把這個欄位和頁面的p元素和input元素雙向繫結起來。
這樣只要message欄位改變，p元素的內容就會改變。只要input的輸入內容改變，message欄位就會改變，從而導致p元素的內容改變。所以我們改變頁面中輸入框的值，p元素裡面的內容也隨之改變。
三、vue例項基本組成
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
url: 'www.salasolo.com'
},
methods:{
showMsg: function(){
alert(this.message)
},
jumpUrl: function(){
location.href = this.url
}
},
})
複製程式碼可以看到，一個vue例項有三個基本的屬性，el屬性用來指定繫結的頁面容器，data屬性裡面存放頁面展示的資料，methods放置頁面呼叫的一些方法。
四、資料繫結
使用下面的語法可以將頁面元素的內容和vue例項的data屬性裡面的欄位繫結起來。
1.文字
<span>訊息: {{ message }}</span>
複製程式碼2.原始html
<span v-html="htmlCode"></span>
複製程式碼3.列表
<span v-for="item in list">{{item}}</span>
複製程式碼4.條件
<span v-if="isHuman">我是人類</span>
<span v-else>我不是人類</span>
複製程式碼5.屬性
<a v-bind:href="url">這是一個連結</a>
<img :src:href="imgUrl" alt="這是一張圖片" />
複製程式碼6.表示式
<span>1+1=: {{ 1+1 }}</span>
複製程式碼五、事件繫結
使用下面的語法可以將頁面元素的互動事件和vue例項的methods屬性裡面的方法繫結起來。
- 點選事件
<button type="button" v-on:click="showMsg" >點選呼叫showMsg方法
</button>
複製程式碼2.選擇事件
<select v-on:change="showChangeMsg" >
<option value="1">選項一</option>
<option value="2">選項二</option>
</select>
複製程式碼六、綜合例子
html程式碼
<div id="app">
<h3>商品列表</h3>
<hr/>
<table>
<th>
<td>商品名</td><td>商品圖片</td><td>商品數量</td><td>操作</td>
</th>
<tr v-for="(item,index) in list">
<td>{{item.name}}</td>
<td><img src="item.imgUrl" /></td>
<td>{{item.quantity}}</td>
<td>
<button type="button" v-on:click="delete(index)">刪除此商品</button>
</td>
</tr>
</table>
</div>
複製程式碼javascript程式碼
new Vue({
el: '#app',
data: {
list:[]
},
created:function(){
this.loadProductList();
},
methods:{
loadProductList:function(){
$.post('/product/apiGetList',function(data){
this.list = data.data.list;
});
},
deleteProduct:function(index){
var _this = this;
$.post('/product/apiDelete',{productId:_this.list[index]['productId']},function(){
alert('刪除成功');
});
}
},
})
複製程式碼上面這段程式碼表示，在頁面初始化時，通過ajax請求後端伺服器得到商品列表資料賦值給vue例項資料的list欄位，然後在頁面中使用vue模版語法迴圈渲染出來，並給每個商品繫結了一個刪除按鈕點選事件，點選後呼叫vue例項的deleteProduct執行商品刪除操作。
以上就是vue框架的簡單入門教程，大家可以到vue官網去學習更多高階應用。
很多時候跟著書和網站查詢資料學習，會發現沒有目標，學了很多卻不知道自己到底能夠做出什麼成績。要有一個清晰的職業學習規劃，學習過程中會遇到很多問題，你可以到我們的前端學習交流q-u-n【 731771211 】，基礎，進階。從企業招聘人才需求 到怎麼學習前端開發，和學習什麼內容都有免費系統分享，讓你無論是自學還是找相應的培訓都能讓你少走彎路。希望可以幫助你快速瞭解前端，學習前端
點選：加入