vue.js和axios的使用

关于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>&nbsp;&nbsp;&nbsp;
                    <button data-toggle="modal" v-on:click="del(item.UserInfoId)">删除</button>&nbsp;&nbsp;&nbsp;
                <td> 
            </tr>
        </tbody> 
    </table>

我么在使用的时候注意我们的button的onclick用法。：

 <button data-toggle="modal" v-on:click="del(item.UserInfoId)">删除</button>