当前位置： 首页 > news >正文

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

news 2025/12/31 22:55:09

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>

相关文章：

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

2 v-model 之 lazy、number、trim lazy&#xff1a;等待input框的数据绑定时区焦点之后再变化 number&#xff1a;数字开头&#xff0c;只保留数字&#xff0c;后面的字母不保留&#xff1b;字母开头&#xff0c;都保留 trim&#xff1a;去除首位的空格<!DOCTYPE html> …...

编程日记 2024/8/13 12:44:06

ECCV 2024 | 南洋理工三维数字人生成新范式：结构扩散模型

该论文作者均来自于新加坡南洋理工大学 S-Lab 团队&#xff0c;包括博士后胡涛&#xff0c;博士生洪方舟&#xff0c;以及计算与数据学院刘子纬教授&#xff08;《麻省理工科技评论》亚太地区 35 岁以下创新者&#xff09;。S-Lab 近年来在顶级会议如 CVPR, ICCV, ECCV, NeurIP…...

编程日记 2024/8/13 12:42:04

2024.8.13-算法学习(原创+转载)

一、什么是张量并行&#xff08;Tensor Parallelism&#xff09; &#xff1f; 张量并行&#xff08;Tensor Parallelism&#xff09; 是一种分布式矩阵算法。 随着模型越来越大&#xff0c;模型内的矩阵也越来越大。一个大矩阵的乘法可以拆分成多个小矩阵的运算&#xff0c;…...

编程日记 2024/8/13 12:41:03

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…...

编程日记 2024/8/13 12:40:01

【Python】Jupyter Notebook的安装及简单使用

Jupyter Notebook的安装及简单使用1、安装2、language设置为中文3、Jupyter Notebook启动4、Jupyter Notebook的常用快捷方式5、将Notebook笔记转为其他文件格式保存 Jupyter Notebook的安装及简单使用 不安装AnaCoda&#xff0c;但需要使用Jupyter Notebook 1、安装 pip inst…...

编程日记 2024/8/13 12:37:58

中国自动驾驶出租车冲击网约车市场

近年来&#xff0c;中国的自动驾驶技术迅速发展&#xff0c;对传统网约车市场构成了越来越大的冲击。随着科技巨头百度旗下的萝卜快跑等公司加速推广无人驾驶出租车&#xff0c;这一趋势引发了广泛的讨论和担忧。 自动驾驶技术的迅猛发展 中国自动驾驶行业正处于快速发展阶段&…...

编程日记 2024/8/13 12:36:56

解决浏览器书签同步问题，极空间部署开源免费的跨平台书签同步工具『xBrowserSync』

解决浏览器书签同步问题&#xff0c;极空间部署开源免费的跨平台书签同步工具『xBrowserSync』 哈喽小伙伴们好&#xff0c;我是Stark-C~ 作为一个喜欢折腾的数码党&#xff0c;我平时上网冲浪使用的浏览器绝不会只限于一种&#xff0c;就比如说我在上班的地方只会用到Edge浏…...

编程日记 2024/8/13 12:35:55

14个SpringBoot优化小妙招

今天我们来分享一下平时用SpringBoot开发时候的一些优化小妙招&#xff0c;用好这些优化小妙招让我们开发的系统架构、系统代码、开发流程、测试流程、运维监控看起来就跟写诗一样优雅&#xff0c;让我们每个人手头负责的代码和工程都要很漂亮~~~ 这里的优化小妙招很多不是说直…...

编程日记 2024/8/13 12:33:53

Elasticsearch 度量（Metric）聚合详解及示例

Elasticsearch 提供了强大的聚合功能&#xff0c;允许用户对数据进行深入的统计分析。度量&#xff08;Metric&#xff09;聚合是其中一种&#xff0c;它用于对数值型数据进行计算&#xff0c;如求和、平均值、最大值、最小值等。本文将详细介绍 Elasticsearch 的度量聚合&…...

编程日记 2024/8/13 12:32:47

基于 jsp 的健身俱乐部会员系统设计与实现

点击下载源码 基于 jsp 的健身俱乐部会员系统设计与实现 摘 要 目前我国虽然己经开发出了应用计算机操作的健身俱乐部管理系统&#xff0c;但管理软件&#xff0c;管理方法和管理思想三者往往相脱节。造成我国健身俱乐部信息管理系统极端化的缺陷。在国外健身俱乐部已经有了一…...

编程日记 2024/8/13 12:31:46

苍穹外卖项目DAY01

苍穹外卖项目Day01 1、软件开发整体介绍 1.1、软件开发流程 1.2、角色分工 项目经理&#xff1a;对整个项目负责&#xff0c;任务分配、把控进度产品经理&#xff1a;进行需求调研&#xff0c;输出需求调研文档、产品原型等UI设计师&#xff1a;根据产品原型输出界面效果图架…...

编程日记 2024/8/13 12:30:44

SpringBoot(Ⅰ)——HelloWorld和基本打包部署+Pom依赖概述+@SpringBootApplication注解+自动装配原理+约定大于配置

前言 如果SSM学的比较好&#xff0c;那么SpringBoot说白了就两件事:约定大于配置和自动装配 SpringBoot不会提供任何的功能拓展&#xff0c;完全依赖我们手动添加 所以SpringBoot的本质是一个依赖脚手架&#xff0c;可以快速集成配置各种依赖 1.1 SpringBoot相关依赖 创建…...

编程日记 2024/8/13 12:29:43

[Unity]关闭URP的SRP，开启GPU Instancing。

1. 对应材质的gpu instancing勾选上。 2. 游戏初始化时动态关闭SRP&#xff0c;或者在Graphics里全局关闭。动态关闭的代码如下&#xff1a; GraphicsSettings.useScriptableRenderPipelineBatching false; 模型合批的一些规则&#xff1a; 1. 模型一致。 2. 材质一致。 …...

编程日记 2024/8/13 12:27:40

04创建型设计模式——建造者模式

一、建造者模式简介 建造者模式&#xff08;Builder Pattern&#xff09;又被称为生成器模式。它旨在构建一个复杂对象的各个部分&#xff0c;而不需要指定该对象的具体类。该模式特别适用于对象的构建过程复杂且需要多个步骤的情况。建造者模式是一种对象创建型模式之一&…...

编程日记 2024/8/13 12:26:39

前端开发中的代码规范

引言 在前端开发中&#xff0c;遵循良好的代码规范是非常重要的。这不仅能提高代码的可读性和可维护性&#xff0c;还能帮助团队成员更好地协作。本文将介绍一些前端开发中常用的代码规范&#xff0c;并探讨它们的重要性。 1. 代码规范的重要性 1.1 可读性 良好的代码规范可…...

编程日记 2024/8/13 12:25:38

WHAT - 远程控制机制

目录 1. 客户端-服务器架构2. 连接建立3. 数据传输4. 通信协议5. 安全性6. 远程控制软件示例7. 操作流程示例 远程控制别人的电脑涉及到技术和安全多个方面。其基本机制通常包括以下几个方面&#xff1a; 1. 客户端-服务器架构 远程控制软件通常采用客户端-服务器架构&#x…...

编程日记 2024/8/13 12:24:37

苹果手机录音功能在哪里？3招轻松打开手机录音

无论是记录重要的会议内容、捕捉生活中的美好瞬间&#xff0c;还是进行语言学习&#xff0c;苹果手机的录音功能都能提供极大的便利。那么&#xff0c;苹果手机录音功能在哪里呢&#xff1f;本文将为您揭示苹果手机录音功能的藏身之处&#xff0c;并通过3个简单步骤&#xff0c…...

编程日记 2024/8/13 12:23:36

RCE之突破长度限制

我们在写webshell时通常会遇到过滤&#xff0c;但除了过滤之外还可能会有长度限制&#xff0c;这里就简单说一下关于RCE突破长度限制的技巧 突破16位 例如&#xff1a;PHP Eval函数参数限制在16个字符的情况下 &#xff0c;如何拿到Webshell&#xff1f; <?php $param …...

编程日记 2024/8/13 12:22:35

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 …...

编程日记 2024/8/13 12:19:32

LangChain与Elasticsearch向量数据库的完美结合

在过去的一年中&#xff0c;生成式 AI (Generative AI) 领域取得了显著的进展。许多新的服务和工具应运而生。其中&#xff0c;LangChain 已成为构建大语言模型 (LLM) 应用程序&#xff08;例如检索增强生成 (RAG) 系统&#xff09;最受欢迎的框架之一。该框架极大地简化了原型…...

编程日记 2024/8/13 12:18:31

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/12/30 19:40:49

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/12/16 3:23:56

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/12/25 1:27:31

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/12/30 20:08:57

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/12/31 14:27:30

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

Appium下载安装配置保姆教程（图文详解）

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

编程新知 2025/12/30 3:06:12