vue入門使用-創(chuàng)新互聯(lián)

vue的介紹官網都很清楚，連接在此：http://cn.vuejs.org/v2/guide/

阜新網站建設公司創(chuàng)新互聯(lián),阜新網站設計制作，有大型網站制作公司豐富經驗。已為阜新成百上千家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站建設要多少錢，請找那個售后服務好的阜新做網站的公司定做！

我是做java后端開發(fā)，對于前臺的框架我理解都是像jquery這樣的，引入一個js文件，就可以使用了，但用vue的時候卻蒙了，又是安裝又是編譯的，不管怎么說折騰了一番也能使用了，記錄一下

vue.js是處理頁面數(shù)據(jù)渲染的，還有個vue-resource.js是處理和后臺交互的，似乎大家都會兩個配合使用，我開始不知道就用jquery出路交互的部分，做起來感覺vue.js多余又難受

對于頁面每一塊（一個大標簽算一塊）數(shù)據(jù)渲染，一個大標簽里面的html代碼為要顯示的內容，都需要new Vue({

    el:'#xxx',

    data:{

        'key':'value'

    }

})

這樣新創(chuàng)建一個vue對象，el后面#跟的是打標簽的id屬性，表示這個vue對象和這個大標簽綁定，vue對象的屬性key，是要在大標簽內顯示的數(shù)據(jù)，在顯示的位置用`key`這種雙大括號

所以整個流程就是這樣的：

頁面一加載就用Vue.http.get或者Vue.http.post發(fā)送請求（這個請求格式百度vue-resource的文檔有很多介紹，這里就不再重復寫了），拿到數(shù)據(jù)后，創(chuàng)建vue對象，把返回的數(shù)據(jù)給vue對象的data賦值，或者data中的key賦值（這取決于取數(shù)據(jù)的方式和返回數(shù)據(jù)的格式）

例：返回數(shù)據(jù)是一個user對象（對象有name,mobile屬性）

new Vue({

    el:'#example',

    data:response.body

})

response是返回成功的方法的參數(shù)（vue-resource請求來的數(shù)據(jù)放在response.body中，還有好多其他信息可以打印response出來看），

頁面代碼：

<div id="example">

    `name` / `mobile`

</div>

這樣就能顯示出來user的信息

vue每創(chuàng)建一個對象都對應一個標簽，同一個標簽不需要重復創(chuàng)建vue對象，也就是這個vue對象是可以復用的，還是上面那個例子，如果經過修改操作信息要更新，在第一次創(chuàng)建vue對象的時候用一個變量去接收

var user;（申明全局變量）

...

user = new Vue({

    el:'#example',

    data:response.body

})

全局變量user被賦值，需要修改的時候把新的值賦值給user

Vue.set(user,'name','newname');

Vue.set(user,'mobile','newmobile');

這樣頁面會顯示新值，vue支持雙向綁定，所以改變vue對象的屬性值，與其綁定的標簽顯示值也會得到改變

還有一種常見的使用就是列表渲染，從后臺取出一個user的集合，還是上面的user對象，現(xiàn)在我假設user多一個屬性status，表示用戶的在職狀態(tài)，主要說明一個數(shù)據(jù)存儲的是數(shù)字，在頁面顯示時用文字的情況

例：

頁面的table中的代碼：

<tbody id="table_employee_list">

   <tr v-for="(emp,index) in employee_list" :class="index%2==0 ? 'active':'info'">
      <td><input type="checkbox" /></td>
      <td>`emp`.`name`</td>
      <td>`emp`.`idcardno`</td>
      <td>`emp`.`mobile`</td>
      <td>`emp`.`email`</td>
      <td v-if="emp.empstatus == 1">在職</td>
      <td v-if="emp.empstatus == 2">休假</td>
      <td v-if="emp.empstatus == 3">離職</td>
   </tr>

</tbody>

從后臺請求成功后，js中代碼：

table_employee_list = new Vue({
   el:'#table_employee_list',
   data:{
      'employee_list':emp_result.body
   }
});

v-for是遍歷集合指令，emp是集合中單個對象，index是對象的排列序號，:class是給tr標簽綁定class屬性，后面的意思是index是偶數(shù)時class屬性設置成active，是奇數(shù)時class屬性設置成info，td標簽后面三個都是用的v-if條件判斷，他們三個只能有一個成立，所以這雖然是三個標簽，但實際顯示的時候只有一個，status是user的屬性，而emp又代表單個user對象，所以這里用emp.status取值判斷

上面記錄的是我用vue時覺得卡住走彎路的地方，主要幫助和我一樣剛接觸vue的人，如果有vue老司機還不吝賜教。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：vue入門使用-創(chuàng)新互聯(lián)
地址分享：http://bm7419.com/article6/dsegig.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供手機網站建設、移動網站建設、軟件開發(fā)、Google、用戶體驗、搜索引擎優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿網站建設