什么网站可以免费做找客户,做seo网站优化价格,什么语言开发网站,购买网站域名 空间2 v-model 之 lazy、number、trim
lazy#xff1a;等待input框的数据绑定时区焦点之后再变化
number#xff1a;数字开头#xff0c;只保留数字#xff0c;后面的字母不保留#xff1b;字母开头#xff0c;都保留
trim#xff1a;去除首位的空格!DOCTYPE html
…2 v-model 之 lazy、number、trim
lazy等待input框的数据绑定时区焦点之后再变化
number数字开头只保留数字后面的字母不保留字母开头都保留
trim去除首位的空格!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1input 和v-model/h1input typetext v-modelnameh1v-model修饰符lazy、number、trim/h1input typetext v-model.lazys1---{{s1}}brinput typetext v-model.numbers2---{{s2}}brinput typetext v-model.trims3---{{s3}}/div
/body
scriptvar vm new Vue({el: #app,data: {name: 彭于晏,s1: ,s2: ,s3: ,},})
/script
/html3 与后端交互
# 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.usernamethis.age data.age});
# 3 axios 第三方ajax只有ajax没有别的小--》底层还是基于XMLHttpRequestscript srchttps://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js/script3.1 jq发送
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptscript src./js/jq.js/script
/head
body
div idapph1与后端交互/h1button clickhandleLoad加载用户信息/buttonp用户名{{username}}/pp年龄{{age}}/p/div
/body
scriptvar 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-Originconsole.log(typeof data)data JSON.parse(data)this.username data.usernamethis.age data.age}})}}})
/script
/html3.2 原生js
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptscript src./js/jq.js/script
/head
body
div idapph1与后端交互/h1button clickhandleLoad加载用户信息/buttonp用户名{{username}}/pp年龄{{age}}/p/div
/body
scriptvar 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.usernamethis.age data.age});}}})
/script
/html3.3 axios
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/script/head
body
div idapph1与后端交互/h1button clickhandleLoad加载用户信息/buttonp用户名{{username}}/pp年龄{{age}}/p/div
/body
scriptvar 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.datathis.username res.data.usernamethis.age res.data.age}).catch(error {console.log(error);});}}})
/script
/html4 小电影案例
4.1 后端
from flask import Flask, jsonify
import jsonapp Flask(__name__)app.route(/film, methods[GET])
def film():with open(./film.json, rt, encodingutf-8) as f:res json.load(f)resjsonify(res)res.headers[Access-Control-Allow-Origin]*return resif __name__ __main__:app.run()
4.2 前端
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptscript src./js/axios.js/script/head
body
div idapph1点击显示小电影案例/h1button clickhandleLoad加载/buttondiv v-forfilm in filmListimg :srcfilm.poster alt height200px width150pxdivh3{{film.name}}/h3p主演span v-foritem in film.actors{{item.name}} nbsp;nbsp;/span/pp{{film.nation}}|{{film.runtime}}/p/div/div/div
/body
scriptvar 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
