Vue＋jQuery 实现后台用户列表的加载，查询和修改

需求

页面加载时发AJAX请求, 加载到页面 (jQuery发请求, 用Vue渲染出页面)

点击用户信息后面的"查询" "编辑"按钮 可以查询详细信息和编辑 (GET和POST请求用jQuery做)

做的时候遇到的几个问题:

一,点击事件如何绑定?

直接在HTML里面写是不符合规范的.

这里就用到了.on方法的派生事件

公司规范是要求在按钮上面加class="yy_btn"

那么, 绑定事件就可以这样写

二,点击按钮后, 怎么才能知道这条数据在数据库里面对应哪一条呢 ?

解决方案:

在每次创建按钮的同时, 动态创建一个属性, 把这条数据对应的id存起来, 那么点击后, 只要拿到这个属性的值, 就可以知道这条数据在数据库里面对应的id了.

这里创建了一个person_id属性用来存数据库里对应的那个id.

HTML部分:

JS部分:

三, GET到数据后Vue如何展示?

首先先声明一个空数组, GET得到数据后, 用for循环将数据push到这个数组中, 构造出符合Vue语法的数组.

HTML部分:

JS部分:

完整代码是套在一个后台里面的, 太长, 就不贴出了.