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

放一下课上的内容

Vue 学习笔记 总结插图

Vue 学习笔记 总结插图(1)

Vue 学习笔记 总结插图(2)

Vue 学习笔记 总结插图(3)

Vue 学习笔记 总结插图(4)

Vue 学习笔记 总结插图(5)

Vue 学习笔记 总结插图(6)

Vue 学习笔记 总结插图(7)

Vue 学习笔记 总结插图(8)

Vue 学习笔记 总结插图(9)

Vue 学习笔记 总结插图(10)

Vue 学习笔记 总结插图(11)

Vue 学习笔记 总结插图(12)

Vue 学习笔记 总结插图(13)

Vue 学习笔记 总结插图(14)

Vue 学习笔记 总结插图(15)

Vue 学习笔记 总结插图(16)

Vue 学习笔记 总结插图(17)

Vue 学习笔记 总结插图(18)

Vue 学习笔记 总结插图(19)

Vue 学习笔记 总结插图(20)

Vue 学习笔记 总结插图(21)

Vue 学习笔记 总结插图(22)

Vue 学习笔记 总结插图(23)

Vue 学习笔记 总结插图(9)

Vue 学习笔记 总结插图(24)

Vue 学习笔记 总结插图(25)

Vue 学习笔记 总结插图(26)

Vue 学习笔记 总结插图(27)

Vue 学习笔记 总结插图(28)

Vue 学习笔记 总结插图(9)

Vue 学习笔记 总结插图(29)

Vue 学习笔记 总结插图(30)

Vue 学习笔记 总结插图(31)

Vue 学习笔记 总结插图(32)

Vue 学习笔记 总结插图(33)

Vue 学习笔记 总结插图(34)

Vue 学习笔记 总结插图(35)

Vue 学习笔记 总结插图(9)

Vue 学习笔记 总结插图(36)

Vue 学习笔记 总结插图(37)

Vue 学习笔记 总结插图(38)

Vue 学习笔记 总结插图(9)

Vue 学习笔记 总结插图(39)

Vue 学习笔记 总结插图(40)

Vue 学习笔记 总结插图(41)

Vue 学习笔记 总结插图(42)

Vue 学习笔记 总结插图(43)

Vue 学习笔记 总结插图(44)

Vue 学习笔记 总结插图(45)

Vue 学习笔记 总结插图(46)

Vue 学习笔记 总结插图(47)

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

本站无任何商业行为
个人在线分享 » Vue 学习笔记 总结
E-->