黑马eesy_15 Vue:02.常用语法

黑马eesy_15 Vue:03.生命周期

黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)

黑马eesy_15 Vue:04.综合案例(前端Vue实现)

04.综合案例(前端Vue实现)


1、Vue的快速入门
2、Vue的语法
   插值表达式
   事件的绑定
   数据的显示
   逻辑判断和循环输出

3、Vue的生命周期  

8个生命周期的执行点
    4个基本的
    4个特殊的
    axios的ajax异步请求
       它和jquery的ajax比较相似

4、综合案例
    实现用户的查询列表和更新操作
        前端:Vue
        后端:ssm


22案例-修改页面中引入资源的路径并让vue接管div

IntelliJ IDEA 2019.2.3

替换快捷键:Ctrl+R

如果可以将 HTML 改写为 JSP 页面,在HTML页面前加上下述代码,将文件后缀改写为 jsp 即可。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

23案例-编写vuejs代码实现查询所有并分析解决遇到的问题

axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
 axios的github: https://github.com/axios/axios

可以用script标签引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios的ajax

get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});

jsp代码

页面显示效果

user.js

new Vue({
el:"#app",
data:{
user:{
id:"",
username:"",
password:"",
email:"",
age:"",
sex:""
},
userList:[]
},
methods:{
findAll:function () {
//在当前方法中定义一个变量,表明是vue对象
var _this = this; //这行里的_this指的是 new Vue的匿名对象
axios.get('/day01_eesy_vuejsdemo/user/findAll.do')
.then(function(response){
_this.userList = response.data; //服务器响应数据给userList赋值
console.log(response);
})
.catch(function(error){
console.log(error);
});
},
findById: function (userid) {
var url = "/day01_eesy_vuejsdemo/user/findById.do";
var _this = this;
axios.get(url, {
params: {
id: userid
}
}).then(function (response) {
//console.log(response);
_this.user = response.data;
$("#myModal").modal("show");//让模态框显示
}).catch(function (err) {
console.log(err)
});
},
update: function () {
var url = "/day01_eesy_vuejsdemo/user/update.do";
var _this = this; //这行里的_this指的是 new Vue的匿名对象 axios.post(url, _this.user).then(function (response) {
_this.findAll();
}).catch(function (err) {
console.log(err)
});
}
},
created:function () { //当我们页面加载的时候触发请求,调用查询所有的methods函数
this.findAll(); //一个Vue对象的生命周期函数,可以通过this.调用methods函数
}
});

==============================

参考资料:

Tomcat下访问HTML页面乱码的解决方法

https://mapperhelper.github.io/docs/

记录火狐浏览器的一些开发使用总结

end

黑马eesy_15 Vue:04.综合案例(前端Vue实现)的更多相关文章

  1. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  2. 072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法

    072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法 本文知识点:综合案例-数组移位-在指定位置处插入数据方法 ...

  3. 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  4. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  5. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

  6. 黑马eesy_15 Vue:03.生命周期与ajax异步请求

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...

  7. 黑马eesy_15 Vue:常用语法

    自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端的基础知识ES6语法和Vue.js 所以本篇博客作为入门Vue练习记录的过程,目的是供自学后端 ...

  8. Vue和Element基础使用,综合案例学生列表实现

    知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...

  9. 5. vue常用高阶函数及综合案例

    一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...

随机推荐

  1. 洛谷 P2516 [HAOI2010]最长公共子序列

    题目传送门 解题思路: 第一问要求最长公共子序列,直接套模板就好了. 第二问要求数量,ans[i][j]表示第一个字符串前i个字符,第二个字符串前j个字符的最长公共子序列的数量 如果f[i][j]是由 ...

  2. 在MFC做DLL动态链接库时,使用boost,出现断言错误

    建立的MFC DLL工程中有使用boost::thread,就会发生compile正常但是一程式执行或者直接编辑就出現ASSERT错误. 错误位置:dllinit.cpp,Line: 587,ASSE ...

  3. 19 01 16 djano 视图以及url

    视图 后台管理页面做好了,接下来就要做公共访问的页面了.当我们刚刚在浏览器中输入 http://127.0.0.1:8000/admin/ 之后,浏览器显示出了后台管理的登录页面,那有没有同学想过这个 ...

  4. css常用技巧1

    css绘制三角形 <style> .triangle-box{ margin: 50px auto; height: 300px; width: 500px; box-shadow: 1p ...

  5. Web前端工程师需要注意的开发规范有哪些?

    从事web前端开发工作我们就需要了解web前端开发的规范,这样才能保证高效快速的完成工作,本篇就和大家分享一下web前端开发工程师需要注意的web前端开发规范有哪些,希望对小伙伴们有所帮助. web前 ...

  6. C++命名规范——谷歌规范

    1.文件命名规则 文件名全部小写,可以含下划线或连字符,按项目约定命名,且尽量保证文件名明确.比如: cmd_save_player_info_class.cc ,my_use_full_class. ...

  7. Java 性能优化:面向对象及基础类型使用优化

    性能优化是个大筐,很多东西都能往里面装.虽说性能优化的具体方面比较多,但万丈高楼从地起,这里还是从Java最基本的一些入门知识相关的使用优化进行一些做些总结和建议.如何连最基本的API使用都不会,或不 ...

  8. bestphp's revenge

    0x00 知识点 1利用PHP原生类来构造POP链 本题没有可以利用的类,没有可以利用的类就找不到POP链所以只能考虑PHP原生类 我们先来解释一下什么是POP链 POP:面向属性编程 在二进制利用时 ...

  9. POJ 3278:Catch That Cow

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submi ...

  10. XML--XML Schema Definition(四)

    参考 http://www.w3school.com.cn/schema/index.asp XSD 复合类型指示器 通过指示器,我们可以控制在文档中使用元素的方式.有七种指示器: Order 指示器 ...