Vue 表单控制 生命周期
Vue 表单控制 生命周期
文章目录
- Vue 表单控制 生命周期
-
- 1、表单控制
- 2、购物车案例
-
- 2.1、for 循环的 方法归纳
- 2.2、购物车
- 3、v-model进阶（了解）
- 4、vue生命周期
- 5、与后端交互
- 扩展（django 与 axios交互）
1、表单控制
input:checkbox(单选,多选)，radio（单选）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>
<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>
<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、购物车案例
2.1、for 循环的 方法归纳
python中 只有基于迭代的循环，没有基于索引的循环
**js,java,go中有基于迭代和索引的两种 **
1 for(i=0;i<checkGroup.length;i++) # 基于索引的循环
2 for (i in checkGroup) # 基于迭代的循环 i为索引
3 for (i of checkGroup) # es6中 基于迭代循环 i为元素值
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)
})
2.2、购物车
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 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>商品idth>
<th>商品名字th>
<th>商品价格th>
<th>商品数量th>
<th><input type="checkbox" v-model="checkAll" @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: 1200000, count: 1},
{id: 2, name: '钢笔', price: 12, count: 34},
{id: 3, name: '鸡蛋', price: 2, count: 4},
{id: 4, name: '面包', price: 9, count: 10},
],
checkGroup: [],
checkAll: false,
},
methods: {
getPrice() {
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>
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的体现：面向切面编程–> 装饰器实现app
vm实例： 看不到它销毁 组件vc
组件：组件化开发
学习生命周期重点掌握
1 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了
2 destroyed做一些资源清理性的工作
小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁
补充：js定时任务和延时任务
延时任务
setTimeout(()=>{console.log(3s后执行我)},3000)
定时任务
settInterval(()=>{console.log('hello')},3000)
生命场景下用定时任务？
定时跟后端交互 基于http+定时任务（websocket协议：服务端主动推送消息，手机app的消息推送）
渺少场景：先提交秒杀请求，每隔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="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、与后端交互
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>
<h1>js原生的fetch与后端交互h1>
<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>
扩展（django 与 axios交互）
view.py
from rest_framework.views import Response
from rest_framework.views import APIView
class Movie(APIView):
def get(self,request):
with open(r'./app01/move_file.json', 'r',encoding='utf8') as f:
res=json.load(f)
print(res)
# headers = {'Access-Control-Allow-Origin': '*'} 解决 跨域错误
return Response(res,headers = {'Access-Control-Allow-Origin': '*'},)
movie.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
<script src="../static/js/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="d1">
<p v-html="name">p>
<h1>电影小案例h1>
<ul>
<li v-for="film in filmList">
<h2>电影名：{{ film.name }}h2>
<img :src="film.poster" alt="" height="400px" width="300px">
li>
ul>
div>
body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: 'cxt',
filmList: []
},
created() {
axios.get('http://127.0.0.1:8000/moveview/').then(res => {
console.log(res)
this.filmList = res.data.data.films
})
}
})
script>
html>