前言
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" rel="external nofollow" >這是一個鏈接</a><img :src:href="imgUrl" rel="external nofollow" alt="這是一張圖片" />
6.表達式
<span>1+1=: {{ 1+1 }}</span>五、事件綁定
使用下面的語法可以將頁面元素的交互事件和vue實例的methods屬性里面的方法綁定起來。
1. 點擊事件
<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官網去學習更多高級應用。
以上所述是小編給大家介紹的前端框架vue詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
