【vue讲解：v-model 之 lazy、number、trim、与后端交互、小电影案例】
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}} </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>
相关文章：
【vue讲解：v-model 之 lazy、number、trim、与后端交互、小电影案例】
2 v-model 之 lazy、number、trim lazy：等待input框的数据绑定时区焦点之后再变化 number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留 trim：去除首位的空格<!DOCTYPE html> …...
ECCV 2024 | 南洋理工三维数字人生成新范式：结构扩散模型
该论文作者均来自于新加坡南洋理工大学 S-Lab 团队，包括博士后胡涛，博士生洪方舟，以及计算与数据学院刘子纬教授（《麻省理工科技评论》亚太地区 35 岁以下创新者）。S-Lab 近年来在顶级会议如 CVPR, ICCV, ECCV, NeurIP…...
2024.8.13-算法学习(原创+转载)
一、什么是张量并行（Tensor Parallelism） ？ 张量并行（Tensor Parallelism） 是一种分布式矩阵算法。 随着模型越来越大，模型内的矩阵也越来越大。一个大矩阵的乘法可以拆分成多个小矩阵的运算，…...
beautifulsoup的简单使用
文章目录 beautifulsoup一. beautifulsoup的简单使用1、安装2、如何使用3、对象的种类 二、beautifulsoup的遍历文档树2.1 子节点.contents 和 .children descendants2.2 节点内容.string.text 2.3 多个内容.strings**.stripped_strings** 2.4 父节点.parent.parents 三、beaut…...
【Python】Jupyter Notebook的安装及简单使用
Jupyter Notebook的安装及简单使用1、安装2、language设置为中文3、Jupyter Notebook启动4、Jupyter Notebook的常用快捷方式5、将Notebook笔记转为其他文件格式保存 Jupyter Notebook的安装及简单使用 不安装AnaCoda，但需要使用Jupyter Notebook 1、安装 pip inst…...
中国自动驾驶出租车冲击网约车市场
近年来，中国的自动驾驶技术迅速发展，对传统网约车市场构成了越来越大的冲击。随着科技巨头百度旗下的萝卜快跑等公司加速推广无人驾驶出租车，这一趋势引发了广泛的讨论和担忧。 自动驾驶技术的迅猛发展 中国自动驾驶行业正处于快速发展阶段&…...
解决浏览器书签同步问题，极空间部署开源免费的跨平台书签同步工具『xBrowserSync』
解决浏览器书签同步问题，极空间部署开源免费的跨平台书签同步工具『xBrowserSync』 哈喽小伙伴们好，我是Stark-C~ 作为一个喜欢折腾的数码党，我平时上网冲浪使用的浏览器绝不会只限于一种，就比如说我在上班的地方只会用到Edge浏…...
14个SpringBoot优化小妙招
今天我们来分享一下平时用SpringBoot开发时候的一些优化小妙招，用好这些优化小妙招让我们开发的系统架构、系统代码、开发流程、测试流程、运维监控看起来就跟写诗一样优雅，让我们每个人手头负责的代码和工程都要很漂亮~~~ 这里的优化小妙招很多不是说直…...
Elasticsearch 度量（Metric）聚合详解及示例
Elasticsearch 提供了强大的聚合功能，允许用户对数据进行深入的统计分析。度量（Metric）聚合是其中一种，它用于对数值型数据进行计算，如求和、平均值、最大值、最小值等。本文将详细介绍 Elasticsearch 的度量聚合&…...
基于 jsp 的健身俱乐部会员系统设计与实现
点击下载源码 基于 jsp 的健身俱乐部会员系统设计与实现 摘 要 目前我国虽然己经开发出了应用计算机操作的健身俱乐部管理系统，但管理软件，管理方法和管理思想三者往往相脱节。造成我国健身俱乐部信息管理系统极端化的缺陷。在国外健身俱乐部已经有了一…...
苍穹外卖项目DAY01
苍穹外卖项目Day01 1、软件开发整体介绍 1.1、软件开发流程 1.2、角色分工 项目经理：对整个项目负责，任务分配、把控进度产品经理：进行需求调研，输出需求调研文档、产品原型等UI设计师：根据产品原型输出界面效果图架…...
SpringBoot(Ⅰ)——HelloWorld和基本打包部署+Pom依赖概述+@SpringBootApplication注解+自动装配原理+约定大于配置
前言 如果SSM学的比较好，那么SpringBoot说白了就两件事:约定大于配置和自动装配 SpringBoot不会提供任何的功能拓展，完全依赖我们手动添加 所以SpringBoot的本质是一个依赖脚手架，可以快速集成配置各种依赖 1.1 SpringBoot相关依赖 创建…...
[Unity]关闭URP的SRP，开启GPU Instancing。
1. 对应材质的gpu instancing勾选上。 2. 游戏初始化时动态关闭SRP，或者在Graphics里全局关闭。动态关闭的代码如下： GraphicsSettings.useScriptableRenderPipelineBatching false; 模型合批的一些规则： 1. 模型一致。 2. 材质一致。 …...
04创建型设计模式——建造者模式
一、建造者模式简介 建造者模式（Builder Pattern）又被称为生成器模式。它旨在构建一个复杂对象的各个部分，而不需要指定该对象的具体类。该模式特别适用于对象的构建过程复杂且需要多个步骤的情况。建造者模式是一种对象创建型模式之一&…...
前端开发中的代码规范
引言 在前端开发中，遵循良好的代码规范是非常重要的。这不仅能提高代码的可读性和可维护性，还能帮助团队成员更好地协作。本文将介绍一些前端开发中常用的代码规范，并探讨它们的重要性。 1. 代码规范的重要性 1.1 可读性 良好的代码规范可…...
WHAT - 远程控制机制
目录 1. 客户端-服务器架构2. 连接建立3. 数据传输4. 通信协议5. 安全性6. 远程控制软件示例7. 操作流程示例 远程控制别人的电脑涉及到技术和安全多个方面。其基本机制通常包括以下几个方面： 1. 客户端-服务器架构 远程控制软件通常采用客户端-服务器架构&#x…...
苹果手机录音功能在哪里？3招轻松打开手机录音
无论是记录重要的会议内容、捕捉生活中的美好瞬间，还是进行语言学习，苹果手机的录音功能都能提供极大的便利。那么，苹果手机录音功能在哪里呢？本文将为您揭示苹果手机录音功能的藏身之处，并通过3个简单步骤，…...
RCE之突破长度限制
我们在写webshell时通常会遇到过滤，但除了过滤之外还可能会有长度限制，这里就简单说一下关于RCE突破长度限制的技巧 突破16位 例如：PHP Eval函数参数限制在16个字符的情况下 ，如何拿到Webshell？ <?php $param …...
Arduino控制带编码器的直流电机速度
Arduino DC Motor Speed Control with Encoder, Arduino DC Motor Encoder 作者 How to control dc motor with encoder:DC Motor with Encoder Arduino, Circuit Diagram:Driving the Motor with Encoder and Arduino:Control DC motor using Encoder feedback loop: How …...
LangChain与Elasticsearch向量数据库的完美结合
在过去的一年中，生成式 AI (Generative AI) 领域取得了显著的进展。许多新的服务和工具应运而生。其中，LangChain 已成为构建大语言模型 (LLM) 应用程序（例如检索增强生成 (RAG) 系统）最受欢迎的框架之一。该框架极大地简化了原型…...
element时间段选择器或时间选择器 只设置默认起始时间或者结束时间，不显示问题
element时间段选择器或时间选择器 只设置默认起始时间或者结束时间，不显示问题 <div v-for"(item,index) in [a,b]":key"item"><el-date-pickerv-if"b"v-model"value1[item]"type"datetimerange"value-…...
Vue 3 中，组件间传值有多种方式
在 Vue 3 中，组件间传值有多种方式，以下是几种常见的方式 父组件向子组件传值（通过 props）：以下是几个父组件向子组件传值的示例：示例 1：传递字符串示例 2：传递数字示例 3࿱…...
前置(3):npm 和npx异同点
npm（Node Package Manager）和npx（Node Package Execute）是两个密切相关但用途不同的命令行工具，它们都是Node.js生态系统中的重要组成部分。 npm 用途：npm是Node.js的包管理器，主要用于安装、…...
笔记(day17)集合概述、List、Set、比较器
集合Collection 一.概述 集合可以理解为数据结构的封装,根据不同的特性及操作性能进行分类 二.继承体系 三.Collection中常用方法 collection是集合中的父类,所以collection中的方法是所有集合中都有的 集合中只能保存引用类型(Object),无法保存基本类型 Colle…...
C语言从头学45——I/O函数（二）
本文继续学习I/O函数，并延续前文的编号。 (三)、sscanf() 函数 sscanf() 函数与scanf() 有些相似，不同之处sscanf() 是从已有的字符串里面获取数据；这个函数也是定义在stdio.h中。 功能：处理已经输入到计算机中的字…...
Python爬虫——爬取bilibili中的视频
爬取bilibili中的视频 本次爬取，还是运用的是requests方法 首先进入bilibili官网中，选取你想要爬取的视频，进入视频播放页面，按F12，将网络中的名称栏向上拉找到第一个并点击，可以在标头中，找到…...
为什么企业电销要用外呼系统
电销要使用外呼系统的原因主要有以下几点： 一、提升工作效率 * **自动拨号**：外呼系统能够自动拨打客户电话，减少电销人员手动拨号的时间，让他们将更多精力集中在与客户的沟通和交流上。 * **数据记录与管理**：系统能…...
Keepalived + Nginx 主备容灾方案介绍
Keepalived Nginx 主备容灾方案介绍 *服务器**IP地址**角色*Srv01192.168.249.100 VIP: 192.168.249.110NginxKeepaliveSrv02192.168.249.101NginxKeepalive 概述 Keepalived 和 Nginx 的组合是一个常见的高可用性（HA）方案，尤其适用于 Web…...
PHP、JavaScript代码审计工具
软件截图 1. GPT代码审计需要挂代理，和充值才可以使用 2. 全局搜索关键字 3. 危险函数搜索 4. 自动化代码审计 报告 下载地址 GitHub - yuag/Code-audit: 代码审计代码审计. Contribute to yuag/Code-audit development by creating an account on GitHub....
《向量数据库指南》——Ray Data+Anyscale解锁价值评估新篇章
在钧瓷这一古老而深邃的艺术领域中，每一位资深藏家与投资人都深知，随着市场的不断发展与扩大，信息的处理与分析能力对于精准判断、高效收藏与投资决策至关重要。尤其是当我们面对庞大的钧瓷数据库、复杂的交易记录、以及不断更新的市场趋势时，传统的数据处理方式往往显得力…...