Vue 学习笔记 总结

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.rhkb.cn/news/343631.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IO进程线程(十)进程间通信 消息队列 共享内存 信号灯集

文章目录 一、IPC(Inter-Process Communication)进程间通信相关命令 :(一)ipcs --- 查看IPC对象(二)获取IPC键值(三)删除IPC对象的命令(四)获取IPC键值的函数1. 函数定义…

django ORM model update常规用法

Django ORM(对象关系映射)提供了一种强大而直观的方式,通过Python类和方法与数据库交互。在Django模型中更新记录是一个常见的任务,可以通过多种方式完成。以下是一些常见的更新记录的方法: 1. 更新单条记录 使用 sa…

Linux 内核之 mmap 内存映射触发的缺页异常 Page Fault

文章目录 前言一、简介1. MMU 内存管理2. 缺页中断3. 页表4. 小节 二、mmap 提前分配物理内存1. mm_populate 函数2. __mm_populate 函数3. populate_vma_page_range 函数4. __get_user_pages 函数5. find_extend_vma 函数6. find_vma 函数7. follow_page_mask 函数8. follow_p…

从零开始:腾讯云轻量应用服务器上部署MaxKB项目(基于LLM大语言模型的知识库问答系统)

使用腾讯云轻量应用服务器部署和使用MaxKB项目 前言 一, MaxKB介绍 MaxKB是基于LLM大语言模型的知识库问答系统,旨在成为企业的最强大脑。它支持开箱即用,无缝嵌入到第三方业务系统,并提供多模型支持,包括主流大模型…

数据结构之ArrayList与顺序表(上)

找往期文章包括但不限于本期文章中不懂的知识点: 个人主页:我要学编程(ಥ_ಥ)-CSDN博客 所属专栏:数据结构(Java版) 顺序表的学习,点我 上面这篇博文是关于顺序表的基础知识,以及顺序表的实现。…

Java和Web前端哪个有发展前景?

Java和Web前端都是当今技术行业里的热门岗位,岗位招聘需求量大,人才竞争度高,同学们掌握这两个岗位里其中任何一个的相关主流技术,都可以找到一份不错的职位。下面请允许笔者做一个简要的分析阐述: 一、Web前端 Web前…

生成ssh密钥,使用ssh连接linux系统

这里写目录标题 ssh密钥大概介绍1、密钥在哪里生成(客户端/服务器)?2、密钥生成是什么样子的? ssh (生成密钥、密钥传输、配置连接、连接服务)过程1、生成密钥提示一:输入保存密钥的文件&#x…

JVM 虚拟机

JVM 是 Java Virtual Machine 的简称,意为 Java 虚拟机,虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。 常见的虚拟机有:JVM、VMwave、Virtual Box等。JVM 是一台被定制过的现实当中不存在的计算…

在keil5中打开keil4工程的方法

文章目录 1. 打开文件 2. 安装旧版本包 3. 在keil4中打开keil5工程 1. 打开文件 在keil5 MDK的环境下,打开keil4的工程文件,会弹出下图所示的窗口: 参考官网的解释这两个方法分别为: 1. 使用MDK 版本 4 Legacy Pack时&#x…

在推荐四款软件卸载工具,让流氓软件无处遁形

Revo Uninstaller Revo Uninstaller是一款电脑软件、浏览器插件卸载软件,目前已经有了17年的历史了。可以扫描所有window用户卸载软件后的残留物,并及时清理,避免占用电脑空间。 Revo Uninstaller可以通过命令行卸载软件,可以快速…

【C++ | 拷贝构造函数】一文了解C++的 拷贝(复制)构造函数

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 ⏰发布时间⏰:2024-06-07 2…

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

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

如何有效提问?

有效提问:正确地向别人提问是一种艺术,可以帮助你获得清晰、有用的答案。 明确表达问题:确保你的问题清晰明了,避免含糊不清或模棱两可的语言。这可以帮助对方更好地理解你的问题,并给出准确的答复。 尊重对方&#x…

毕业论文word常见问题

0、前言: 这里的问题都是以office办公软件当中的word为例,和WPS没有关系。 1、页眉横线删不掉: 解决方案:进入页眉编辑状态,在开始选项栏中选择页眉字体样式,清除格式。 修改方式如下: 2、…

社区服务支持

社区服务支持 原创 小王搬运工 时序课堂 2024-06-07 19:29 四川 🌟 邀请函 | 加入我们的时序数据挖掘社区 🚀 尊敬的数据爱好者们, 我们诚挚地邀请您加入我们的专业社区——时序数据挖掘社区,一个专注于时序数据分析、挖掘与应…

QT 信号和槽 多对一关联示例,多个信号,一个槽函数响应,多个信号源如何绑定一个槽函数

三个顾客 Anderson、Bruce、Castiel 都要订饭,分别对应三个按钮,点击一个按钮,就会弹出给该顾客送饭的消息。注意这个例子只使用一个槽函数,而三个顾客名称是不一样的,弹窗时显示的消息不一样,这需要一些 技…

什么情况下要配置DNS服务

什么是DNS 一、DNS就是域名解析 我们上网的方式通常都由ip地址组成,但是为了有个规范,而且我们也不可能去记住那么多一串Ip数字,首先域名就会比ip好记很多,其次固定性,一旦服务器换了,只要重新绑定域名对…

【Flutter】 TextField限制长度时, 第三方手写输入法、ios原始拼音输入法输入被吞问题

问题描述 TextField限制长度时, 当你的输入字符长度已经到了最大值-1时,使用第三方手写输入法或者ios原生拼音输入法输入liang(什么拼音都行,这里只是举例),输到i那么li都会消失。 原因分析 这是因为第三…

C++青少年简明教程:C++函数

C青少年简明教程:C函数 C函数是一段可重复使用的代码,用于执行特定的任务,可以提高代码的可读性和可维护性。函数可以接受参数(输入)并返回一个值(输出),也可以没有参数和返回值。 …

Nvidia/算能 +FPGA+AI大算力边缘计算盒子:中国舰船研究院

中国舰船研究院又称中国船舶重工集团公司第七研究院,隶属于中国船舶重工集团公司,是专门从事舰船研究、设计、开发的科学技术研究机构,是中国船舶重工集团公司的军品技术研究中心、科技开发中心;主要从事舰船武器装备发展战略研究…