-
Vue 表单控制 生命周期
Vue 表单控制 生命周期
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
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
- 2
- 3
- 4
- 5
实践
// 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) })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
4、vue生命周期
Var vm=new Vue实例（）1、实例创建，数据放到实例中 2、挂在模板：el--->div 3、该页面，改变量，都会相互影响 update 4、销毁实例- 1
- 2
- 3
- 4
4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）
beforeCreate 创建Vue实例之前调用，data，el都没有 created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的 beforeMount 渲染DOM之前调用 ，data有了，el没有 mounted 渲染DOM之后调用 beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） updated 重新渲染完成之后调用 beforeDestroy 销毁之前调用 destroyed 销毁之后调用- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
钩子函数（hook）AOP的体现：面向切面编程–> 装饰器实现app
vm实例： 看不到它销毁 组件vc
组件：组件化开发
学习生命周期重点掌握
1 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了 2 destroyed做一些资源清理性的工作- 1
- 2
小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁
补充：js定时任务和延时任务
延时任务
setTimeout(()=>{console.log(3s后执行我)},3000)
定时任务settInterval(()=>{console.log('hello')},3000)- 1
生命场景下用定时任务？
定时跟后端交互 基于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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
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> {name}}--> {age}}--> <h1>js原生的fetch与后端交互h1> {name}}--> {age}}--> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
扩展（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': '*'},)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
-
相关阅读:
2023NOIP A层联测14 修路
期末前端web大作业——名侦探柯南网页制作 Hbuiderx制作网页 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
为什么C++中的继承比Java设计的要复杂，原因竟出在这儿？
Python|OpenCV-图像的添加和混合操作(8)
Linux 下进程相关的常用命令汇总
Android学习笔记 61. 使用布局编辑器进行线性布局
[山东科技大学OJ]1586 Problem D: 编写函数：求矩阵的每行之和 (Append Code)
Eureka 笔记
Kube-OVN子网
2024年网络安全（黑客技术）三个月自学手册
- 原文地址：https://blog.csdn.net/weixin_71967396/article/details/127542006
