【vue讲解：v-model 之 lazy、number、trim、与后端交互、小电影案例】

server/2024/10/18 23:23:45/

2 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>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 与后端交互

# 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，没有别的，小--》底层还是基于XMLHttpRequest<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

3.1 jq发送

<!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-Originconsole.log(typeof data)data = JSON.parse(data)this.username = data.usernamethis.age = data.age}})}}})
</script>
</html>

3.2 原生js

<!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.usernamethis.age = data.age});}}})
</script>
</html>

3.3 axios

<!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.datathis.username = res.data.usernamethis.age = res.data.age}).catch(error => {console.log(error);});}}})
</script>
</html>

4 小电影案例

4.1 后端

from flask import Flask, jsonify
import jsonapp = 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 resif __name__ == '__main__':app.run()

4.2 前端

<!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}} &nbsp;&nbsp;</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>

http://www.ppmy.cn/server/100966.html

相关文章

Golang Plugin 探索：动态加载的艺术

Golang Plugin 探索：动态加载的艺术

标题&#xff1a;“Golang Plugin 探索&#xff1a;动态加载的艺术” 引言 Go语言以其简洁和高效著称&#xff0c;而从1.8版本开始引入的plugin包&#xff0c;为Go程序带来了前所未有的灵活性。通过plugin包&#xff0c;开发者可以在运行时动态加载和使用编译好的插件&#x…
阅读更多...
CentOS迁移案例 | 保障轨道交通安全、发挥基础设施效能，麒麟信安操作系统支撑某市轨道交通畅行无忧

CentOS迁移案例 | 保障轨道交通安全、发挥基础设施效能，麒麟信安操作系统支撑某市轨道交通畅行无忧

为缓解城市交通拥堵难题&#xff0c;某市轨道交通公司计划新建一条贯穿城市关键区域、沿路设立20座站点的轨道交通线路&#xff0c;并基于麒麟信安操作系统构建轨道交通信号系统。 轨道交通信号系统是列车核心控制系统&#xff0c;负责列车运行的自动化控制&#xff0c;及对整…
阅读更多...
MacOS上安装 Java

MacOS上安装 Java

1.下载 oracle官网jdk下载地址 注意一下区分mac芯片版本&#xff0c;M1芯片选择Arm 64&#xff0c;Intel芯片选择x64 2.安装 傻瓜式安装&#xff0c;下载好后直接双击打开,一直下一步安装即可 3.查看安装路径 可通过以下命令查看安装路径(复制此输出路径&#xff0c;为后续…
阅读更多...
搭建内网开发环境（一）｜基于docker快速部署开发环境

搭建内网开发环境（一）｜基于docker快速部署开发环境

引言 最近因需要搭建一套简易版的纯内网的开发环境&#xff0c;服务器采用 centos8.0&#xff0c;容器化技术采用 docker 使用 docker-compose 进行容器编排。 该系列教程分为两大类&#xff1a; 软件安装和使用&#xff0c;这类是开发环境常用的软件部署和使用&#xff0c;涉…
阅读更多...
CSS——动画（animation）

CSS——动画（animation）

一、过渡&#xff08;transition&#xff09; 1、通过过渡可以指定一个属性发生变化时的切换方式 2、通过过渡可以创建一些非常好的效果&#xff0c;提升用户体验 3、常用属性值 ① transition-property 指定要执行过渡的属性 多个属性间使用&#xff0c;隔开如果所有…
阅读更多...
删除数据后降低表空的水位线

删除数据后降低表空的水位线

问题&#xff1a;有张表占用了大量表空间&#xff0c;而且文件系统也没有多少空间了&#xff0c;想到此数据可以清理&#xff0c;就想truncate这张表&#xff0c;然后想把表空缩一下&#xff0c;腾点空间给文件系统&#xff0c;结果缩表空失败。怎么办&#xff0c;上网找到了可…
阅读更多...
【python】Python如何调用外部命令，subprocess模块的详细解读以及应用实战

【python】Python如何调用外部命令，subprocess模块的详细解读以及应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
24/8/15算法笔记 复习_决策树

24/8/15算法笔记 复习_决策树

#手动计算决策树到底是如何实现分类的 p1 (y N).mean() p2 (y Y).mean()p1 * np.log2(1/p1) p2*np.log2(1/p2)X[真实用户] y x X[日志密度].unique()#.unique() 是一个方法&#xff0c;它返回一个数组&#xff0c;包含 X[日志密度] 列中所有不同的值。 x.sort()#排序 print…
阅读更多...
最新文章

Copyright @ 2022~2023