案例、v-model进阶、与后端交互、vue生命周期、vue组件
购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">李李购物车</h1>
<table class="table table-striped">
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>选择/全选</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goodList">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="item"></td>
</tr>
</tbody>
</table>
<p>选中的商品：{{checkGroup}}</p>
<p>总价格：{{getPrice()}}</p>
</div>
</div>
</div>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
goodList: [
{id: '1', name: '商品1', price: 522.1, number: 5},
{id: '2', name: '商品2', price: 35, number: 1},
{id: '3', name: '商品3', price: 53, number: 5},
],
checkGroup:[],
},
methods:{
getPrice(){
var total = 0
for (item of this.checkGroup){
total+=item.price*item.number
}
return total
}
},
})
</script>
</html>
'''
循环打印 商品信息 建一个空数组与选择的商品信息双向绑定 并打印商品信息
计算价格：初始时0 循环空数组 初始值+商品信息中商品价格*商品数量
返回出去
'''
带全选/全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">李李购物车</h1>
<table class="table table-striped">
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>选择/全选 <input type="checkbox" v-model="checkAll" @change="handCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in goodList">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handCheckOne"></td>
</tr>
</tbody>
</table>
<p>选中的商品：{{checkGroup}}</p>
<p>总价格：{{getPrice()}}</p>
</div>
</div>
</div>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
goodList: [
{id: '1', name: '商品1', price: 522.1, number: 5},
{id: '2', name: '商品2', price: 35, number: 1},
{id: '3', name: '商品3', price: 53, number: 5},
],
checkGroup:[],
checkAll:false,
},
methods:{
getPrice(){
var total = 0
for (item of this.checkGroup){
total+=item.price*item.number
}
return total
},
handCheckAll(){
if (this.checkAll){
this.checkGroup = this.goodList
}else{
this.checkGroup=[]
}
},
handCheckOne(){
if (this.checkGroup.length == this.goodList.length){
this.checkAll = true
}else{
this.checkAll = false
}
},
},
})
</script>
</html>
'''
给全选的表头绑定一个变化事件 表头与全选双向绑定
给每个商品后面的多选 添加一个变化事件
在data定义一个全选 默认是false
全选函数： 判断是不是全选 如果是 就让全选的=所有商品列表
不是就返回数组
点一个函数：判断 如果数组的长度 == 伤命数组的长度 全选改为true
不是 全选改为true
'''
带加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">李李购物车</h1>
<table class="table table-striped">
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>选择/全选 <input type="checkbox" v-model="checkAll" @change="handCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in goodList">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
·
<td><button @click="handleDown(item)">-</button></td>
<td>{{item.number}}</td>
<td><button @click="item.number++">+</button></td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handCheckOne"></td>
</tr>
</tbody>
</table>
<p>选中的商品：{{checkGroup}}</p>
<p>总价格：{{getPrice()}}</p>
</div>
</div>
</div>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
goodList: [
{id: '1', name: '商品1', price: 522.1, number: 5},
{id: '2', name: '商品2', price: 35, number: 1},
{id: '3', name: '商品3', price: 53, number: 5},
],
checkGroup:[],
checkAll:false,
},
methods:{
getPrice(){
var total = 0
for (item of this.checkGroup){
total+=item.price*item.number
}
return total
},
handCheckAll(){
if (this.checkAll){
this.checkGroup = this.goodList
}else{
this.checkGroup=[]
}
},
handCheckOne(){
if (this.checkGroup.length == this.goodList.length){
this.checkAll = true
}else{
this.checkAll = false
}
},
handleDown(item){
if (item.number>1){
item.number--
}else{
alert('不能再少了')
}
}
},
})
</script>
</html>
'''
可以直接在数量的上下写两个按钮绑定点击事件 也可以写函数
-就需要写函数 因为如果不写函数可以写成-1不符合规定
-函数 传值 判断 数量里面的个数是否大于1 大于就- 否则就alert
'''
删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">李李购物车</h1>
<table class="table table-striped text-center">
<thead>
<tr>
<th class="text-center">商品编号</th>
<th class="text-center">商品名称</th>
<th class="text-center">商品价格</th>
<th class="text-center">商品数量</th>
<th class="text-center">选择/全选 <input type="checkbox" v-model="checkAll" @change="handCheckAll"></th>
<th class="text-center" >删除商品</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goodList" >
<th scope="row" class="text-center">{{item.id}}</th>
<td >{{item.name}}</td>
<td>{{item.price}}</td>
<td >
<button @click="handleDown(item)">-</button>
{{item.number}}
<button @click="item.number++">+</button>
</td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handCheckOne"></td>
<td><button @click="clickDelete(item)" >删除</button></td>
</tr>
</tbody>
</table>
<p>选中的商品：{{checkGroup}}</p>
<p>总价格：{{getPrice()}}</p>
</div>
</div>
</div>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
goodList: [
{id: '1', name: '商品1', price: 522.1, number: 5},
{id: '2', name: '商品2', price: 35, number: 1},
{id: '3', name: '商品3', price: 53, number: 5},
],
checkGroup:[],
checkAll:false,
},
methods:{
getPrice(){
var total = 0
for (item of this.checkGroup){
total+=item.price*item.number
}
return total
},
handCheckAll(){
if (this.checkAll){
this.checkGroup = this.goodList
}else{
this.checkGroup=[]
}
},
handCheckOne(){
if (this.checkGroup.length == this.goodList.length){
this.checkAll = true
}else{
this.checkAll = false
}
},
handleDown(item){
if (item.number>1){
item.number--
}else{
alert('不能再少了')
}
},
clickDelete(item){
d =confirm('确定要删除吗？')
if (d){
this.goodList.splice(item.id-1,1)//用索引去删
}else{
}
},
},
})
</script>
</html>
#pyhton
不可变类型 ：数字、字符串、元组
可变类型：列表、字典、集合
python中没有值类型和引用类的叫法：因为python一切皆对象 对象都是地址 都是引用
可变类型当参数传到函数中 在函数中修改会影响原来的
不可变类型当参数传到函数中 在函数中修改不会影响原来的
#python 函数参数传递是值传递还是引用传递
赋值传递
#js 传入item对象 在函数中修改 影响了原来
js的对象是引用类型
v-model进阶
| lazy： | 等待input框的数据绑定时去焦点之后再变化 |
| number： | 数字开头 只保留数字 后面的字母不保留；字母保留 都保留 |
| trim： | 去除首位的空格 |
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="myText">-----{{myText}}
<input type="text" v-model.number="myNum">-----{{myNum}}
<input type="text" v-model.trim="myTirm">-----{{myTirm}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText:'',
myNum:'',
myTirm:''
}
})
</script>
</html>
与后端交互
# 跨域问题
浏览器原因 只要向不是地址栏中的【域：地址和端口】发送请求，拿到数据 浏览器就给拦截了
# 处理跨域问题
后端代码处理 -- 只需要在响应头中加入允许即可
jq的ajax
vue生命周期
从vue实例创建开始 到实例被销毁 总共经历了8歌生命周期钩子【只要写了就会被执行】函数
钩子：反序列化验证 --- 钩子
学名【专门名字】 --- 面向切面编程（AOP）
OOP：面向对象编程
8个生命周期钩子函数
| beforeCreate | 创建Vue实例之前调用 |
| created | 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
| beforeMount | 渲染DOM之前调用 |
| mounted | 渲染DOM之后调用 |
| beforeUpdate | 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
| updated | 重新渲染完成之后调用 |
| beforeDestroy | 销毁之前调用 |
| destroyed | 销毁之后调用 |
重点：
1.用的最多的 create 发送ajax请求 有的人放在mounted中
2.beforeDestroy
组件一创建 create一个定时器
组件被销毁 beforeDestroy销毁定时器
实现实时聊天效果（在线聊天室）
轮询：定时器+ajax http：http版本区别
长轮询：定时器+ajax http
websocked协议：服务端主动推送消息
vue组件
组件化开发的好处：重用代码
组件分类：
全局组件：在任意组件中都可以使用
局部组件：只能在当前组件中使用
