前言 最近在写一个项目，然后由于采用的前后端分离传递数据，页面的渲染由前端来完成，于是就想说试一下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真的是刷新了我对传统前端的认知，确实很好用。