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老司机还不吝赐教。