这段时间了解了一下vue.js这个前端框架，刚好可以拿前几天做的东西来练手。因为vue.js几乎可以说是一个纯前端的框架，之前那个工具又长的非常的丑陋，于是打算改造一下，就用这个vue.js。先附上一个链接，vue.js传送门。
先来一下改造前后改造后的对比
左边是以前的，右边是vue.js改版的
当然虽然使用了vue框架，但是变化较大还有还有一个原因就是这次我使用了bootstrap框架，他是一个依赖jQuery库的css前端框架，附上传送门。
vue.js可以理解为一个可以双向数据绑定的框架，类似于angularjs，在脚本中创建一个vue实例，将页面所需要的数据都绑定到这个实例上，数据一旦发生改变，页面上所有涉及到相应数据的地方也会同时发生改变，这就是这个框架的特点之一。下面是实现详情（由于这次只涉及到前端的改变，后台node.js服务器和redis数据库几乎没有任何改变，所以只贴前端代码，后台涉及到改变的地方再讲）
首先还是index.html，由于这次使用了几个新的js库，所以要将他们先引入到工程中，这里注意bootstrap和jQuery的引入顺序，由于前者（bootstrap）是依赖于后者（jQuery）的，所以要先引入后者，再引入前者，体现在代码上是
库引入
这里除了vue.js以外还有一个vue-resource.js库，一会儿用的时候再讲
现在来梳理一下逻辑。vue.js是一个注重数据的框架，所以理清楚数据变化部分的逻辑很重要。添加茶馆馆主和房卡数量这个动作需要的数据只有三个，即馆主id，游戏渠道，房卡数量。所以这些数据都要加在创建出来的vue实例上，这个版本和上个版本内容上还多了一个详情展示模块，所以服务器返回的数据也很重要，同样要加到vue实例上。在页面加载的时候我们就要初始化vue实例，在代码上表现为
实例化vue对象
解释一下，实例化的vue对象的写法，其中el是代表着这个对象挂载在页面的哪一个节点上，data表示这个对象有哪些数据，既然有数据同样也可以有一些方法，methods里面就是这个对象含有的方法。其中这个this就是代表着当前这个vue实例。
在当前这个vue对象里，拥有clubid，channel，tickets，response和isshow五个数据，前三个是用户输入并且传到服务器的内容，response用来接收服务器返回的消息，isshow是一个标志，用于控制我们接下来展示添加结果的显隐。在methods中有两个方法，很明显的对应着界面上的两个按钮，一个添加（add（）），一个重置（reset（））。在add方法里就会用到前面引入的vue-resource库了，这个库也是vue项目组封装的一个用于交互的库文件。里面封装着与服务器交互常用的一些方法，例如get、post、jsonp等等，具体使用方法可以参考官方文档。他的本质其实就是一个ajax。为了解决跨域请求的问题，我选择用jsonp方式与服务器通信。
接下来是界面实现代码
界面具体实现代码
最外层id为box的div和实例化对象中el中的内容相对应，其实可以看出el近似于一个选择器，无论是类还是标签还是id都能找到对应的节点挂载。页面上有三个输入框，三个输入框中都有一个v-model属性，计时这个属性将输入框中的数据和vue对象中的数据结合在一起，用户输入框中的数据改变，vue对象中的数据将同步改变
在三个输入框下面有连个input按钮，在vue中，利用v-on标签来绑定事件，可以是click事件，也可以是其他事件。这里的v-on:click="add()"就将add函数和click事件绑定起来了，reset函数也一样。
结果的展示我放在了一个div和一个table里面，div用于展示添加不成功的情况，而table用于表示添加成功以后服务器返回的结果，很明显逻辑上这两个组件是不可能同时出现在界面上的，这里就涉及到了vue.js的另一个很常用的属性v-show，可以通过v-show属性来控制组件的显隐。之前说过，response是vue对象的一个属性，他用来接收服务器回传的方法。要在界面上显示出数据，用两个花括号这种模板就可以，就像第一个div中的{{response}}，就能将vue.response显示出来。
当然，前提这个值是一个字符串或者一个数字就可以利用模板方法展示出来。但要是这个数据也是一个对象怎么办呢，比如添加成功以后服务器返回的数据是一个json对象，这里如果我们用两个花括号加上对象名的话只会显示[object Object]，很明显不是我们想要的结果。这里就涉及到了vue.js里面另一个重要的知识点：循环。
成功数据
从上图可已看出，添加成功返回的数据是一个json对象，里面有茶馆的详情。添加成功后，我们要将response里所有的值都展示出来，必然要用到循环遍历这个对象取出里面的值。vue里，循环变量可以使用v-for标签 v-for="k in response" {{k}} 就是json中每个属性值，而我们同样要获取每个属性的名称。vue中能够$key来获取每个属性的属性名，$index则是获取每个属性的索引。
到这里 整体的界面基本上已经完成了，在数据不多并且展示频繁的界面，使用vue框架将非常方便，但刚刚接触vue.js两天，以前没没做过前端开发，学起来要慢一些，所以这些都只是用到了vue的皮毛而已，相信以后有机会深入了解vue.js 以及随着对js的理解日渐加深，将会更多的体会。我有一个预言，将来的程序开发界无论前端后端，必定是脚本语言的天下，或者说，必将是js的天下。。。
网友评论