文章目录
1. VUE.JS案例复习
1.1 入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门案例</title>
</head>
<body>
<div id="app">
<!-- 利用差值表达式 获取数据 -->
{
{msg}}
<!-- v-text标签 只有页面渲染数据完成之后,才会展现
只能使用在展现标签中
-->
<p v-text="msg"></p>
</div>
<!-- 1.引入vue.js -->
<script src="../js/vue.js"></script>
<!-- 2.定义vue js -->
<script>
new Vue({
//数据挂载
el: "#app",
data: {
msg: "VUE的入门案例"
}
})
</script>
</body>
</html>
1.2 点击事件用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击事件操作</title>
</head>
<body>
<div id="app">
<!-- 点击事件的案例
1.事件绑定使用基本语法 v-on:
2.简化写法 v-on: 使用@符号代替
-->
{
{num}} <br>
<!-- <button v-on:click="">自增</button> -->
<button @click="addNum">自增</button>
</div>
<script src="../js/vue.js"></script>
<script>
/*
JS中的变量名称
1. var 最常规的变量声明,没有作用域
2. let 代替var 有作用域
3. const 定义常量
*/
const app = new Vue({
el: "#app",
data: {
num: 100
},
methods:{
addNum(){
//自增
this.num ++
}
}
})
</script>
</body>
</html>
1.3 双向数据绑定
1.3.1 页面案例测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
<h1>测试双向数据绑定</h1>
<!-- 定义一个输入框 -->
<!-- 双向数据绑定的规则:
1. data中的数据变化,则页面数据变化.
2. 页面数据变化,则data中的数据变化
-->
用户名: <input type="text" v-model="msg"/>
{
{msg}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "admin1111111"
},
methods:{
}
})
</script>
</body>
</html>
1.3.2 双向数据绑定的原理
设计模型: MVVM
模块说明:
- M Model 代表数据. 大概率事件 代表 data中的数据.
- VM ViewModel 视图模型层 在内部进行计算 在页面进行展现
- V View 视图层 用户看到的页面展现效果.
内存原理图:
总结: 虚拟DOM是实现数据实时更新的重要的组件. 内存数据变化.则页面数据实时变化.
1.4 分支结构用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构-IF</title>
</head>
<body>
<div id="app">
<h1>分支结构测试</h1>
请输入分数: <input type="text" v-model="score" />
<!--
判断原则: 如果判断为true 则展现标签
-->
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 70">中等</p>
<p v-else>再接再厉</p>
<!--
用户输入考试成绩,自动获取评级.
>=90 优秀
>=80 良好
>=70 中等
低于70 再接再厉
-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: ''
},
methods:{
}
})
</script>
</body>
</html>
1.5 循环遍历结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
</head>
<body>
<div id="app">
<h1>循环结构</h1>
<!-- 指定午饭数组,之后循环遍历输出 -->
<h3 v-for="item in lunch">{
{item}}</h3>
<!-- 获取数组下标 -->
<h3 v-for="(item,index) in lunch">{
{index}} ---- {
{item}}</h3>
<h1>遍历数组对象</h1>
<p v-for="user in list">
id号: {
{user.id}} | 名称: {
{user.name}}
</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
lunch: ['宫保鸡丁','爆炒腰花','土豆片','土豆丝','土豆泥'],
list: [
{
id: 1, name: "张三"},
{
id: 2, name: "李四"},
{
id: 3, name: "王五"}
]
},
methods:{
}
})
</script>
</body>
</html>
1.6 VUE生命周期函数
1.6.1 图例
生命周期函数的目的: 控制整个vue对象的, 在各个阶段都可以对VUE进行控制.
生命周期函数都是自动调用, 如果你配置了生命周期方法.
1.6.2 生命周期函数分类
第一类: 对象的初始化阶段
1. beforeCreate.
2. created
3. beforeMount
4. mounted
第二类: 数据修改阶段
1. beforeUpdate
2. updated
第三类: 对象的销毁阶段
1.beforeDestroy
2.destroyed
1.6.3 初始化时知识点
- beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
解释: 创建了一个VUE的对象,只是还没有加载其中的属性.只是一个空对象. - created
在实例创建完成后被立即同步调用
解释: VUE对象开始填充数据. 表示配置完成. - beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
解释: 对象根据已经配置的内容,在指定的区域开始加载数据.(属性的值,保存到内存中) - mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
解释: 在指定的区域中,渲染页面. (为页面填充数据), 页面初始化完成.
1.6.4 生命周期函数用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue生命周期函数</title>
</head>
<body>
<div id="app">
<h3 v-text="msg"></h3>
<button @click="destroy">销毁</button>
</div>
<!--引入js函数类库 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
msg: "vue生命周期"
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate(){
console.log("beforeCreate")
},
//在实例创建完成后被立即调用
created(){
console.log("created")
},
//在挂载开始之前被调用：相关的 render 函数首次被调用。
beforeMount(){
console.log("beforeMount")
},
//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
mounted(){
console.log("mounted")
},
//数据更新时调用，发生在虚拟 DOM 打补丁之前
beforeUpdate(){
console.log("beforeUpdate")
},
//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
updated(){
console.log("updated")
},
//实例销毁之前调用。在这一步，实例仍然完全可用
beforeDestroy(){
console.log("beforeDestroy")
},
//实例销毁后调用。
destroyed(){
console.log("destroyed")
},
methods:{
destroy(){
this.$destroy()
}
}
})
</script>
</body>
</html>
2 远程调用
2.1 什么是跨域
说明: 浏览器解析Ajax时 要求浏览器的网址,与Ajax请求的网址,必须满足三要素.
要素:
- 协议相同
- 域名相同
- 端口号相同
如果上述的三要素都满足,则叫同域访问, 如果三要素有一项不满足,则称为跨域访问.
2.2 跨域访问测试案例
浏览器网址: http://www.baidu.com:80/xxx/xxxx
Ajax请求网址: https://www.baidu.com:80/xxx/xxxx 跨域访问 协议不同
浏览器网址: http://110.242.68.3:80/xxx/xxxx
Ajax请求网址: http://www.baidu.com:80/xxx/xxxx 跨域请求 域名不同
浏览器网址: http://www.baidu.com/xxx/xxxx
Ajax请求网址: http://www.baidu.com:80/xxx/xxxx 同域请求 http端口默认80
浏览器网址: https://www.baidu.com/xxx/xxxx
Ajax请求网址: https://www.baidu.com:443/xxx/xxxx 同域请求 https端口默认443
浏览器地址: http://127.0.0.1:8848/vuejs/xxxx/xxxx
10.Ajax请求网址: http://localhost:8090/findAll 跨域请求 域名和端口号不同
2.3 远程入门案例测试
2.3.1 编辑页面JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue生命周期函数</title>
</head>
<body>
<div id="app">
<h1>前后端调用测试</h1>
</div>
<!-- 1.完成前后端远程调用 -->
<!-- 1.1 引入js函数 -->
<script src="../js/axios.js"></script>
<script>
//1. 动态获取用户列表信息 axios.get(url地址,提交的参数)
let url1 = "http://localhost:8090/findAll"
axios.get(url1)
.then(function(promise){
console.log(promise)
/* 获取服务器返回值数据 */
console.log(promise.data)
})
</script>
</body>
</html>
2.3.2 前后端调用结果
2.4 带参数GET请求
2.4.1 编辑页面JS
//2. 根据id动态获取用户信息
let id = 3
let url2 = "http://localhost:8090/findUserById?id="+id
axios.get(url2)
.then(function(promise){
console.log(promise.data)
})
2.4.2 页面效果展现
2.5 GET请求对象参数用法
2.5.1 F12 开发工具用法
2.5.2 前端页面JS
//3. 多参数的Get请求. 如果是多个参数可以考虑封装为对象
let user3 = {
age: 18, sex: "女"}
let url3 = "http://localhost:8090/findUserByAS"
// GET请求传递对象 使用 {params: 对象参数}
axios.get(url3,{
params: user3})
.then(function(promise){
console.log(promise.data)
})
2.5.3 前端请求路径结构
2.5.4 前端响应
2.6 请求类型与业务关系
2.6.1 请求类型说明
2.6.2 类型与请求的映射关系
新增操作 类型:POST 接收注解: @PostMapping
删除操作 类型:DELETE 接收注解: @DeleteMapping
更新操作 类型:PUT 接收注解: @PutMapping
查询操作 类型:GET 接收注解: @GetMapping
2.6.3 编辑前端页面
/**
* 4. 实现数据修改操作
* 4.1 请求路径 必须使用restFul结构
* 4.2 前端知识点: 模板字符串
* 语法: `` 反引号
* 作用: 1. 保留代码片段的格式
* 2. 可以动态取值 ${key}
*/
let html = `
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
`
let user4 = {
id: 1,name: "黑熊精",age: 3000,sex: "男"}
let url4 = `http://localhost:8090/updateById/${
user4.id}/${
user4.name}/${
user4.age}/${
user4.sex}`
axios.put(url4)
.then(function(promise){
console.log(promise.data)
})
2.6.4 后端交互
