发表于： 2020-06-06 21:07:47
1 2130
今日完成:
Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
(用法都差不多,都是第三方包)
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
//global vue object
vue .http.get('/someUrl", [options]) .then(successcallback, errorcallback);
vue .http. post( "/someur1'，[body], [optlons])- then(successcallback, errorcallback);
// in a Vue instance
this. Shttp.get(' /scmeUr1', [opt ions]).then(successcallback, errorCallback);
this.shttp.post(" /someUrl', [body]。 [options]).then( sgcessCallback, errorcallback);
Get 请求
请求地址是一个简单的 txt 文本
如果需要传递数据，可以使用 this.$http.get('get.php',{params : jsonData}) 格式，第二个参数 jsonData 就是传到后端的数据。
this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);});
post 请求
post 发送数据到后端，需要第三个参数 {emulateJSON:true}。
emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。
语法 & API
你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。
// 基于全局Vue对象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$httpthis.$http.get('/someUrl', [options]).then(successCallback, errorCallback);this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
<div id=" app">
<table class=" table table-bordered table-hover table-s triped">
thead>
<tr>
< th> Id</ th>
th>Name</ th>
I
< th>ctime</ th>
< th>ope ra tion</ th>
</tr>
</ the ad>
K tbody
<td></ td>
</tr>
</ tbody>
</ tablex
</div>
先跟着例子制作
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加名称</h3>
</div>
<div class="panel-body form-inliune">
<!--form-inliune所有东西在一行显示-->
<label>
Name:
<input type="text" v-mnodel="name" class="form-control">
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!--注意:key只接收字符串-->
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//创建,得到Vm
var vm = new vue({
el: '#app',
data: {
name: '',
list: [ //编写假数据
{
id: 1,
name: '名称1',
ctime: new Date()
},
{
id: 2,
name: '名称2',
ctime: new Date()
},
]
},
methods: {
add() {
}
}
});
</script>
</body>
返回列表
评论