vue入門使用

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

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

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

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

    el:'#xxx',

    data:{

        'key':'value'

    }

})

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

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

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

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

new Vue({

    el:'#example',

    data:response.body

})

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

頁面代碼：

<div id="example">

    `name` / `mobile`

</div>

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

vue每創建一個對象都對應一個標簽，同一個標簽不需要重復創建vue對象，也就是這個vue對象是可以復用的，還是上面那個例子，如果經過修改操作信息要更新，在第一次創建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對象，現在我假設user多一個屬性status，表示用戶的在職狀態，主要說明一個數據存儲的是數字，在頁面顯示時用文字的情況

例：

頁面的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是偶數時class屬性設置成active，是奇數時class屬性設置成info，td標簽后面三個都是用的v-if條件判斷，他們三個只能有一個成立，所以這雖然是三個標簽，但實際顯示的時候只有一個，status是user的屬性，而emp又代表單個user對象，所以這里用emp.status取值判斷

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