-
Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）
一、表单控制
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <script src="./Js/vue.js">script> head> <body> <div id="first"> <h1>单选h1> <input type="radio" v-model="radio" value="Boys">Boys <input type="radio" v-model="radio" value="Girls">Girls <input type="radio" v-model="radio" value="Gays">Gays <br><br> 选择性别是： {{radio}} div> <div id="two"> <h1>多选h1> <input type="checkbox" v-model="many" value="篮球">篮球 <input type="checkbox" v-model="many" value="足球">足球 <input type="checkbox" v-model="many" value="台球">台球 <input type="checkbox" v-model="many" value="擦边球">擦边球 <br><br> 选择的球类是：{{many}} div> body> <script> var vm = new Vue({ el:'#first', data:{ 'radio': '', }, }) var vm1 = new Vue({ el:'#two', data:{ 'many':[], }, }) 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
二、购物车案例
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="first"> <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> <td>商品名称td> <td>价格td> <td>数量td> <td>全选|全不选<input type="checkbox" v-model="checkAll" @change="checkChange">td> tr> thead> <tbody> <tr v-for="shop in shopList"> <td>{{shop.name}}td> <td>{{shop.price}}td> <td> <span class="btn btn-sm link" @click="handlerDown(shop)">-span> {{shop.count}} <span class="btn btn-sm link" @click="shop.count++">+span> td> <td><input type="checkbox" v-model="checkGroup" :value="shop" @change="checkOne">td> tr> tbody> table> <br>已选商品：{{checkGroup}} <br>总价：{{countPrice()}} div> div> div> div> body> <script> new Vue({ el: '#first', data:{ shopList: [ {name: 'Audi', price: '999', count: 1}, {name: 'Porsche', price: '8673', count: 1}, {name: 'BMW', price: '777', count: 1}, {name: 'Mercedes-Benz', price: '22222', count: 1}, ], checkGroup: [], checkAll: false, }, methods:{ countPrice(){ var total = 0 for (i of this.checkGroup){ total += i.price * i.count } return total }, checkChange(){ if(this.checkAll){ this.checkGroup = this.shopList } else{ this.checkGroup = [] } }, checkOne(){ this.checkAll = this.checkGroup.length == this.shopList.length }, handlerDown(shop){ if (shop.count>1){ shop.count-- } else{ alert('再减没啦！！！') } } } }) 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
三、V-model进阶
lazy 等待input框的数据绑定时区焦点之后再变化 number 数字开头，只保留数字，后面的字母不保留；字母开头，都保留 trim 去除首位的空格- 1
- 2
- 3
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <script src="./Js/vue.js">script> head> <body> <div id="first"> <h1>v-model进阶使用h1> Lazy--:<input type="text" v-model.lazy="name1"> ----->>> {{name1}} <br> Number:<input type="text" v-model.number="name2"> ----->>> {{name2}} <br> Trim--:<input type="text" v-model.trim="name3"> ----->>> {{name3}} <br> div> body> <script> new Vue({ el:'#first', 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
四、Vue生命周期
按照官网理解的生命周期流程图
生命周期八大钩子钩子函数 描述 beforeCreate 创建Vue实例之前调用 created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） beforeMount 渲染DOM之前调用 mounted 渲染DOM之后调用 beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） updated 重新渲染完成之后调用 beforeDestroy 销毁之前调用 destroyed 销毁之后调用 测试代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <script src="./Js/vue.js">script> head> <body> <div id="first"> <h1>Vue生命周期h1> <button @click="showModule">点我显示组件和消失button> <hr> <child v-if="show">child> <hr> div> body> <script> Vue.component('child', { template: `{{title}}`, data() { return { title: '生命周期', t: '' } }, methods: { goClick() { this.title = '我是新的生命周期' } }, 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: '#first', data:{ show: true, }, methods:{ showModule(){ 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
五、与后端交互Ajax
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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script> head> <body> <div id="first"> <h1>Jquery的Ajax与后端交互h1> <button @click="actionData">点击加载数据button> <br> <p>名称：{{name}}p> <p>年龄：{{age}}p> <h1>JS的fetch与后端交互h1> <button @click="actionData1">点击加载数据button> <br> <p>名称：{{name}}p> <p>年龄：{{age}}p> <h1>axios与后端交互h1> <button @click="actionData2">点击加载数据button> <br> <p>名称：{{name}}p> <p>年龄：{{age}}p> div> body> <script> var vm = new Vue({ el: '#first', data: { name: '', age: '', }, methods: { actionData(){ $.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 } }) }, actionData1(){ 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 }) }, actionData2(){ 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
from flask import Flask, jsonify app = Flask(__name__) @app.route('/') def index(): res = jsonify({'name': 'Like', 'age': 20}) # 处理跨区 在响应头中添加 Access-Control-Allow-Origin': '*' res.headers = {'Access-Control-Allow-Origin': '*'} return res if __name__ == '__main__': app.run()- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请
点点赞收藏+关注谢谢支持 !!! -
相关阅读:
git clone拉取代码错误解决方法
XML配置文件
密码学之椭圆曲线
10 个最佳 WordPress 幻灯片插件
5G/4G/北斗遥测终端机全国各省水利平台无缝对接
基于SSM的教务管理系统运行教程
【华为OD机试python】数据分类【2023 B卷|100分】
面试总结1
代码之美：注释的艺术与重要性
ROS常见问题 | 虚拟机打开RVIZ闪退出错
- 原文地址：https://blog.csdn.net/MeiJin_/article/details/127533520
