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.mzph.cn/news/849614.shtml

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

相关文章

大模型怎么评价未来

以下内容都是腾讯元宝大模型回答的结果,不代表个人的意见。 目录 腾讯元宝APP自我介绍主要功能用户体验技术特点用户评价腾讯元宝APP自我评价技术细节功能特点与其他大模型比较怎么选择人工智能模型选择人工智能模型的步骤考虑因素评估和优化模型未来大模型的发展…

618数码产品有什么推荐?四大2024“宝藏”数码产品推荐!

随着618购物节的热情逐渐升温,你是否在繁多且诱人的商品海洋中迷失方向,难以找到那最心仪的宝贝?团团在此特别为你精心挑选了一系列经过亲身体验的优质好物。这些推荐不仅时尚前沿,更贴合你的日常生活需求,确保实用与品…

霸气的短视频:成都科成博通文化传媒公司

霸气的短视频:瞬间的力量与魅力 在数字化浪潮中,短视频以其独特的魅力迅速崛起,成为社交媒体的新宠。而在众多短视频中,那些充满霸气、让人热血沸腾的作品,总能引起广泛的关注和讨论。成都科成博通文化传媒公司将从内…

CSS基础知识汇总

目录 CSS 基础知识1. CSS 的基本结构2. 选择器3. 常用 CSS 属性4. CSS 单位5. CSS 盒模型 总结 学习 CSS(Cascading Style Sheets)是前端开发的重要部分,它用于控制网页的样式和布局。以下是学习 CSS 过程中需要掌握的基本概念、符号和对应的…

Excel中的SUMPRODUCT函数:使用方法与案例分析

在Excel中,SUMPRODUCT函数是一个强大的工具,它允许你将数组间对应的元素相乘,并返回乘积之和。这个函数在处理复杂数据和分析时非常有用,特别是在需要多条件求和或计数的情况下。以下是对SUMPRODUCT函数使用方法的详细介绍和案例分…

LeetCode 1174, 274, 240

目录 1174. 即时食物配送 II题目链接表要求知识点思路代码 274. H 指数题目链接标签思路代码优化 240. 搜索二维矩阵 II题目链接标签特性线性查找 二分查找思路代码 官方题解的Z字形查找思路代码 1174. 即时食物配送 II 题目链接 1174. 即时食物配送 II 表 表Delivery的字…

Vue08-数据代理

一、Object.defineProperty() Object.defineProperty() 是 JavaScript 中的一个方法,用于直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。 这个方法允许你精确地控制一个对象的属性,包括它的值、是…

1. 在Java中,为何枚举类型的比较推荐==而不是equals

开源项目SDK:https://github.com/mingyang66/spring-parent 个人文档:https://mingyang66.github.io/raccoon-docs/#/ 比较运算符和equals的区别 比较运算符是比较两个对象在内存中的引用,equals方法是比较两个对象的值是否相等。 枚举类型…

数据库存储过程和锁机制

存储过程 存储过程是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程可以简化应用开发人员的很多工作,减少数据在数据库和应用服务器之间的传输,对于提高数据处理的效率是有好处的,存储过程思想上很简单,就是数据库SQL语言层面的代码封装与有重用 …

找工作,你知道找你的是外包吗?这篇文章讲透各种外包、内包公司!

文章目录 一、传统外包公司二、软件厂商。三、内包如何选择?参考链接互联网上存在大量键盘侠,但多数缺乏对行业的深入了解,凭个人热情和经历妄下定论。为避免误导,现详细探讨市场上涉及“外包”的不同公司类型,希望能为大家提供帮助。 一、传统外包公司 首先是传统的外包…

Flutter开发效率提升1000%,Flutter Quick教程之对Widget进行删除,剪切,粘贴

一,删除操作 1,首先我们选中要删除的Widget。 2,在左边的侧边栏,点击删除按钮,即可完成对组件的删除操作。 二,剪切。剪切是相同的道理,都是先选中,再点击对应的按钮。 1&#xff…

C#朗读语音

最近有个需求,需要在C#程序发生异常时候,朗读文字,C#提供了.net framework可以提供简单的语音朗读功能。 引入依赖 using System.Media; using System.Speech.Synthesis; using System.Runtime.InteropServices; //报警音量 SystemSounds.…

【程序语言定义】

文章目录 一、程序语言的定义与分类1.程序语言的定义2.程序语言的分类低级语言高级语言 二、程序语言的组成1.语法(Syntax)2.语义(Semantics)3.实现(Implementation) 三、程序语言的发展历程早期的机器语言…

javaWeb4 Maven

Maven-管理和构建java项目的工具 基于POM的概念 1.依赖管理:管理项目依赖的jar包 ,避免版本冲突 2.统一项目结构:比如统一eclipse IDEA等开发工具 3.项目构建:标准跨平台的自动化项目构建方式。有标准构建流程,能快速…

java 原生http服务器 测试JS前端ajax访问实现跨域传post数据

后端 java eclipse 字节流转字符 package Httpv3;import com.sun.net.httpserver.Headers; import com.sun.net.httpserver.HttpExchange; import com.sun.net.httpserver.HttpHandler; import com.sun.net.httpserver.HttpServer;import java.io.IOException; import java.i…

【全开源】JAVA打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码

:构建便捷出行新体验 一、引言:探索打车系统小程序源码的重要性 在数字化快速发展的今天,打车系统小程序已成为我们日常生活中不可或缺的一部分。它以其便捷、高效的特点,极大地改变了我们的出行方式。而背后的关键,…

for of 和 for in 的区别

for in适合遍历对象, for of适合遍历数组。 for in遍历的是数组的索引,对象的属性,以及原型链上的属性。 1.循环数组 区别一:for in 和 for of 都可以循环数组。for in 输出的是数组的index下标,而for of 输出的是数…

KOL+UGC:解锁品牌内容营销新策略,增强用户参与与互动

在当今数字化时代,品牌与受众之间的互动性和参与感变得至关重要。其中,KOL和UGC(用户生成内容)的结合,为品牌创造了一种全新的内容创作模式。这种模式不仅增强了内容的吸引力,还极大地提升了品牌与受众之间…

win键盘键位映射:欧版键盘->国内布局|是否应该买国外版笔记本?

最近买了个欧版笔记本电脑,键盘是欧版键盘: 键盘上的按钮实体和国内不完全一样键盘按钮上印的字母符号和国内不完全一样 具体差异 如图: shift处欧版是两个按键。可通过键盘键位映射解决。回车Enter、| 、布局不同。非常别扭,…

跨境反向海淘系统:业务流程解析与未来发展展望

随着全球化的深入发展和互联网技术的飞速进步,跨境购物已经成为越来越多消费者日常生活中的一部分。在这个过程中,反向海淘系统以其独特的优势,逐渐崭露头角,成为跨境电商领域的新星。作为一名在跨境反向海淘系统业务中耕耘了10年…