一、表单控制
1 checkebox:
-单选
-多选
2 radio
-单选
示例:文章来源地址https://www.toymoban.com/news/detail-476806.html
<!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>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>性别:
男:<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>
<hr>
用户名:{{username}}--–>密码:{{password}}----> {{remember}}---》爱好:{{hobby}}---》性别:{{gender}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
remember: false,
hobby: [],
gender: ''
},
})
</script>
</html>
二、购物车案例
2.1 基本购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<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>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.number}}</td>
<td><input type="checkbox" :value="good" v-model="checkGroup"></td>
</tr>
</tbody>
</table>
<hr>
选中了:{{checkGroup}}
<h3>总价格:{{getPrice()}}</h3>
<h3>选中了checkbox,checkGroup会发生变化,页面也在变,都会重新刷新页面,函数就会重新执行</h3>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 2},
{id: 2, name: '脸盆', price: 20, number: 20},
{id: 3, name: '毛笔', price: 6, number: 9},
{id: 4, name: '圆珠笔', price: 8, number: 5},
{id: 5, name: '铅笔', price: 1, number: 3},
],
checkGroup: [],
},
methods: {
getPrice() {
// 1 根据checkGroup选中的,计算
// 循环checkGroup,拿出价格*数量,累加,最后返回
var total = 0
for (item of this.checkGroup) {
total += item.number * item.price
}
return total
}
}
})
</script>
</html>
补充:
//补充: js循环
var arr = [33, 2, 3, 4, 6, 7, 4]
// 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 jq的循环
// $.each(arr, function (index, value) {
// console.log(index, '--', value)
// })
2.2、全选全不选版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<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 scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.number}}</td>
<td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleChangeOne"></td>
</tr>
</tbody>
</table>
<hr>
选中了:{{checkGroup}}
<br>
{{checkAll}}
<h3>总价格:{{getPrice()}}</h3>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 2},
{id: 2, name: '脸盆', price: 20, number: 20},
{id: 3, name: '毛笔', price: 6, number: 9},
{id: 4, name: '圆珠笔', price: 8, number: 5},
{id: 5, name: '铅笔', price: 1, number: 3},
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice() {
// 1 根据checkGroup选中的,计算
// 循环checkGroup,拿出价格*数量,累加,最后返回
var total = 0
for (item of this.checkGroup) {
total += item.number * item.price
}
return total
},
handleCheckAll() {
// console.log(this.checkAll)
// 全选中:对钩都打上,js中得含义是:checkGroup变量满值
if (this.checkAll) {
this.checkGroup = this.good_list // 全选
} else {
this.checkGroup = [] // 全不选
}
},
handleChangeOne() {
// 判断 checkGroup的长度,是否等于good_list长度
if (this.checkGroup.length == this.good_list.length) {
this.checkAll = true
} else {
this.checkAll = false
}
}
}
})
</script>
</html>
2.3加减数量版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<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 scope="row">{{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="good.number++">+</button>
</td>
<td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleChangeOne"></td>
</tr>
</tbody>
</table>
<hr>
选中了:{{checkGroup}}
<br>
{{checkAll}}
<h3>总价格:{{getPrice()}}</h3>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 2},
{id: 2, name: '脸盆', price: 20, number: 20},
{id: 3, name: '毛笔', price: 6, number: 9},
{id: 4, name: '圆珠笔', price: 8, number: 5},
{id: 5, name: '铅笔', price: 1, number: 3},
],
checkGroup: [],
checkAll: false
},
methods: {
getPrice() {
// 1 根据checkGroup选中的,计算
// 循环checkGroup,拿出价格*数量,累加,最后返回
var total = 0
for (item of this.checkGroup) {
total += item.number * item.price
}
return total
},
handleCheckAll() {
// console.log(this.checkAll)
// 全选中:对钩都打上,js中得含义是:checkGroup变量满值
if (this.checkAll) {
this.checkGroup = this.good_list // 全选
} else {
this.checkGroup = [] // 全不选
}
},
handleChangeOne() {
// 判断 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('太少了,不能再少了')
}
}
}
})
</script>
</html>
三、v-model进阶
v-model 之 lazy、number、trim
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>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>
</html>
四、与后端交互的三种方式
前后端要打通----》从前端发送ajax---》核心:使用js发送http请求,接收返回
-原生js,可以开启ajax,但是原生js开启,比较麻烦,需要做浏览器兼容,有坑(基本不写)
-jq,写了个兼容所有浏览器的 $.ajax(),不仅仅有ajax,还封装了很多dom操作
-如果vue中使用它,不合适
-axios:第三方的ajax包(咱们用)
-fetch: 原生js发送ajax请求,有的浏览器也不兼容
后端(flask):
pip3 install flask
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
print('来了,老弟')
# 前后端分离后,一定会出跨域---》后面要解决的重点
# 在响应头中加入:Access-Control-Allow-Origin ,就就可以解决跨域
res = jsonify({'name': '彭于晏', 'age': 19})
res.headers = {'Access-Control-Allow-Origin': '*'}
return res
if __name__ == '__main__':
app.run()
前端:
<body>
<div id="app">
<button @click="handleLoad">点我加载数据</button>
<hr>
<p>您的名字是:{{name}},您的年龄是:{{age}}</p>
</div>
</body>
使用jq的ajax:
handleLoad() {
// 请求发送成功,后端执行了,但是被浏览器拦截了,因为有跨域问题
// 当前地址,如果向非浏览器地址栏中得地址发送请求,就会出现跨域
// 1 ajax请求方式 1 jquery的ajax
var _this = this
$.ajax({
url: 'http://127.0.0.1:5000',
type: 'get',
success: function (data) {
console.log(typeof data)
var res = JSON.parse(data)
_this.name = res.name
_this.age = res.age
}
})
}
使用fetch
handleLoad() {
// 2 使用js原生的fetch(目前也不用)
// fetch('http://127.0.0.1:5000').then(function (response) {
// // console.log(response)
// return response.json();
// }).then(function (res) {
// console.log(res);
// });
// 了解,箭头函数一会讲
fetch('http://127.0.0.1:5000').then(res=>res.json()).then(res=>{
console.log(res)
})
}
使用axios(以后用这个)
handleLoad() {
var _this = this
axios.get('http://127.0.0.1:5000').then(function (res) {
console.log(res.data)
_this.name = res.data.name
_this.age = res.data.age
})
}
五、箭头函数
es6 的语法
1 函数写法变简单
2 箭头函数没有自己的this,在箭头函数中使用this,就是它上一层的文章来源:https://www.toymoban.com/news/detail-476806.html
示例:
箭头函数
<script>
1 无参数,无返回值
var f =function (){
console.log('我是匿名函数')
}
var f = () => {
console.log('我是匿名函数')
}
f()
2 有一个参数,没有返回值 ,可以省略括号
var f = function (name) {
console.log('我是匿名函数',name)
}
var f = name => {
console.log('我是匿名函数', name)
}
f('Lqz')
3多个参数,不能省略括号
var f = (name, age) => {
console.log('我是匿名函数', name, age)
}
f('Lqz', 19)
4多个参数,不能省略括号,一个返回值
var f = (name, age) => {
return name + 'nb'
}
</script>
到了这里,关于Vue基础第三篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!