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,一经查实,立即删除!

相关文章

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

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

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

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

CSS基础知识汇总

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

Vue08-数据代理

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

数据库存储过程和锁机制

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

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

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

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打车顺风车滴滴车跑腿源码微信小程序打车源码

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

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

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

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

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

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

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

编写程序,提示用户输入以米/秒(m/s)为单位的速度v和以米/秒的平方(m/s)为单位的加速度 a,然后显示最短跑道长度。

(物理:求出跑道长度)假设一个飞机的加速度是a而起飞速度是v,那么可以使用下 面的公式计算出飞机起飞所需的最短跑道长度: 编写程序,提示用户输入以米/秒(m/s)为单位的速度v和以米/秒的平方(m/s)为单 位的加速度 a,然后显示最短跑道长度。下面…

LCM — Least Common Multiple 最小公倍数

因为任何一个数都可以表示为若干个质数幂的乘积。 比如75 3*5*5,即 2^0 * 3^1 * 5^2 * 7^0 ... 那么对于两个数来说,gcd就是他们取每个质数的较小幂的乘积,lcm则相反。显然,这些幂加起来就是他们乘积。 gcd(a,b) * lcm(a,b) a…

CorelDRAW2024发布更新啦!设计师们的得力助手

在数字化的今天,视觉设计已经成为我们生活中不可或缺的一部分。从手机界面到广告海报,从网页布局到包装设计,每一个细节都离不开设计师们的专业与创意。然而,面对日益增长的设计需求和不断提升的审美标准,许多设计师开…

【算法专题--栈】最小栈--高频面试题(图文详解,小白一看就会!!)

目录 一、前言 二、题目描述 三、解题方法 ⭐解题方法--1 ⭐解题方法--2 四、总结 五、共勉 一、前言 最小栈这道题,可以说是--栈专题--,比较经典的一道题,也是在面试中频率较高的一道题目,通常在面试中,面试官可…

OpenAI发布GPT-4思维破解新策略,Ilya亦有贡献!

OpenAI正在研究如何破解GPT-4的思维,并公开了超级对齐团队的工作,Ilya Sutskever也在作者名单中。 论文地址:https://cdn.openai.com/papers/sparse-autoencoders.pdf 代码:https://github.com/openai/sparse_autoencoder 特征可…

【Unity游戏制作】地精寻宝Gnome‘s Well That Ends Well卷轴动作游戏【一】场景搭建

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 专栏交流🧧&…

Redisson分布式锁原理解析

前言 首先Redis执行命令是单线程的,所以可以利用Redis实现分布式锁,而对于Redis单线程的问题,是其线程模型的问题,本篇重点是对目前流行的工具Redisson怎么去实现的分布式锁进行深入理解;开始之前,我们可以…

什么情况下要配置DNS服务

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