|
前言 vue是現(xiàn)在很火的一個(gè)前端MVVM框架，它以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建，與angular和react并稱前端三大框架。相比angular和react，vue更加輕巧、高性能、也很容易上手。大家也可以移步vue官網(wǎng)，看一下它的介紹和核心功能介紹。簡(jiǎn)單粗暴的理解就是：用vue開(kāi)發(fā)的時(shí)候，就是操作數(shù)據(jù)，然后vue就會(huì)處理，以數(shù)據(jù)驅(qū)動(dòng)去改變DOM。使用vue，我們可以集中精力于如何處理數(shù)據(jù)上，數(shù)據(jù)改變后，頁(yè)面顯示也會(huì)隨之改變。相比jquery那種操作DOM元素的開(kāi)發(fā)方式，能有效提高開(kāi)發(fā)效率，個(gè)人覺(jué)得有接近兩三倍的提升。 一、 安裝 我們可以通過(guò)npm或者直接引入script標(biāo)簽兩種方式來(lái)安裝vue。這里為了方便說(shuō)明，采用第二種方式，我們只需要在html頁(yè)面引入標(biāo)簽即可。個(gè)人測(cè)試開(kāi)發(fā)可以使用bootcdn的資源。 <script src='https://cdn./vue/2.6.10/vue.min.js'></script> 二、核心思想 “數(shù)據(jù)綁定”是vue的核心思想，這里筆者舉一個(gè)hello world例子來(lái)說(shuō)明這種思想。 html代碼 <div id='app'> <p>{{ message }}</p> <input v-model='message'></div>javascript代碼 new Vue({ el: '#app', data: { message: 'Hello Vue!' }}) 頁(yè)面效果  我們?cè)趆tml代碼里面設(shè)置了一個(gè)id為“app”的div，然后在javascript里面實(shí)例化了一個(gè)屬性el為“#app”的vue對(duì)象，表示這個(gè)vue對(duì)象用來(lái)處理該div的顯示。 接著在vue對(duì)象的data屬性里面設(shè)置了一個(gè)message字段，把這個(gè)字段和頁(yè)面的p元素和input元素雙向綁定起來(lái)。 這樣只要message字段改變，p元素的內(nèi)容就會(huì)改變。只要input的輸入內(nèi)容改變，message字段就會(huì)改變，從而導(dǎo)致p元素的內(nèi)容改變。所以我們改變頁(yè)面中輸入框的值，p元素里面的內(nèi)容也隨之改變。 三、vue實(shí)例基本組成 new Vue({ el: '#app', data: { message: 'Hello Vue!', url: 'www.salasolo.com' }, methods:{ showMsg: function(){ alert(this.message) }, jumpUrl: function(){ location.href = this.url } },})可以看到，一個(gè)vue實(shí)例有三個(gè)基本的屬性，el屬性用來(lái)指定綁定的頁(yè)面容器，data屬性里面存放頁(yè)面展示的數(shù)據(jù)，methods放置頁(yè)面調(diào)用的一些方法。 四、數(shù)據(jù)綁定 使用下面的語(yǔ)法可以將頁(yè)面元素的內(nèi)容和vue實(shí)例的data屬性里面的字段綁定起來(lái)。 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'>這是一個(gè)鏈接</a><img :src:href='imgUrl' alt='這是一張圖片' /> 6.表達(dá)式 <span>1+1=: {{ 1+1 }}</span>五、事件綁定 使用下面的語(yǔ)法可以將頁(yè)面元素的交互事件和vue實(shí)例的methods屬性里面的方法綁定起來(lái)。 1. 點(diǎn)擊事件 <button type='button' v-on:click='showMsg' >點(diǎn)擊調(diào)用showMsg方法</button> 2.選擇事件 <select v-on:change='showChangeMsg' ><option value='1'>選項(xiàng)一</option><option value='2'>選項(xiàng)二</option></select> 六、綜合例子 html代碼 <div id='app'> <h3>商品列表</h3> <hr/> <table> <th> <td>商品名</td><td>商品圖片</td><td>商品數(shù)量</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('刪除成功'); }); } },})上面這段代碼表示，在頁(yè)面初始化時(shí)，通過(guò)ajax請(qǐng)求后端服務(wù)器得到商品列表數(shù)據(jù)賦值給vue實(shí)例數(shù)據(jù)的list字段，然后在頁(yè)面中使用vue模版語(yǔ)法循環(huán)渲染出來(lái)，并給每個(gè)商品綁定了一個(gè)刪除按鈕點(diǎn)擊事件，點(diǎn)擊后調(diào)用vue實(shí)例的deleteProduct執(zhí)行商品刪除操作。 以上就是vue框架的簡(jiǎn)單入門介紹，大家可以到vue官網(wǎng)去學(xué)習(xí)更多高級(jí)應(yīng)用。
|
|
|
