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

vue知识-03

news 2025/9/13 18:36:51

购物车案例

要实现的功能：

        1、计算商品总价格

        2、全选框和取消全选框

        3、商品数量的增加和减少

<body>
<div id="app"><div class="row"><div class="col-md-6 col-md-offset-3"><h1 class="text-center">购物车</h1><table class="table table-bordered table-info" ><thead><tr><th>商品id</th><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>全 选or不选<input type="checkbox" v-model="CheckAll" @change="handleCheckAll"></th></tr></thead><tbody><tr v-for="good in goodList"><th scope="row">{{good.id}}</th><td>{{good.name}}</td><td>{{good.price}}</td><td><span class="btn" @click="handleJian(good)">-</span><input type="text" v-model="good.count"><span class="btn" @click="handleAdd(good)">+</span></td><td><input type="checkbox" v-model="CheckGoodList" :value="good" @change="handleCheckOne"></td></tr></tbody></table><hr><h6>已选商品:{{CheckGoodList}}</h6><h6>是否全选:{{CheckAll}}</h6><h6>总价格:{{GetPrice()}}</h6></div></div>
</div>
</body>
<script>new Vue({el:'#app',data:{goodList:[{id:1,name:'iPhone 12',price:699,count: 2},{id:2,name:'iPhone 13',price:799,count: 2},{id:3,name:'iPhone 14',price:899,count: 2},{id:4,name:'iPhone 15',price:999,count: 2},{id:5,name:'iPhone 16',price:1099,count: 2},{id:6,name:'iPhone 17',price:1199,count: 2}],CheckGoodList:[],CheckAll: false},methods:{// 计算总价格GetPrice(){var total = 0for (var item of this.CheckGoodList){total += item.price * item.count}return total},//全选handleCheckAll(){if (this.CheckAll){//全选this.CheckGoodList = this.goodList} else {// 取消全选this.CheckGoodList = []}},//单选handleCheckOne(){if (this.CheckGoodList.length == this.goodList.length){this.CheckAll = true} else {this.CheckAll = false}},//商品数量减少handleJian(good){if (good.count > 1){good.count --}else {alert('不能再少了，受不了了')}},//商品数量增加handleAdd(good){good.count ++}}})
</script>

v-model之lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

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

与后端交互的类型

jq的 ajax：会引入了jq框架，好多功能用不到，不是很好
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});

axios：是第三方ajax，占内存小，底层还是基于XMLHttpRequest      

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

jq的ajax发送

<button @click="handleLoad">加载用户信息</button>methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 1 发送请求方式1 使用 jq的ajax$.ajax({url: 'http://127.0.0.1:5000/userinfo',method: 'get',success: data => {console.log(typeof data)  //查看数据类型data = JSON.parse(data)  //把字符串转换成对象this.username = data.username  //把数据赋值给data中的usernamethis.age = data.age}})}
}

js的fetch发送

<button @click="handleLoad">加载用户信息</button>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}})}
}

axios发送

<button @click="handleLoad">加载用户信息</button>methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 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);}})}
}

小电影案例

<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: [],name: 'zhoujiaqi'},methods: {handleLoad() {// 发起get请求axios.get('http://127.0.0.1:7000/app/film/film/').then(res => {// 判断请求是否成功if (res.data.code == 100) {// 将请求的数据赋值给filmListthis.filmList = res.data.results} else {// 请求失败，弹出提示框alert(res.data.msg)}})}}})
</script>
from rest_framework.viewsets import ViewSet
from rest_framework.decorators import action
import json
from django.http import JsonResponse# 小电影后端
# 定义一个Movie类，继承自ViewSet
class Movie(ViewSet):@action(methods=['get'], detail=False)def film(self,requset):with open('film.json', 'r', encoding='utf-8')as f:res = json.load(f)res = JsonResponse(res)     # 使用JsonResponse返回结果res.headers = {'Access-Control-Allow-Origin': '*'}   # 跨域return res

2、

今日思维导图：

相关文章：

vue知识-03

购物车案例 要实现的功能&#xff1a; 1、计算商品总价格 2、全选框和取消全选框 3、商品数量的增加和减少 <body> <div id"app"><div class"row"><div class"col-md-6 col-md-offset-3"><h1 class"text-center…...

编程日记 2024/1/12 4:52:36

关于httpClient 使用的注意事项

关于httpClient 使用的注意事项 用例 PoolingHttpClientConnectionManager connectionManager new PoolingHttpClientConnectionManager();// 最大连接数-不设置默认20connectionManager.setMaxTotal(200);// 每个路由最大连接数-不设置默认2connectionManager.setDefaultMax…...

编程日记 2024/1/12 4:49:32

Docker 发布自定义镜像到公共仓库

Docker 发布自定义镜像到公共仓库 引言 Docker 是一种轻量级、便携式的容器化技术&#xff0c;可以使应用程序在不同环境中更加可移植。在本文中&#xff0c;我们将学习如何使用 Docker 从公共仓库拉取 Nginx 镜像&#xff0c;定制该镜像&#xff0c;添加自定义配置文件&…...

编程日记 2024/1/12 4:48:31

程序员有哪些接单的渠道？

这题我会&#xff01;程序员接单的渠道那可太多了&#xff0c;想要接到合适的单子&#xff0c;筛选一个合适的平台很重要。如果你也在寻找一个合适的接单渠道&#xff0c;可以参考以下这些方向。 首先&#xff0c;程序员要对接单有一个基本的概念&#xff1a;接单渠道可以先粗略…...

编程日记 2024/1/12 4:47:30

服务容错-熔断策略之断路器hystrix-go

文章目录 概要一、服务熔断二、断路器模式三、hystrix-go3.1、使用3.2、源码 四、参考 概要 微服务先行者Martin Fowler与James Lewis在文章microservices中指出了微服务的九大特征&#xff0c;其中一个便是容错性设计(Design for failure)。正如文章中提到的&#xff0c;微服…...

编程日记 2024/1/12 4:46:29

C++进阶（三）多态

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、多态的概念1、概念 二、多态的定义及实现1、多态的构成条件2、虚函数3、虚函数的重写4、C…...

编程日记 2024/1/12 4:45:28

大众汽车宣布将ChatGPT，批量集成在多种汽车中！

1月9日&#xff0c;大众汽车在官网宣布&#xff0c;将ChatGPT批量集成到电动、内燃机汽车中。 大众表示&#xff0c;将ChatGPT与其IDA语音助手相结合&#xff0c;用户通过自然语言就能与ChatGPT进行互动&#xff0c;例如&#xff0c;帮我看看最近的三星米其林饭店在哪里&#…...

编程日记 2024/1/12 4:42:23

React----函数组件和类组件

函数组件与类组件&#xff1a;React 中的两种组件风格 React 是一个用于构建用户界面的流行 JavaScript 库&#xff0c;其中组件是构建块的基本单元。在 React 中&#xff0c;有两种主要的组件风格&#xff1a;函数组件和类组件。本文将使用TypeScript介绍它们的用法、区别以及…...

编程日记 2024/1/12 4:40:22

Kafka集群部署 (KRaft模式集群)

KRaft 模式是 Kafka 在 3.0 版本中引入的新模式。KRaft 模式使用了 Raft 共识算法来管理 Kafka 集群元数据。Raft 算法是一种分布式共识算法&#xff0c;具有高可用性、可扩展性和安全性等优势。 在 KRaft 模式下&#xff0c;Kafka 集群中的每个 Broker 都具有和 Zookeeper 类…...

编程日记 2024/1/12 4:39:20

Vue 自定义仿word表单录入之日期输入组件

因项目需要&#xff0c;要实现仿word方式录入数据&#xff0c;要实现鼠标经过时才显示编辑组件&#xff0c;预览及离开后则显示具体的文字。 鼠标经过时显示 正常显示及离开时显示 组件代码 <template ><div class"paper-input flex flex-col border-box "…...

编程日记 2024/1/12 4:37:18

Oracle与Java JDBC数据类型对照

Oracle Database JDBC开发人员指南和参考 SQL Data TypesJDBC Type CodesStandard Java TypesOracle Extension Java Types CHAR java.sql.Types.CHAR java.lang.String oracle.sql.CHAR VARCHAR2 java.sql.Types.VARCHAR java.lang.String oracle.sql.CHAR LONG jav…...

编程日记 2024/1/12 4:36:18

C++力扣题目226--翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,1]示例 3&#x…...

编程日记 2024/1/12 4:35:16

Gorm 数据库表迁移与表模型定义

文章目录 一、Docker快速创建MySQL实例1.1 创建1.3 创建数据库 二、AutoMigrate介绍与使用2.1 AutoMigrate介绍2.2 AutoMigrate 基本使用 三、模型定义3.1 模型定义3.2 快速增删改查3.3 约定3.4 gorm.Model 四、表模型主键、表名、列名的约定4.1 主键&#xff08;Primary Key&a…...

编程日记 2024/1/12 4:34:15

系列三、Spring Security中自定义用户名/密码

一、Spring Security中自定义用户名/密码 1.1、自定义用户名/密码 1.1.1、配置文件中配置 spring.security.user.nameroot spring.security.user.password123456 1.1.2、定义基于内存的用户 /*** Author : 一叶浮萍归大海* Date: 2024/1/11 21:50* Description:*/ Configu…...

编程日记 2024/1/12 4:32:12

如何顺滑使用华为云编译构建平台？

这两年平台构建服务需求越来越大&#xff0c;却一直苦于找不到一些指南&#xff0c; 这里特意写了一篇&#xff0c; 对在学习代码阶段和新手程序员朋友也蛮友好&#xff0c; 配置真的也不难&#xff0c; 也特别适合想尝试从0到1做个APP的朋友了。 以华为云的CodeArts Build为例…...

编程日记 2024/1/12 4:31:10

查看Linux磁盘空间

(1)、该命令会列出当前系统所有挂载的文件系统以及它们的使用情况&#xff0c;包括总容量、已用空间、可用空间、使用百分比等信息 df -h如果查看某一个文件夹的,可以 df -h folderName (2)、计算指定目录下所有文件和子目录所占用的磁盘空间大小&#xff0c;并以人类可读的格…...

编程日记 2024/1/12 4:29:08

2023年全国职业院校技能大赛（高职组）“云计算应用”赛项赛卷⑩

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷10 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷10 模块…...

编程日记 2024/1/12 4:25:01

vim基本操作命令

一、vi简介 vi是“Visual interface”的简称&#xff0c;它在Linux上的地位就仿佛Edit程序在DOS上一样。它可以执行输出、删除、查找、替换、块操作等众多文本操作&#xff0c;而且用户可以根据自己的需要对其进行定制。Vi不是一个排版程序&#xff0c;它不象Word或WPS那样可以…...

编程日记 2024/1/12 4:21:59

mybatis-plus实现真正的批量插入

1、安装依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-extension</artifactId><version>3.5.3.2</version></dependency>版本与mybatis-plus一致 2、编写sql注入器 package com.example.answe…...

编程日记 2024/1/12 4:14:52

pytorch12：GPU加速模型训练

目录 1、CPU与GPU2、数据迁移至GPU2.1 to函数使用方法 3、torch.cuda常用方法4、多GPU并行运算4.1 torch.nn.DataParallel4.2 torch.distributed加速并行训练 5、gpu总结 1、CPU与GPU CPU&#xff08;Central Processing Unit, 中央处理器&#xff09;&#xff1a;主要包括控制…...

编程日记 2024/1/12 4:11:50

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/9/10 12:16:22

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/9/6 20:28:13

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/9/13 17:48:42

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/5 21:48:13

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/8/29 10:31:59

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/7/23 19:14:14

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/9/7 8:51:50

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/9/12 21:09:32