vuejs使用指南（一）

前言
最近在写一个项目，然后由于采用的前后端分离传递数据，页面的渲染由前端来完成，于是就想说试一下vuejs，因为实在是不想用jq的dom操作，jq的dom操作对于页面的节点增加和删除，我感觉还好。但是用于表单的渲染，确实要不断地获取dom，并对节点进行更改操作，确实很复杂。

说一下项目背景

是做一个助管工资录入系统，我为什么接了这个活儿了呢，因为是采用前后端分离，感觉能学到很多东西。没错，又只有我一个前端，美工的活儿也一块儿干了，唉~。
然后就想学习一下最近很火的MVVM框架。
之前想用angularjs，后来放弃了，因为angularjs实在是有点笨重，是google研发的吧，读API还要经过脑子翻译一下。
于是用了Vue，Vue是国内团队开发的框架，很轻量，目前很多公司也在用这个框架。

开始

因为我这个项目不大，所以也就不用webpack什么的呢，直接下载了vue.js就可以开始写代码了。
最开始是要绑定一个div内容

<div id="main-data">/*content*/</div>

js部分

new Vue({    el: '#main-data',    data: {        /*声明一些数据*/    },    methods:{      /*声明一些方法*/    }

就完成了

vue的双向绑定

以下是本项目的一点儿代码

 <div class="panel panel-default">            <div class="panel-heading">已添加信息</div>            <div class="panel-body">                <table class="table table-bordered mt-10">                    <tr>                        <th>学号</th>                        <th>姓名</th>                        <th>所在单位</th>                        <th>科室</th>                        <th>银行卡号</th>                        <th>联系电话</th>                        <th>申请年月</th>                        <th>申请金额</th>                        <th>状态</th>                    </tr>                    <tr v-for="item in items" track-by="$index">                        <td>{{item.stuID}}</td>                        <td>{{item.name}}</td>                        <td>{{item.szdw}}</td>                        <td>{{item.ks}}</td>                        <td>{{item.creditNum}}</td>                        <td>{{item.tel}}</td>                        <td>{{item.helpDate}}</td>                        <td>{{item.money}}</td>                        <td>{{item.status}}</td>                    </tr>                </table>                <div>                    <button class="btn btn-default" v-on:click="submitData">提交</button>                </div>            </div>        </div>

js文件部分是这样的

var table = new Vue({    el: '#main-data',    data: {        items: [],        new_item: '',        message: 'message',        query: '',        temp: '',    },    methods: {        /*显示数据*/        showData: function() {            var _self = this;            $.getJSON("../json/data.json", function(result) {                _self.items = result;            });            console.log(_self.message);        },        /*添加数据到下方的表中，不提交*/        join: function() {            var _self = this;            _self.new_item.helpDate = _self.temp.helpDate;            _self.new_item.money = _self.temp.money;            _self.items.push(_self.new_item);        },

一旦有item提交进来，接回push进入items，这样子页面就会自动更新。
以下是生成的代码。

Vue的属性绑定和事件绑定

vue的事件绑定和属性绑定也特别简单

事件绑定

<div class="modal-content">   <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>        <h4 class="modal-title" id="myModalLabel">申请</h4>  </div>   <div class="modal-body">       <label for="">年月：</label>       <input v-model="temp.helpDate" type="text" class="form-control" placeholder="">       <label for="">薪资：</label>        <input v-model="temp.money" type="text" class="form-control" placeholder="">       </div>       <div class="modal-footer">       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>       <button type="button" v-on:click="join" class="btn btn-primary">提交更改</button>       </div></div>

这里的button（提交更改）就用到了事件绑定，绑定了额join方法

v-on:click="join"

join方法就写在vue的methods里面

属性绑定

依然是上面的例子

   <label for="">年月：</label>   <input v-model="temp.helpDate" type="text" class="form-control" placeholder="">   <label for="">薪资：</label>   <input v-model="temp.money" type="text" class="form-control" placeholder="">

在每个input上面写了 v-model=“”
这样input的value就绑定到了temp上面，temp是在Vue 的data中声明的。

其他

与Ajax联合使用，用了这么久还是离不开jq里的ajax，实在是太好用了
请求数据
向服务器请求数据，绑定在自己的data中，并显示在页面。

    showData: function() {            var _self = this;            $.getJSON("../json/data.json", function(result) {                _self.items = result;            });            console.log(_self.message);        },

提交数据
这里以json提交数据

    $.ajax({                type: "POST",                url: "#",                contentType: "application/json; charset=utf-8",                data: JSON.stringify(_self_query),                dataType: "json",                success: function(result) {                    _self.new_item = result;                },                error: function(message) {                    alert("提交数据失败！");                }            });

题外话

目前项目还在写当中，一边探索Vue一边写，然后觉得Vue真的是刷新了我对传统前端的认知，确实很好用。