vue之day03：案件修饰符， check-box单选多选和radio,基本购物车功能，v-model进阶，Vue生命周期，Vue与后端交互
目录标题
-
-
- 一：事件处理之案件修饰符
- 二：表单控制之check-box单选多选和radio
- 三：基本购物车功能
-
-
- 1.四种循环方式
-
- 四：v-model进阶
- 五：Vue生命周期
- 六：Vue与后端的交互（发送ajax请求）
-
-
- 1.像后端发送ajax请求的3种方式
-
-
一：事件处理之案件修饰符
<body>
<div class="app">
普通使用：<input type="text" v-model="myText" @keydown="handleDown($event)">
监控enter键：<input type="text" v-model="myText" @keydown.enter="handleDown1">
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
},
methods: {
handleDown(event){
console.log(event.key)
},
handleDown1(){
console.log('enter被按下了')
}
}
})
script>
二：表单控制之check-box单选多选和radio
<h1>check-box单选》》》使用布尔值</h1>
<input type="checkbox" v-model="check_rem">
<hr>
<h1>check-box多选》》使用数组</h1>
<input type="checkbox" v-model="check_many" value="1">抽烟
<input type="checkbox" v-model="check_many" value="2">喝酒
<input type="checkbox" v-model="check_many" value="3">烫头
<input type="checkbox" v-model="check_many" value="4">洗澡
<hr>
{{check_many}}
<hr>
<h1>radio之单选</h1>
<input type="radio" v-model="gender" value="1">男
<input type="radio" v-model="gender" value="2">女
<input type="radio" v-model="gender" value="0">未知
{{gender}}
data: {
check_rem: '',
check_many: [],
gender:'',
}
三：基本购物车功能
1.四种循环方式
methods: {
getPrice(){
var total = 0
// 循环方式1
// for(i=0; i购物车全代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="js/vue.js">script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
head>
<body>
<div class="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>基本购物车h1>
<table class="table table-striped">
<thead>
<tr>
<th>商品名称th>
<th>商品价格th>
<th>商品数量th>
<th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll">th>
tr>
thead>
<tbody>
<tr v-for="item in dataList">
<td>{{item.name}}td>
<td>{{item.price}}td>
<td><button @click="reduceNum(item)">-button>{{item.number}}<button @click="item.number++">+button>td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleOne">td>
tr>
tbody>
table>
<hr>
总价格是：{{getPrice()}}
<br>
选中的对象是：{{checkGroup}}
<br>
全选与全不选：{{checkAll}}
div>
div>
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
dataList: [
{name:'钢笔', price:100, number: 10},
{name:'铅笔', price:300, number: 30},
{name:'彩笔', price:400, number: 40},
{name:'毛笔', price:500, number: 50},
],
checkGroup: [],
checkAll: false,
},
methods: {
getPrice(){
var total = 0
// 循环方式4
for (item of this.checkGroup){
total += item.price*item.number
}
return total
},
handleCheckAll(){
if (this.checkAll){ // 全选中
this.checkGroup=this.dataList
}else{
this.checkGroup=[]
}
},
handleOne(){
// if(this.checkGroup.length==this.dataList.length){
// this.checkAll=true
// }else{
// this.checkAll=false
// }
// 简便写法
this.checkAll=this.checkGroup.length===this.dataList.length
},
reduceNum(item){
if (item.number<=1){
alert('不能再少了')
}else{
item.number--
}
},
}
})
script>
html>
四：v-model进阶
| 方法 | 功能 |
|---|---|
| lazy | 等待input框的数据绑定失去焦点之后再变化 |
| .number | 数字开头：只保留数字，后面的字母不保留；如果是字母开头的话：都保留 |
| .trim | 去掉首位的空格 |
代码展示
<body>
<div class="app">
<input type="text" v-model.lazy="myText">--->{{myText}}
<br>
<input type="text" v-model.number="myText1">--->{{myText1}}
<br>
<input type="text" v-model.trim="myText2">--->{{myText2}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
myText1: '',
myText2: '',
}
})
</script>
五：Vue生命周期
1.生命周期的8个钩子函数
| 钩子函数 | 作用 |
|---|---|
| beforeCreate | 创建Vue实例之前调用 |
| created | 创建Vue实例成功之后调用（可以在此处发送异步请求后端数据） |
| beforeMount | 渲染DOM之前调用 |
| mounted | 渲染DOM之后调用 |
| beforeUpdate | 重新渲染之前调用（数据更新等操作是，控制DOM重新渲染） |
| updated | 重新渲染完成之后调用 |
| beforeDestroy | 销毁之前调用 |
| destroyed | 销毁之后调用 |
2.AOP 面向切面编程
python中的装饰器，钩子函数都属于切面编程的思想
3.OOP 面向对象编程
4.代码演示vue的生命周期
# 1.延迟任务
created(){
// 延迟任务
setTimeout(function (){
alert('lelelle')
},3000)
},
# 2.定时任务
// 定时任务
this.t=setInterval(()=>{
alert('太厉害了')
}, 3000)
# 3.销毁定时任务
data(){
return {
t: '',
}
},
beforeDestroy(){
clearInterval(this.t)
this.t=null
}
5.如何创建一个组件
<div class="app">
<button @click="handleShow">点我显示组件button>
<child v-if="show">child>
div>
Vue.component('Child',{
template:`
<div>
<h1>{{name}}h1>
<button @click="handleClick">点点button>
div>
`,
data(){
return {
name:'zhao',
}
},
methods: {
handleClick(){
alert('hahahaha')
}
}
})
六：Vue与后端的交互（发送ajax请求）
1.像后端发送ajax请求的3种方式
- 方案一：jq的ajax,vue种不推荐
- 方案二：js原生 fetch方法（官方）
- 方案三：exios 第三方（推荐）
创建一个flask项目
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/index/')
def index():
return jsonify({'name': 'zhao', 'age': 19})
if __name__ == '__main__':
app.run()
方案一：使用jq的ajax
<script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
<body>
<div class="app">
<button @click="handleClick">点我向后端发请求，获取用户信息button>
<hr>
用户名：{{name}}
<br>
年龄：{{age}}
div>
body>
// 方式一：使用jq的ajax
// $.ajax({
// url: 'http://127.0.0.1:5000/index/',
// 'type': 'get',
// success: data=>{
// this.name = data.name
// this.age = data.age
// }
// })
方案二：使用原生的fetch
// 方式二：使用原生的fetch
// fetch('http://127.0.0.1:5000/index/').then(res=>res.json()).then(res=>{
// this.name = res.name;
// this.age = res.age;
// console.log(res)
// })
方案三：使用axios发请求
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
axios.get('http://127.0.0.1:5000/index/').then(res=>{
this.name=res.data.name
this.age=res.data.age
console.log(res.data)
})