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">
class="modal-title" id="myModalLabel">申请
div>
<div class="modal-body">
"temp.helpDate" type="text" class="form-control" placeholder="">
"temp.money" type="text" class="form-control" placeholder="">
div>
<div class="modal-footer">
div>
div>这里的button（提交更改）就用到了事件绑定，绑定了额join方法
v-on:click="join"join方法就写在vue的methods里面
属性绑定
依然是上面的例子
"temp.helpDate" type="text" class="form-control" placeholder="">
"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真的是刷新了我对传统前端的认知，确实很好用。