一、表单控制
# 表单控制可以用一个input框来实现数据绑定：主要参数有checkbox（单选，多选），radio（单选），示例如下：
1.1 单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>表单控制</h1>
<p>username:
<input type="text" v-model="username">
</p>
<p>password:
<input type="text" v-model="password">
</p>
<p>记住密码
<input type="checkbox" v-model="isRemember">
</p>
<!-- {{isRemember}} checkbox单选，使用布尔值类型-->
<p>
<input type="radio" v-model="gender" value="1">男
<input type="radio" v-model="gender" value="2">女
<input type="radio" v-model="gender" value="0">其他
</p>
<!-- {{gender}} radio单选，使用字符串类型-->
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
isRemember: false,
gender: '',
},
})
</script>
</html>
1.2 多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>表单控制</h1>
<p>username:
<input type="text" v-model="username">
</p>
<p>password:
<input type="text" v-model="password">
</p>
<p>记住密码
<input type="checkbox" v-model="isRemember">
</p>
<!-- {{isRemember}} checkbox单选，使用布尔值类型-->
<p>
<input type="radio" v-model="gender" value="1">男
<input type="radio" v-model="gender" value="2">女
<input type="radio" v-model="gender" value="0">其他
</p>
<!-- {{gender}} radio单选，使用字符串类型-->
<p>爱好：
<input type="checkbox" v-model="hobby" value="唱"> 唱
<input type="checkbox" v-model="hobby" value="跳"> 跳
<input type="checkbox" v-model="hobby" value="rap"> rap
<input type="checkbox" v-model="hobby" value="打篮球"> 打篮球
</p>
<!-- {{hobby}} checkbox多选，使用数组类型-->
<button @click="handlerSubmit"></button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
isRemember: false,
gender: '',
hobby: [],
},
methods: {
handlerSubmit() {
console.log(this.hobby)
}
}
})
</script>
</html>
二、购物车案例
2.1 购物车结算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="container-fluid">
<h1 class="text-center">购物车</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<thead>
<tr>
<th>商品id</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.count}}</td>
<td>{{good.price}}</td>
<td><input type="checkbox" v-model="checkInfo" :value="good"></td>
</tr>
</tbody>
</table>
<hr>
购买的商品是：{{checkInfo}}
<br>
商品总价格是：{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
goodList: [
{id: 1, name: '印度飞饼', price: 2000, count: 20},
{id: 2, name: '极品木瓜', price: 10000, count: 20},
{id: 3, name: '仿真玩偶', price: 60000, count: 10},
],
checkInfo: [],
},
methods: {
getPrice() {
// 取出商品数量和商品价格进行相乘，做累加
// 使用for循环计算总价
var total = 0
for (item of this.checkInfo) {
total += item.price * item.count
}
return total
}
}
})
</script>
</html>
2.2 购物车全选/全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="container-fluid">
<h1 class="text-center">购物车</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<thead>
<tr>
<th>商品id</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品价格</th>
<th><input type="checkbox" v-model="checkAll" @change="handlerChange">全选/全不选</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.count}}</td>
<td>{{good.price}}</td>
<td><input type="checkbox" v-model="checkInfo" :value="good" @change="handlerChange01"></td>
</tr>
</tbody>
</table>
<hr>
购买的商品是：{{checkInfo}}
<br>
商品总价格是：{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
goodList: [
{id: 1, name: '印度飞饼', price: 2000, count: 20},
{id: 2, name: '极品木瓜', price: 10000, count: 20},
{id: 3, name: '仿真玩偶', price: 60000, count: 10},
],
checkInfo: [],
checkAll: false,
},
methods: {
getPrice() {
// 取出商品数量和商品价格进行相乘，做累加
// 使用for循环计算总价
var total = 0
for (item of this.checkInfo) {
total += item.price * item.count
}
return total
},
handlerChange() {
if (this.checkAll) {
this.checkInfo = this.goodList
} else {
this.checkInfo = []
}
},
handlerChange01() {
// // 如果checkInfo的长度等于goodList的长度，说明全选了，这个时候checkAll就是true，否则就是false
// if (this.checkInfo.length == this.goodList.length) {
// this.checkAll = true
// } else
// this.checkAll = false
// },
// 上述代码可以简写为：
this.checkAll = (this.checkInfo.length == this.goodList.length)
}
}
})
</script>
</html>
2.3 购物车数量加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="container-fluid">
<h1 class="text-center">购物车</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<thead>
<tr>
<th>商品id</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品价格</th>
<th><input type="checkbox" v-model="checkAll" @change="handlerChange">全选/全不选</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>
<button class="btn link btn-sm" @click="handlerDown(good)">-</button>
{{good.count}}
<button class="btn link btn-sm" @click="good.count++">+</button>
</td>
<td>{{good.price}}</td>
<td><input type="checkbox" v-model="checkInfo" :value="good" @change="handlerChange01"></td>
</tr>
</tbody>
</table>
<hr>
购买的商品是：{{checkInfo}}
<br>
商品总价格是：{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
goodList: [
{id: 1, name: '印度飞饼', price: 2000, count: 20},
{id: 2, name: '极品木瓜', price: 10000, count: 20},
{id: 3, name: '仿真玩偶', price: 60000, count: 10},
],
checkInfo: [],
checkAll: false,
},
methods: {
getPrice() {
// 取出商品数量和商品价格进行相乘，做累加
// 使用for循环计算总价
var total = 0
for (item of this.checkInfo) {
total += item.price * item.count
}
return total
},
handlerChange() {
if (this.checkAll) {
this.checkInfo = this.goodList
} else {
this.checkInfo = []
}
},
handlerChange01() {
// // 如果checkInfo的长度等于goodList的长度，说明全选了，这个时候checkAll就是true，否则就是false
// if (this.checkInfo.length == this.goodList.length) {
// this.checkAll = true
// } else
// this.checkAll = false
// },
// 上述代码可以简写为：
this.checkAll = (this.checkInfo.length == this.goodList.length)
},
handlerDown(good) {
if (good.count > 1) {
good.count--
} else {
alert('数量低于1，不能减少了')
}
}
}
})
</script>
</html>
三、V-model进阶
lazy： 等待input框的数据绑定时区焦点之后再变化
number： 数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim： 去除首位的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>v-model进阶</h1>
<input type="text" v-model.lazy="name1"> ---->{{name1}}
<br>
<input type="text" v-model.number="name2"> ---->{{name2}}
<br>
<input type="text" v-model.trim="name3"> ---->{{name3}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name1: '',
name2: '',
name3: '',
},
})
</script>
</html>
四、Vue生命周期
| 钩子函数 |
描述 |
| beforeCreate |
创建Vue实例之前调用 |
| created |
创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
| beforeMount |
渲染DOM之前调用 |
| mounted |
渲染DOM之后调用 |
| beforeUpdate |
重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
| updated |
重新渲染完成之后调用 |
| beforeDestroy |
销毁之前调用 |
| destroyed |
销毁之后调用 |
# var vm=new Vue实例()
-1 实例创建，数据放到实例中
-2 挂在模板：el---》div
-3 改页面，改变量，都会相互影响 update
-4 销毁实例
# 4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）
beforeCreate 创建Vue实例之前调用，data，el都没有
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
beforeMount 渲染DOM之前调用 ，data有了，el没有
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
# 5 钩子函数（hook） AOP的体现：面向切面编程--》装饰器实现aop
# 6 vm实例：看不到它销毁 组件vc
# 7 组件：组件化开发
# 8 学习生命周期重点掌握的
-1 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了
-2 destroyed做一些资源清理性的工作
# 9 小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁
-补充：js 定时任务和延时任务
# 延时任务
setTimeout(()=>{
console.log('3s后执行我')
},3000)
#定时任务
setInterval(()=>{
console.log('hello')
},3000)
#10 什么场景下用定时任务？
1 实时跟后端交互 基于http+定时任务 （websocket协议：服务端主动推送消息，手机app的消息推送）
2 秒杀场景：先提交秒杀请求，每隔3s，查询是否秒到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>vue生命周期</h1>
<button @click="handlerClick01">组件的显示与消失</button>
<hr>
<child v-if="show"></child>
<hr>
</div>
</body>
<script>
// 定义一个全局组件
Vue.component('child', {
template: `
<div>
<button>回退</button>
{{ title }}
<button @click="handlerClick">前进</button>
</div>`,
data() {
return {
title: '首页'
}
},
methods: {
handlerClick() {
// alert('前进')
this.title = 'jason'
}
},
beforeCreate() {
console.log('当前状态: beforeCreate')
},
created() {
console.log('当前状态：created')
},
beforeMount() {
console.log('当前状态：beforeMount')
},
mounted() {
console.log('当前状态：mounted')
},
beforeUpdate() {
console.log('当前状态：beforeUpdate')
},
updated() {
console.log('当前状态: updated')
},
beforeDestroy() {
console.log('当前状态：beforeDestroy')
},
destroyed() {
console.log('当前状态：destroyed')
}
})
var vm = new Vue({
el: '#app',
data: {
show: true,
},
methods: {
handlerClick01() {
this.show = !this.show
}
}
})
</script>
</html>
五、后端交互Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>jQuery的ajax与后端交互</h1>
<button @click="handleLoad">点击加载数据</button>
<br>
<p>username: {{name}}</p>
<p>age: {{age}}</p>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
handleLoad() {
$.ajax({
url: '',
type: 'get',
success: data => {
console.log(data)
}
})
}
}
})
</script>
</html>
六、JS中的for循环
# python中只有基于迭代的循环，没有基于索引的循环
# js，java，go中有基于迭代和索引的两种循环
# js中for循环：
1 for (i=0;i<checkGroup.length;i++) # 基于索引的循环
2 for (i in checkGroup) # 基于迭代的循环
3 for (i of checkGroup) # es6中的循环
4 数组内置方法.forEach()
5 jquery $.each 循环
# 代码演示
// 1 方式一：js的基于索引的循环
// for (var i = 0; i< goodList.length; i++) {
// console.log(goodList[i])
// }
// 2 方式二：基于迭代的循环
// for (i in goodList){
// console.log(goodList[i])
// }
// 3 方式三：of 循环，基于迭代的
// for (i of goodList){
// console.log(i)
// }
// 4 方式四：数组的循环方法
// goodList.forEach(item => {
// console.log('---', item)
// })
// 5 jquery:引入
// $.each(goodList, (i, v) => {
// console.log(v)
// })
七、跨域请求及问题解决
# 关于什么是跨域请求，以及如何解决这个问题，请参考下方博客链接：
https://www.cnblogs.com/zaking/p/16532324.html
浙公网安备 33010602011771号