关于vue.js 和axios.js的使用 ,vue可以代替字符串拼接的麻烦,更能简单的进行拼接,和dot相比 vue更简单,通常vue和axios进行配合使用,axios可以代替ajax。下面就是vue和axios的具体用法
1:首先要在NetGet包里下载vue.js和axios.js进行拖拽。vue 它是脱离jQuery的单独的。
2:然后如下demo
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
js 代码
<script type="text/javascript">
var vu = new Vue({
el: "#trs", //绑定的id不能是同级里面的
data: { messages: []}, //设置空的集合
mounted() { this.getDate() }, //预加载事件,无需放置预加载函数中
methods: {
//这里是显示方法
getDate: function () { //获取axios方法(等同于ajax使用)
axios.get("http://localhost:8333/OA_Tay/UserManagementSelect?id=0").then((Response) => { //api地址
this.messages = [];
Response.data = JSON.parse(Response.data);
for (var i in Response.data) {
this.messages.push(Response.data[i]);
},
del: function (id) {
if (confirm("确定要删除吗?")) {
axios.get("http://localhost:8333/OA_Tay/UserManagementDel?id=" + id).then((Response) => {
if (Response.data > 0) {
alert("删除成功");
location.reload();
}
else {
alert("删除失败");
}
})
}
},
});
},
}
})
</script>
页面上demo
<table id="trs" class="table" style="margin: 0 auto;">
<tr>
<td>排序</td>
<td>真实姓名</td>
<td>头像</td>
<td>角色</td>
<td>机构/部门</td>
<td>状态</td>
<td>操作</td>
</tr>
<tbody v-for="item in messages">
<tr class="text-x">
<td>{{item.UserInfoId}}</td>
<td>{{item.UserInfoChineseName}}</td>
<td>
<img width="100" height="100" :src="item.UserInfoPhoto" alt="" />
</td>
<td>{{item.RoleInfoName}}</td>
<td>{{item.OrganizationName}}{{item.BranchName}}</td>
<td>{{item.TypeState}}</td>
<td>
<button v-on:click="getFans(item.UserInfoId)">修改</button>
<button data-toggle="modal" v-on:click="del(item.UserInfoId)">删除</button>
<td>
</tr>
</tbody>
</table>
我么在使用的时候注意我们的button的onclick用法。:
<button data-toggle="modal" v-on:click="del(item.UserInfoId)">删除</button>