1 表单控制
input:checkbox(单选,多选),radio(单选)
<!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>用户名:<input type="text" v-model="name"></p>
<p>密码:<input type="text" v-model="password"></p>
<p><input type="checkbox" v-model="isRemember"> 记住密码</p>
{{isRemember}}
<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}}
<p>
爱好:
<input type="checkbox" value="篮球" v-model="hobby"> 篮球
<input type="checkbox" value="足球" v-model="hobby"> 足球
<input type="checkbox" value="乒乓球" v-model="hobby"> 乒乓球
<input type="checkbox" value="橄榄球" v-model="hobby"> 橄榄球
</p>
{{hobby}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: '',
password: '',
isRemember: false, // checkbox单选,使用布尔类型
gender: '', // radio单选,使用字符串
hobby: [], // checkbox 多选使用数组
},
})
</script>
</html>
2 购物车案例
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 循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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 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>商品编号</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.price}}</td>
<td>{{good.count}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="good"></td>
</tr>
</tbody>
</table>
<hr>
选中的商品是:{{checkGroup}}
<br>
总价格是:{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
goodList:[
{id:1,name:'汽车',price:299999,count:1},
{id:2,name:'轮船',price:5999999,count:5},
{id:3,name:'飞机',price:7899999999,count:1},
{id:4,name:'火车',price:2131241299999,count:3}
],
checkGroup:[],
},
methods: {
getPrice() {
// for (i in goodList)
// {console.log(goodList[i])
var total = 0
for (item of this.checkGroup) {
total += item.price * item.count
}
return total
}
}
})
var goodList=[
{id:1,name:'汽车',price:299999,count:1},
{id:2,name:'轮船',price:5999999,count:5},
{id:3,name:'飞机',price:7899999999,count:1},
{id:4,name:'火车',price:2131241299999,count:3}
]
// 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)
// })
</script>
</html>
2.1 购物车全选或者全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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 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>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th><input type="checkbox" v-model="checkGroup" :value="good" @change="handleChange">全选/全不选</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList">
<th >{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}} </td>
<td><input type="checkbox" v-model="checkGroup" :value="good" @change=" handleCheckOne"></td>
</tr>
</tbody>
</table>
<hr>
选中的商品是:{{checkGroup}}
<br>
总价格是:{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
goodList:[
{id:1,name:'汽车',price:299999,count:1},
{id:2,name:'轮船',price:5999999,count:5},
{id:3,name:'飞机',price:7899999999,count:1},
{id:4,name:'火车',price:2131241299999,count:3}
],
checkGroup:[],
checkAll: true,
},
methods: {
getPrice() {
// for (i in goodList)
// {console.log(goodList[i])
var total = 0
for (item of this.checkGroup) {
total += item.price * item.count
}
return total
},
handleChange() {
if (this.checkAll) {
this.checkGroup = this.goodList
} else {
this.checkGroup = []
}
},
handleCheckOne() {
// 如果checkGroup的长度等于goodList的长度,说明全选了,checkAll就应该变为true,否则就是false
// if (this.checkGroup.length == this.goodList.length) {
// this.checkAll = true
// } else {
// this.checkAll = false
// }
// 变短
this.checkAll = this.checkGroup.length == this.goodList.length
}
}
})
</script>
</html>
2.2购物车的加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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 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>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th><input type="checkbox" v-model="checkGroup" :value="good" @change="handleChange">全选或者全不选</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList">
<th >{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td><button class="btn link btn-sm" @click="handleDown(good)">-</button>{{good.count}} <button class="btn link btn-sm" @click="good.count++">+</button></td>
<td><input type="checkbox" v-model="checkGroup" :value="good" @change=" handleCheckOne"></td>
</tr>
</tbody>
</table>
<hr>
选中的商品是:{{checkGroup}}
<br>
总价格是:{{getPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
goodList:[
{id:1,name:'汽车',price:299999,count:1},
{id:2,name:'轮船',price:5999999,count:5},
{id:3,name:'飞机',price:7899999999,count:1},
{id:4,name:'火车',price:2131241299999,count:3}
],
checkGroup:[],
checkAll: false,
},
methods: {
getPrice() {
// for (i in goodList)
// {console.log(goodList[i])
var total = 0
for (item of this.checkGroup) {
total += item.price * item.count
}
return total
},
handleChange() {
if (this.checkAll) {
this.checkGroup = this.goodList
} else {
this.checkGroup = []
}
},
handleCheckOne() {
// 如果checkGroup的长度等于goodList的长度,说明全选了,checkAll就应该变为true,否则就是false
// if (this.checkGroup.length == this.goodList.length) {
// this.checkAll = true
// } else {
// this.checkAll = false
// }
// 变短
this.checkAll = this.checkGroup.length == this.goodList.length
},
handleDown(good){
if (good.count>1) {
good.count--
}
else{
alert('数量不能低于零')
}
}
}
})
</script>
</html>
3 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>
4 vue生命周期
-
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 销毁之后调用
-
-
钩子函数(hook) AOP的体现:面向切面编程–》装饰器实现aop
-
vm实例:看不到它销毁 组件vc
-
组件:组件化开发
-
8 学习生命周期重点掌握的
-1 组件向后端发送请求,获取数据,应该放在 created 写,此时data已经有数据了
-2 destroyed做一些资源清理性的工作 -
小案例:组件创建,开启定时器,不停的打印hello,在destroyed中对定时器进行销毁
-补充:js 定时任务和延时任务延时任务
setTimeout(()=>{
console.log(‘3s后执行我’)
},3000)
#定时任务
setInterval(()=>{
console.log(‘hello’)
},3000) -
什么场景下用定时任务?
1 实时跟后端交互 基于http+定时任务 (websocket协议:服务端主动推送消息,手机app的消息推送)
2 秒杀场景:先提交秒杀请求,每隔3s,查询是否秒到
4.1 vue的声明周期
<!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="handleShow">点我组件显示和消失</button>
<hr>
<child v-if="show"></child>
<hr>
</div>
</body>
<script>
// 定义一个全局组件
Vue.component('child', {
template: `
<div>
<button>后退</button>
{{ title }}
<button @click="handleClick">前进</button>
</div>`,
data() {
return {
title: '好看的首页',
t:''
}
},
methods: {
handleClick() {
// alert('前进')
this.title = 'lqz'
}
},
beforeCreate() {
console.log('beforeCreate')
console.log(this.$data)
console.log(this.$el)
},
created() {
console.log('created')
console.log(this.$data)
console.log(this.$el)
// 开启定时器,每隔3s,打印hello
this.t=setInterval(()=>{
console.log('hello')
},3000)
},
beforeMount() {
console.log('beforeMount')
console.log(this.$data)
console.log(this.$el)
},
mounted() {
console.log('mounted')
console.log(this.$data)
console.log(this.$el)
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('当前状态:beforeDestroy')
},
destroyed() {
console.log('当前状态:destroyed')
// 销毁定时器
clearInterval(this.t)
this.t=null
},
})
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleShow() {
this.show = !this.show
}
}
})
</script>
</html>
4.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>vue声明周期</h1>
<button @click="handleShow">点我组件显示和消失</button>
<hr>
<child v-if="show"></child>
<hr>
</div>
</body>
<script>
// 定义一个全局组件
Vue.component('child', {
template: `
<div>
<button>后退</button>
{{ title }}
<button @click="handleClick">前进</button>
</div>`,
data() {
return {
title: '好看的首页',
t:''
}
},
methods: {
handleClick() {
// alert('前进')
this.title = 'lqz'
}
},
beforeCreate() {
console.log('beforeCreate')
console.log(this.$data)
console.log(this.$el)
},
created() {
console.log('created')
console.log(this.$data)
console.log(this.$el)
// 开启定时器,每隔3s,打印hello
this.t=setInterval(()=>{
console.log('hello')
},3000)
},
beforeMount() {
console.log('beforeMount')
console.log(this.$data)
console.log(this.$el)
},
mounted() {
console.log('mounted')
console.log(this.$data)
console.log(this.$el)
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('当前状态:beforeDestroy')
},
destroyed() {
console.log('当前状态:destroyed')
// 销毁定时器
clearInterval(this.t)
this.t=null
},
})
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleShow() {
this.show = !this.show
}
}
})
</script>
</html>
5 与后端交互ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="app">
<h1>jquery的ajax与后端交互</h1>
<!-- <button @click="handleLoad1">点击加载数据</button>-->
<!-- <br>-->
<!-- <p>名字是:{{name}}</p>-->
<!-- <p>年龄是:{{age}}</p>-->
<!-- <hr>-->
<h1>js原生的fetch与后端交互</h1>
<!-- <button @click="handleLoad2">点击加载数据</button>-->
<!-- <br>-->
<!-- <p>名字是:{{name}}</p>-->
<!-- <p>年龄是:{{age}}</p>-->
<!-- <hr>-->
<h1>axios与后端交互</h1>
<button @click="handleLoad3">点击加载数据</button>
<br>
<p>名字是:{{name}}</p>
<p>年龄是:{{age}}</p>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
age: 0
},
methods: {
handleLoad1() {
$.ajax({
url: "http://127.0.0.1:5000/",
type: 'get',
success: data => {
console.log(typeof data)
data = JSON.parse(data) // data 是字符串类型,需要转成对象类型
console.log(typeof data)
this.name = data.name
this.age = data.age
}
})
},
handleLoad2() { // 用的很少
fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
console.log(res)
console.log(typeof res)
this.name = res.name
this.age = res.age
})
},
handleLoad3() { // 用的很少
axios.get('http://127.0.0.1:5000/').then(res => {
console.log(res.data) // 后端真正的数据在res.data中
this.name = res.data.name
this.age = res.data.age
})
},
}
})
</script>
</html>