Vue.js基于$.ajax实现数据的跨域增删查改 - keepfool(2)_H5之家

C#偏向于PascalCase的命名规范，而JavaScript则偏向于camelCase的命名规范，为了让JavaScript接收到的JSON数据是camelCase的，在Global.asax文件中添加以下几行代码：

var formatters = GlobalConfiguration.Configuration.Formatters; var jsonFormatter = formatters.JsonFormatter; var settings = jsonFormatter.SerializerSettings; settings.Formatting = Formatting.Indented; settings.ContractResolver = new CamelCasePropertyNamesContractResolver();

可以在以下地址访问构建好的Web API：

:8080/Help

访问Customers数据：

:8080/api/Customers

创建组件和AjaxHelper

本文的示例仍然是表格组件的CURD，只不过这次咱们的数据是从服务端获取的。
在实现数据的CURD之前，我们先准备好一些组件和Ajax帮助方法。

创建和注册simple-grid组件

simple-grid组件用于绑定和显示数据

<template> <table> <thead> <tr> <th v-for="col in columns"> {{ col | capitalize}} </th> </tr> </thead> <tbody> <tr v-for="(index,entry) in dataList"> <td v-for="col in columns"> {{entry[col]}} </td> </tr> </tbody> </table> </template> <script src="js/vue.js"></script> <script> Vue.component('simple-grid', { template: '#grid-template', props: ['dataList', 'columns'] }) </script> 创建和注册modal-dialog组件

数据的新建和编辑将使用模态对话框，modal-dialog组件的作用就在于此。

<template> <div> <div v-bind:class="{ 'dialog-active': show }"> <div> <div> <span @click="close"></span> </div> <slot></slot> <slot></slot> <slot></slot> </div> </div> <div></div> </div> </template> <script> Vue.component('modal-dialog', { template: '#dialog-template', props: ['show'], methods: { close: function() { this.show = false } } }) </script> AjaxHelper