2 v-model 之 lazy、number、trim
python
复制代码
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>
3 与后端交互
python
复制代码
# 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>
3.1 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>
3.2 原生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>
3.3 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>
4 小电影案例
4.1 后端
python
复制代码
from flask import Flask, jsonify
import json
app = Flask(__name__)
@app.route('/film', methods=['GET'])
def film():
with open('./film.json', 'rt', encoding='utf-8') as f:
res = json.load(f)
res=jsonify(res)
res.headers['Access-Control-Allow-Origin']='*'
return res
if __name__ == '__main__':
app.run()
4.2 前端
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
</head>
<body>
<div id="app">
<h1>点击显示小电影案例</h1>
<button @click="handleLoad">加载</button>
<div v-for="film in filmList">
<img :src="film.poster" alt="" height="200px" width="150px">
<div>
<h3>{{film.name}}</h3>
<p>主演：
<span v-for="item in film.actors">
{{item.name}}
</span>
</p>
<p>{{film.nation}}|{{film.runtime}}</p>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
filmList: []
},
methods: {
handleLoad() {
axios.get('http://127.0.0.1:5000/film').then(res => {
if (res.data.code == 100) {
this.filmList = res.data.results
} else {
alert(res.data.msg)
}
})
}
}
})
</script>
</html>