Vue 学习笔记 总结

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

放一下课上的内容

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"),能根据用户点单实时计算总价。

相关推荐
DYuW5gBmH几秒前
Chrome DevTools MCP 让 AI 无缝接管浏览器调试会话
前端·chrome·chrome devtools
qq12_81151751527 分钟前
Java Web 影城会员管理系统系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】
java·前端·mybatis
杜子不疼.28 分钟前
Java 智能体学习避坑指南:3 个常见误区,新手千万别踩,高效少走弯路
java·开发语言·人工智能·学习
猹叉叉(学习版)32 分钟前
【系统分析师_知识点整理】 15.数学计算与知识产权
笔记·软考·知识产权·系统分析师
李苏苏281 小时前
OpenClaw与CSDN Bot版本兼容配置指南
学习
weixin199701080161 小时前
《中控网商品详情页前端性能优化实战》
前端·性能优化
wuhen_n1 小时前
LangChain Agents 实战:构建智能文件管理助手
前端·javascript·人工智能·langchain·ai编程
Vfw3VsDKo2 小时前
Flink源码阅读:Netty通信
java·前端·flink
别抢我的锅包肉2 小时前
【FastAPI】 + SQLAlchemy 异步 ORM 实现完整 CRUD 操作
前端·fastapi
盐焗西兰花2 小时前
鸿蒙学习实战之路-Share Kit系列(15/17)-手机与PC/2in1设备间分享
学习·智能手机·harmonyos