Vue 学习笔记 总结

news2024/11/17 10:02:40

Vue.js 教程 | 菜鸟教程 (runoob.com)

放一下课上的内容

image-20240528104918188

image-20240528105021354

image-20240528105143887

image-20240528105159301

image-20240528105212331

image-20240528105317403

image-20240528105351815

image-20240528105423246

image-20240528105535954

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240528105612665

image-20240528105839263

image-20240528112313004

image-20240528112327892

image-20240528112654179

image-20240528112716686

image-20240528113015008

image-20240528115449280

image-20240528115458389

image-20240528115508930

image-20240602200811076

image-20240602200820916

image-20240602200831100

image-20240602200840141

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602200859855

image-20240602200911159

image-20240602200920261

image-20240602200929458

image-20240602200936998

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602201047488

image-20240602201053925

image-20240602201100570

image-20240602201108678

image-20240602201115399

image-20240602201120902

image-20240602201129842

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602201141976

image-20240602201147356

image-20240602201152740

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602201204609

image-20240602201212348

image-20240602201217546

image-20240602201223181

image-20240602201228580

image-20240602201236949

image-20240602201246688

image-20240602201252770

image-20240602201257597

Vue练习

1、练习要求和实验2的用户注册一样,当用户输入后,能在下方显示用户输入的各项内容(不需要实现【重置】按钮)

2、实验报告中的实验小结部分来谈谈用JS、jQuery和 vue.js来实现用户注册的使用差别

原生 JavaScript

优势

  • 无依赖:不需要额外的库或框架。
  • 控制:开发者可以更精确地控制代码行为,不受库或框架的限制。

劣势

  • 代码量:可能需要编写更多的代码来处理DOM操作和状态管理。
  • 兼容性:需要手动处理不同浏览器之间的兼容性问题。
jQuery

优势

  • 简化DOM操作:jQuery提供了一套简洁的API来处理DOM操作,使得代码更简洁易读。
  • 插件丰富:有大量现成的插件可以使用,可以快速实现复杂功能。
  • 跨浏览器兼容性:jQuery处理了大部分的浏览器兼容性问题。

劣势

  • 性能:相对于原生JavaScript,jQuery的操作可能会稍慢。
  • 体积:引入jQuery库会增加页面的加载时间。
  • 现代化问题:随着前端技术的发展,纯粹依赖jQuery的开发模式已逐渐被现代框架所替代。
Vue.js

优势

  • 数据双向绑定:Vue.js的双向绑定机制可以简化表单输入与数据模型之间的同步。
  • 组件化:支持将界面拆分成可重用的组件,有利于代码的组织和复用。
  • 现代化工具支持:配合Vue CLI等工具,可以快速搭建项目,支持热重载、代码分割等现代开发实践。
  • 生态系统:有丰富的插件和库可以使用,社区活跃。

劣势

  • 学习曲线:相比于jQuery,Vue.js的学习曲线稍陡,需要理解组件化和MVVM模式。
  • 依赖:项目需要依赖Vue.js框架本身,可能会有一定的学习和维护成本。
应用场景
  • 原生JavaScript:适用于不需要额外库依赖且追求最小化或教育目的的项目。
  • jQuery:适合快速开发,特别是在旧项目中已经广泛使用jQuery的情况。
  • Vue.js:适用于需要高度组织的代码和前端驱动的复杂应用,例如SPA(单页应用)。

3、启动项目后出现登录页面(路由为“ http://站点地址/”)

4、输入正确的用户名和密码(常量)后,单击【登录】按钮跳转到预设的首页(咖啡屋页,路由为“ http://站点地址/coffee/:userName”,userName为登录输入的正确用户名),首页巨幕显示登录的用户名信息,导航要设置成单独的组件,并引用到网站所需的页面上

5、输入不正确则显示“登录失败”等字样

6、单击【注册】按钮跳转到注册页(路由为“ http://站点地址/reg”)

7、进入咖啡页首页后,可单击顶部导航“点单”,进入点单页面(路由为“ http://站点地址/order”),能根据用户点单实时计算总价。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1799959.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

接口幂等性设计(5 大方案罗列)

结合案例、列举场景的接口幂等性设计方案。 方案 1. 状态机 业务场景,数据审核成功后进行短信通知,或者是订单状态变成已支付后,短信通知用户订单生成的详细信息,等等和状态有关的操作。 假设 status:0(待…

vue改造四级树状可输入table

vue改造四级树状可输入table <template><div class"dimension_wary"><div class"itemHeader"><div class"target"></div><div class"sort">X2</div><div class"weight">…

xiaolingcoding 图解网络笔记——基础篇

文章目录 参考一、网络模型有哪几层DMANAPI 机制二、键入网址到网页显示&#xff0c;期间发生了什么&#xff1f;1. HTTP2. DNS3. 协议栈4. TCP5. IP6. MAC7. 网卡8. 交换机9. 路由器10. 服务器 与 客户端的互相扒皮&#xff08;添加、删除头部信息&#xff09;参考图HTTP 请求…

部署kubesphere报错

安装kubesphere报错命名空间terminted [rootk8smaster ~]# kubectl apply -f kubesphere-installer.yaml Warning: apiextensions.k8s.io/v1beta1 CustomResourceDefinition is deprecated in v1.16, unavailable in v1.22; use apiextensions.k8s.io/v1 CustomResourceDefini…

【数据结构初阶】--- 顺序表

顺序表&#xff0c;好像学C语言时从来没听过&#xff0c;实际上就是给数组穿了层衣服&#xff0c;本质是一模一样的。 这里的顺序表实际是定义了一个结构体&#xff0c;设计各种函数来实现它的功能&#xff0c;比如说数组中的增删改查插入&#xff0c;这些基本操作其实平时就会…

【YOLOV8】4.图片分类-训练自己的数据集

Yolo8出来一段时间了,包含了目标检测、实例分割、人体姿态预测、旋转目标检测、图像分类等功能,所以想花点时间总结记录一下这几个功能的使用方法和自定义数据集需要注意的一些问题,本篇是第四篇,图像分类功能,自定义数据集的训练。 YOLO(You Only Look Once)是一种流行的…

拥抱生态农业,享受绿色生活

随着人们对健康生活的追求日益增强&#xff0c;生态农业逐渐成为人们关注的焦点。我们深知生态农业对于保护生态环境、提高农产品品质的重要性&#xff0c;因此&#xff0c;我们积极推广生态农业理念&#xff0c;让更多的人了解并参与到生态农业的实践中来。 生态农业的蓝总说&…

ALSA 用例配置

ALSA 用例配置。参考 ALSA 用例配置 来了解更详细信息。 ALSA 用例配置 用例配置文件使用 配置文件 语法来定义静态配置树。该树在运行时根据配置树中的条件和动态变量进行评估&#xff08;修改&#xff09;。使用 用例接口 API 解析结果并将其导出到应用程序。 配置目录和主…

苹果手机618大降价重登销量榜首 红米K70pro为何成京东618国产手机之光

今天的618已经好几天了&#xff0c;很多买有机的已经下单&#xff0c;不出意外苹果15系列手机仍然是最卖座的手机&#xff0c;大家虽然口号喊得很响身体却是诚实的。但令人感到意外的是&#xff0c;今年618国产手机的第一把交椅确实红米K70系列&#xff0c;说好的支持华为呢&am…

给孩子的端午节礼物:最新初中数学思维导图大合集+衡水高考学霸笔记,可下载打印!

大家好哇&#xff01;端午节到了&#xff0c;阿星给家里有孩子的伙伴们一份礼物哦&#xff01;今天给大家带来一个超级实用的学习神器——思维导图法&#xff0c;最新版的初中数学思维导图大合集&#xff01; 这可不是我吹哦&#xff0c;连哈佛、剑桥大学都在用的高级学习方法…

常见硬件工程师面试题(一)

大家好&#xff0c;我是山羊君Goat。 对于硬件工程师&#xff0c;学习的东西主要和电路硬件相关&#xff0c;所以在硬件工程师的面试中&#xff0c;对于经验是十分看重的&#xff0c;像PCB设计&#xff0c;电路设计原理&#xff0c;模拟电路&#xff0c;数字电路等等相关的知识…

webman中创建udp服务

webman是workerman的web开发框架 可以很容易的开启udp服务 tcp建议使用gatewayworker webman GatewayWorker插件 创建udp服务: config/process.php中加入: return [// File update detection and automatic reloadmonitor > [ ...........], udp > [handler > p…

转速传感器介绍

一、概述 RPM&#xff08;Revolutions Per Minute&#xff09;转速传感器是一种用于测量旋转机械设备转速的传感器。它可以检测旋转部件上的特定位置标记&#xff08;如齿轮、凸起或磁铁&#xff09;&#xff0c;并根据这些标记的通过频率来计算转速。发电额定频率是50hz和60z…

链表题目练习----重排链表

这道题会联系到前面写的一篇文章----快慢指针相关经典问题。 重排链表 指针法 这道题乍一看&#xff0c;好像有点难处理&#xff0c;但如果仔细观察就会发现&#xff0c;这道题是查找中间节点反转链表链表的合并问题&#xff0c;具体细节有些不同&#xff0c;这个在反装中间链…

Apache Doris 基础 -- 数据表设计(表索引)

1、索引概述 索引用于帮助快速过滤或搜索数据。目前&#xff0c;Doris支持两种类型的索引:内置智能索引和用户创建的二级索引。 内置智能索引 排序键和前缀索引:Apache Doris基于排序键以有序的方式存储数据。它为每1024行数据创建一个前缀索引。索引中的键是当前1024行组的…

国产主流软硬件厂商生态分析

国产领域主流厂商汇总 信创&#xff0c;即信息技术应用创新&#xff0c;由“信息技术应用创新工作委员会”于2016年3月4日发起&#xff0c;是专注于软硬件关键技术研发、应用与服务的非营利性组织。作为科技自强的关键力量&#xff0c;信创在我国信息化建设中占据核心地位&…

小白必学!场外期权的交易模式

场外期权的交易模式 随着金融市场的深化与创新&#xff0c;场外期权交易作为一种灵活多样的金融衍生品交易方式&#xff0c;正逐渐成为投资者关注的焦点。场外期权&#xff0c;顾名思义&#xff0c;是在非交易所市场进行的期权交易&#xff0c;与交易所期权有着显著的区别。那…

IDEA 中设置 jdk 的版本

本文介绍一下 IDEA 中设置 jdk 版本的步骤。 一共有三处需要配置。 第一处 File --> Project Structure Project 和 Modules 下都需要指定一下。 第二处 File --> Settings 第三处 运行时的配置

【C语言进阶】--- 指针详解 3.0

接下来进入指针的进阶部分&#xff0c;准备好大脑 补充&#xff1a;&#xff08;重点&#xff09; 数组名是数组首元素地址 数组首元素地址和数组地址&#xff0c;值相同&#xff0c;但本质不同&#xff0c; 区别在于二者的类型不相同 比如数组int arr[10]; 数组首元素地址的类…

罗马仕、西圣、绿联充电宝哪个牌子好?热销充电宝实测对比!

在这个快节奏的时代&#xff0c;智能手机已成为我们日常生活中不可或缺的一部分&#xff0c;但电量焦虑也随之而来。无论是忙碌的工作日&#xff0c;还是休闲的周末出行&#xff0c;一款可靠、高效的充电宝成为了许多人的随身必备。在市场上众多充电宝品牌中&#xff0c;罗马仕…