定位 HTML

1、找到 Vue.js 需要接管的区域

<div class="wrapper" id="app"><!-- 省略的代码 -->
</div>

2、通过 findAll 方法查询出所有用户后，需要展示到页面中，找到页面中展示所有用户地方。通常情况下应该使用 for 循环遍历，对应 Vue.js 中的 v-for。点击按钮后执行某个功能，就用到了 Vue.js 中的 @click

<tbody>
<tr v-for="u in userList"><td><input name="ids" type="checkbox"></td><td>{{u.id}}</td><td>{{u.username}}</td><td>{{u.password}}</td><td>{{u.sex}}</td><td>{{u.age}}</td><td class="text-center">{{u.email}}</td><td class="text-center"><button type="button" class="btn bg-olive btn-xs">详情</button><button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">编辑</button></td>
</tr>
</tbody>

3、通过 findById 查询出来一个用户的信息，通常是在页面中选取了某个用户，需要对其信息进行修改，在修改前要先查询出这个用户的信息，然后再进行修改。填入对象的各个属性值就用到了 Vue.js 中的 v-model，v-model 是双向数据绑定

<div class="form-horizontal">                                   <div class="form-group"><label class="col-sm-2 control-label">用户名:</label><div class="col-sm-5"><input type="text" class="form-control" v-model="user.username"></div></div><div class="form-group"><label class="col-sm-2 control-label">密码:</label><div class="col-sm-5"><input type="text" class="form-control" v-model="user.password"></div></div><div class="form-group"><label class="col-sm-2 control-label">性别:</label><div class="col-sm-5"><input type="text" class="form-control" v-model="user.sex"></div></div><div class="form-group"><label class="col-sm-2 control-label">年龄:</label><div class="col-sm-5"><input type="text" class="form-control" v-model="user.age"></div></div><div class="form-group"><label class="col-sm-2 control-label">邮箱:</label><div class="col-sm-5"><input type="text" class="form-control" v-model="user.email"></div></div>
</div>

4、修改完成后再提交，就用到了 updateUser

<div class="modal-footer"><button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button><button type="button" class="btn btn-outline" data-dismiss="modal" @click="update">修改</button>
</div>

使用 Vue.js 完成前端的功能

user.js

new Vue({el:"#app",data:{user:{id:"",username:"",password:"",email:"",age:"",sex:""},userList:[]},methods:{findAll:function(){//在当前方法中定义一个变量，表明是vue对象var _this = this;axios.get('/vuejsdemo/user/findAll.do').then(function (response) {// handle success_this.userList = response.data; //响应数据给userList赋值console.log(response);}).catch(function (error) {// handle errorconsole.log(error);});},findById:function(userid){//在当前方法中定义一个变量，表明是vue对象var _this = this;axios.get('/vuejsdemo/user/findById.do',{params:{id:userid}}).then(function (response) {// handle success_this.user = response.data;$("#myModal").modal("show");console.log(response);}).catch(function (error) {// handle errorconsole.log(error);});},update:function(user){//在当前方法中定义一个变量，表明是vue对象var _this = this;axios.post('/vuejsdemo/user/updateUser.do', _this.user).then(function (response) {_this.findAll();console.log(response);}).catch(function (error) {console.log(error);});}},created(){this.findAll(); //当我们页面加载的时候触发请求，查询所有}
});

访问 http://localhost:8080/vuejsdemo/user.html 可以看到功能实现的效果：

Vue.js入门实战项目（五）--编写Vue.js代码实现前端功能相关推荐

Spring Boot Vue Element入门实战（五）封装axios
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)关于Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.pos ...
Spring Boot Vue Element入门实战（十）Vue生命周期
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 前面9篇文章基本上完成了vue 静态页面的入门,包括列表展示,路由动态加载菜单,echarts图表的一些使用,后面 ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
python入门新手项目-Python入门实战项目有哪些适合新手？
Python入门实战项目有哪些适合新手?目前市面上有很多适合新手的Python入门练手项目,Python入门需要理论与实践相结合,前面夯实基础知识,后面通过实战项目帮助你更好的运用这些Python知识 ...
Bootstrap实战---电池充电特效编写(d-flex+JS)
Bootstrap实战-电池充电特效编写(d-flex+JS) <!DOCTYPE html> <html> <head><meta charset=&quo ...
PyTorch 入门实战（五）——2013kaggle比赛猫狗大战的实现
承接上一篇:PyTorch 入门实战(四)--利用Torch.nn构建卷积神经网络 PyTorch入门实战 1.博客:PyTorch 入门实战(一)--Tensor 2.博客:PyTorch 入门实战 ...
python爬上市公司信息_实战项目 1：5 行代码爬取国内所有上市公司信息
实战项目 1:5 行代码爬取国内所有上市公司信息 Python入门爬虫与数据分析在正式开始这门专栏课的学习之前,我们先来看一个简单的爬虫案例.兴趣是最好的老师,当你对爬虫产生兴趣的时候,才会更有动力 ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
flask html 得到文本框 input的内容_flask入门（二）（不用写代码的前端！）
flask入门 (二)(不用写代码的前端!) 前言今天要介绍的依然是 flask 框架,前面介绍的仅仅是 flask 快速搭建最小应用的知识点,既然我们需要自己做网站,那肯定离不开前端页面的制作. ...

Vue.js入门实战项目（五）--编写Vue.js代码实现前端功能

定位 HTML

使用 Vue.js 完成前端的功能

Vue.js入门实战项目（五）--编写Vue.js代码实现前端功能相关推荐

最新文章

热门文章