Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数
2023/6/6 1:52:06
本文主要是介绍Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
表单控制
// 1 checkbox
单选
多选
// 2 radio
单选
<body>
<div id="app">
<h1>checkbox单选</h1>
<p>用户名: <input type="text" v-model="username"></p>
<p>密码: <input type="password" v-model="password"></p>
<p>记住密码: <input type="checkbox" v-model="remember"></p>
<hr>
用户名：{{username}}----->密码：{{password}}------>记住密码：{{remember}}
<h1>checkbox多选</h1>
<p>用户名: <input type="text" v-model="username"></p>
<p>密码: <input type="password" v-model="password"></p>
<p>记住密码: <input type="checkbox" v-model="remember"></p>
<p>爱好：</p>
<p>足球：<input type="checkbox" v-model="hobby" value="1"></p>
<p>篮球：<input type="checkbox" v-model="hobby" value="2"></p>
<p>乒乓球：<input type="checkbox" v-model="hobby" value="3"></p>
<hr>
用户名：{{username}}----->密码：{{password}}------>记住密码：{{remember}}----->爱好：{{hobby}}
<h1>radio单选</h1>
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>记住密码：<input type="checkbox" v-model="remember"></p>
<p>爱好：</p>
<p>足球：<input type="checkbox" v-model="hobby" value="1"></p>
<p>篮球：<input type="checkbox" v-model="hobby" value="2"></p>
<p>乒乓球：<input type="checkbox" v-model="hobby" value="3"></p>
<p>性别：</p>
<p>男：<input type="radio" v-model="gender" value="1"></p>
<p>女：<input type="radio" v-model="gender" value="2"></p>
<p>保密：<input type="radio" v-model="gender" value="3"></p>
<hr>
用户名：{{username}}--–>密码：{{password}}----> {{remember}}--->爱好：{{hobby}}--->性别：{{gender}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
remember: false,
hobby:[],
gender:''
},
})
</script>
js循环补充
<script>
var arr = [1,2,3,4,5,6,7]
// 1 基础for循环
// for(var i = 0;i<arr.length;i++){
// console.log(arr[i])
// }
// 2 in的循环(不怎么用)，循环出索引
// for (i in arr){
// // console.log(i)
// console.log(arr[i])
// }
// 3 of循环 es6的语法 循环出value值
// for (i of arr){
// console.log(i)
// }
// 4 数组的循环 值在前索引在后
// arr.forEach(function(value,index){
// console.log(index,'-----',value)
// })
// 5 jQuery的循环 索引在前值在后
$.each(arr,function (index,value) {
console.log(index,'----',value)
})
</script>
购物车案例
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>商品id</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<button class="btn" @click="handleJian(good)">-</button>
{{good.number}}
<button class="btn" @click="handleJia(good)">+</button>
</td>
<td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleOne"></td>
</tr>
</tbody>
</table>
<hr>
选中了：{{checkGroup}}
<h3>总价格：{{getPrice()}}</h3>
<h3>选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面。函数就会重新执行</h3>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 1},
{id: 2, name: '脸盆', price: 20, number: 1},
{id: 3, name: '毛笔', price: 6, number: 1},
{id: 4, name: '圆珠笔', price: 8, number: 1},
{id: 5, name: '铅笔', price: 1, number: 1},
],
checkGroup: [],
checkAll: false,
},
methods: {
getPrice() {
// 1 根据checkGroup选中的计算
// 循环checkGroup 拿出价格*数量 累加 最后返回
var total = 0
for (item of this.checkGroup) {
total += item.price * item.number
}
return total
},
handleCheckAll() {
// console.log(this.checkAll)
// 全选中：对钩都打上 js中的含义是：checkGroup变量满值
if (this.checkAll){
this.checkGroup = this.good_list // 全选
}else {
this.checkGroup = [] // 全不选
}
},
handleOne(){
// 判断checkGroup的长度 是否等于good_list的长度
if (this.checkGroup.length === this.good_list.length){
this.checkAll = true
}else {
this.checkAll = false
}
},
handleJian(good){
if (good.number > 1){
good.number--
}else {
alert('不能减了')
}
},
handleJia(good){
good.number++
}
}
})
</script>
v-model
v-model 之lazy、number、trim
// lazy:等待input框的数据绑定失去焦点之后再变化
// number:数字开头，只保留数字，后面的字母不保留；字母开头，都保留
// trim：去除首尾的空格
<body>
<div id="app">
<h1>lazy修饰符</h1>
<input type="text" v-model.lazy="username">-------{{username}}
<h1>number修饰符</h1>
<input type="text" v-model.number="username1">------{{username1}}
<h1>trim修饰符</h1>
<input type="text" v-model.trim="username2">-----{{username2}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
username1: '',
username2: '',
},
})
</script>
与后端交互的三种方式
# 后端写了一堆接口
# 前端现在发送请求
# 前后端要打通--->从前端发送ajax--->核心:使用js发送http请求，接收返回
原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑(基本不写)
jQuery，写了个兼容所有浏览器的，$.ajax()，不仅仅有ajax，还封装了很多dom操作
如果在Vue中使用它，不合适
axios:第三方的ajax包(之后用这个)
fetch:原生js发送ajax请求，有的浏览器也不兼容
# 写个后端:flask
# pip3 install flask
from flask import Flask,jsonify
方式一：使用jQuery的ajax
<body>
<div id="app">
<button @click="handleLoad">点我加载数据</button>
<hr>
你的名字是：{{name}},你的年龄是{{age}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
// 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
// 当前请求地址，如果向非当前地址栏中的地址发送请求，就会出现跨域
// 1.jQuery的ajax请求
handleLoad(){
$.ajax({
url:'http://127.0.0.1:5000',
type:'get',
success:data =>{
console.log(typeof data)
var res = JSON.parse(data)
this.name = res.name
this.age = res.age
}
})
},
},
})
</script>
方式二：使用js原生的fetch(目前不用)
<body>
<div id="app">
<button @click="handleLoad">点我加载数据</button>
<hr>
你的名字是：{{name}},你的年龄是{{age}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
handleLoad() {
// var _this = this
// fetch('http://127.0.0.1:5000').then(function (response) {
// // console.log(response)
// return response.json()
// }).then(function (res) {
// // console.log(res)
// _this.name = res.name
// _this.age = res.age
// })
// 箭头函数写法
fetch('http://127.0.0.1:5000').then(response=>response.json().then(res=>{
this.name = res.name
this.age = res.age
}))
}
},
})
</script>
方式三：使用axios，以后都用这个
<body>
<div id="app">
<button @click="handleLoad">点我加载数据</button>
<hr>
你的名字是：{{name}},你的年龄是{{age}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
handleLoad() {
// var _this = this
// axios.get('http://127.0.0.1:5000')
// .then(function (response) {
// // console.log(response.data);
// _this.name = response.data.name
// _this.age = response.data.age
// })
// .catch(function (error) {
// console.log(error);
// });
// 箭头函数写法
axios.get('http://127.0.0.1:5000').then(res => {
this.name = res.data.name
this.age = res.data.age
}).catch(error => {
console.log(error)
})
}
},
})
</script>
箭头函数
<script>
// 箭头函数
// 1.无参数，无返回值
let f = function () {
console.log('我是匿名函数')
}
let f = () => {
console.log('我是匿名函数')
}
f()
// 2.有一个参数，没有返回值，可以省略括号
let f = function (name) {
console.log('我是匿名函数',name)
}
let f = name => {
console.log('我是匿名函数',name)
}
f('XxMa')
// 3.多个参数，不能省略括号
let f = function (name,age) {
console.log('我是匿名函数',name,age)
}
let f = (name,age) => {
console.log('我是匿名函数',name,age)
}
f('XxMa',19)
// 4.多个参数，不能省略括号，一个返回值
let f = (name,age) => {
return name + 'nb'
}
// 简写
let f = (name,age) => name + 'nb'
let res = f('XxMa',19)
console.log(res)
// 5.一个参数，一个返回值
let f = name => name + 'nb'
let res = f('XxMa',19)
console.log(res)
</script>
这篇关于Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15基于JSON的大型语言模型代理与Ollama及LangChain的应用
- 2024-11-15useCallback教程：React Hook入门与实践
- 2024-11-15React中使用useContext开发：初学者指南
- 2024-11-15拖拽排序js案例详解：新手入门教程
- 2024-11-15React中的自定义Hooks案例详解
- 2024-11-14受控组件项目实战：从零开始打造你的第一个React项目
- 2024-11-14React中useEffect开发入门教程
- 2024-11-14React中的useMemo教程：从入门到实践
- 2024-11-14useReducer开发入门教程：轻松掌握React中的useReducer
- 2024-11-14useRef开发入门教程：轻松掌握React中的useRef用法
