购物车案例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>购物车</h1>
<table>
<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="goods in goodsList">
<th>{{goods.id}}</th>
<td>{{goods.name}}</td>
<td>{{goods.price}}</td>
<td>
<span @click="handleJian(goods)">-</span>
<input type="text" v-model="goods.count">
<span @click="handleAdd(goods)">+</span>
</td>
<td>
<input type="checkbox" v-model="checkGoodList" :value="goods" @change="handleCheckOne">
</td>
</tr>
</tbody>
</table>
<h3>选中的商品：{{checkGoodList}}</h3>
<h3>是否全选：{{checkAll}}</h3>
<h3> 总价格：{{getPrice()}}</h3>
</div>
</body>
<script>
new Vue({
el:'#d1',
data:{
goodsList: [
{id: 1, name: '短袖', price: 99, count: 2},
{id: 2, name: '短裤', price: 39, count: 1},
{id: 3, name: '短裙', price: 189, count: 6},
{id: 4, name: '短袜', price: 8, count: 8},
{id: 5, name: '长筒袜', price: 4, count: 88},
{id: 6, name: '过膝袜', price: 5, count: 90},
],
checkGoodList:[],
checkAll:false
},
methods:{
getPrice(){
var total=0
for (var item of this.checkGoodList){
total+=item.price * item.count
}
return total
},
handleCheckAll(){
if (this.checkAll){
this.checkGoodList=this.goodsList
}else {
this.checkGoodList = []
}
},
handleCheckOne(){
if (this.checkGoodList.length==this.goodsList.length){
this.checkAll=true
}else {
this.checkAll=false
}
},
handleAdd(goods) {
goods.count++
},
handleJian(goods) {
if (goods.count > 1) {
goods.count--
} else {
alert('宝贝不能再少了')
}
}
}
})
</script>
</html>v-model 之 lazy、number、trim
lazy：等待input框的数据绑定失去焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格
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>input 和v-model</h1>
<input type="text" v-model="name">
<h1>v-model修饰符：lazy、number、trim</h1>
<input type="text" v-model.lazy="s1">--->{{s1}}
<br>
<input type="text" v-model.number="s2">--->{{s2}}
<br>
<input type="text" v-model.trim="s3">--->{{s3}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '彭于晏',
s1: '',
s2: '',
s3: '',
},
})
</script>
</html>与后端交互
1 使用jq的ajax ===》不好---》引入了jq框架，好多功能用不到
2 原生js fetch
提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分
fetch('http://127.0.0.1:5000/userinfo')
.then(response => {
return response.json();
}).then(data => {
this.username = data.username
this.age = data.age
});
3 axios 第三方ajax，只有ajax，没有别的，小--》底层还是基于XMLHttpRequest
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
jq发送
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
<h1>与后端交互</h1>
<button @click="handleLoad">加载用户信息</button>
<p>用户名：{{username}}</p>
<p>年龄：{{age}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
age: ''
},
methods: {
handleLoad() {
// 后端发送请求，拿到数据，赋值给 username和age 页面就有了
// 1 发送请求方式1 使用 jq的ajax
$.ajax({
url: 'http://127.0.0.1:5000/userinfo',
method: 'get',
success: data => {
// CORS policy 跨域问题---》解决---》后端响应头中加入：Access-Control-Allow-Origin
console.log(typeof data)
data = JSON.parse(data)
this.username = data.username
this.age = data.age
}
})
}
}
})
</script>
</html>原生js
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
<h1>与后端交互</h1>
<button @click="handleLoad">加载用户信息</button>
<p>用户名：{{username}}</p>
<p>年龄：{{age}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
age: ''
},
methods: {
handleLoad() {
// 后端发送请求，拿到数据，赋值给 username和age 页面就有了
// 1 原生fetch发送请求
fetch('http://127.0.0.1:5000/userinfo')
.then(response => {
return response.json();
}).then(data => {
this.username = data.username
this.age = data.age
});
}
}
})
</script>
</html>axios
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>与后端交互</h1>
<button @click="handleLoad">加载用户信息</button>
<p>用户名：{{username}}</p>
<p>年龄：{{age}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
age: ''
},
methods: {
handleLoad() {
// 后端发送请求，拿到数据，赋值给 username和age 页面就有了
// 1 axios发送请求
axios.get('http://127.0.0.1:5000/userinfo')
.then(res => {
console.log(res.data); //真正的响应体的数据在res.data
this.username = res.data.username
this.age = res.data.age
})
.catch(error => {
console.log(error);
});
}
}
})
</script>
</html>