Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）
文章目录
- 一、表单控制
- 二、购物车案例
- 三、V-model进阶
- 四、Vue生命周期
- 五、与后端交互Ajax
一、表单控制
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>
二、购物车案例
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>
三、V-model进阶
lazy 等待input框的数据绑定时区焦点之后再变化
number 数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim 去除首位的空格
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>
四、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>
五、与后端交互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>
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()
技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请
点点赞收藏+关注谢谢支持 !!!