JavaWeb(6)——前端工程化(AJAX 和VUE入门)

 一、AJAX快速入门

 

        而原生的Ajax请求的代码编写起来还是比较繁琐的,所以接下来我们学习一门更加简单的发送Ajax 请求的技术Axios 。Axios是对原生的AJAX进行封装,简化书写。

Axios官网是:起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

但是还有简化的形式:(这种简化的形式使用较多)

 

 

 

 

 

 

 

 欢迎使用 -AJAX-数据管理平台 (apifox.com)

二、vue入门(安装vue,创建并运行一个项目)

前端有这么多框架,为什么首先推荐学习vue?

目前主流的前端开发框架有以下几种:

  1. React:React是Facebook开发的一款用于构建用户界面的JavaScript库。它提供了高效的虚拟DOM机制和组件化开发模式,广泛应用于单页应用和移动应用开发。

  2. Angular:Angular是由Google开发的一款完整的前端开发框架。它采用了强大的依赖注入和模块化系统,提供了完整的MVC架构,适用于大型、复杂的应用程序。

  3. Vue:Vue是一款轻量级的JavaScript框架,具有响应式数据绑定和组件化开发的特点。它易于学习和上手,适用于构建中小型的单页应用。

  4. Svelte:Svelte是一种编译型的前端框架,通过将代码在构建时编译成高效的原生JavaScript代码,实现了更轻量级的运行时性能。

Vue和jQuery有什么区别和联系?

区别:

  1. 架构:Vue是一种基于组件化架构的现代化JavaScript框架,而jQuery是一个JavaScript库。
  2. 功能:Vue提供了响应式的数据绑定和组件化的开发方式,能够构建复杂的单页应用;而jQuery主要用于DOM操作和事件处理。
  3. 学习曲线:Vue相对较新,但易于学习和上手,而jQuery则是较早期的库,学习曲线相对较平缓。

联系:

  1. DOM 操作:Vue可以操作DOM,但更推崇使用数据驱动的方式更新DOM;而jQuery则是以DOM操作为核心。
  2. 插件生态:Vue和jQuery都有丰富的插件生态系统,可以扩展功能和增加便利性。
 国内主要使用Vue,而国外主要使用React,这两个框架到底在什么时候去使用,场景是什么?

 Vue和React的区别主要体现在以下几个方面:

  1. 组件化开发:Vue和React都采用了组件化的开发方式,但在语法和实现上有所不同。Vue使用模板语法和单文件组件(.vue),更直观和简洁;React采用JSX语法,通过JavaScript编写组件和界面逻辑。

  2. 数据绑定:Vue使用了基于依赖追踪的响应式数据绑定系统,能够自动追踪数据变化并更新对应的DOM;React则采用了单向数据流的方式,通过虚拟DOM的比较和批量更新实现高效的界面渲染。

  3. 社区生态:React拥有较大的社区和庞大的生态系统,可以找到更多的开源组件和工具;Vue的社区也在快速发展,但相对较小一些。这也意味着在寻找支持和解决问题时,React可能会更容易找到相关资源。

在选择使用框架时,可以考虑以下情况:
  1. 项目规模:对于小型或中小型的项目,Vue是一种较好的选择,因为它易于学习和上手,并且具有更轻量级的体积。对于大型、复杂的项目,React和Angular可能更适合,因为它们提供更完善的生态系统和更强大的架构支持。

  2. 开发经验和团队技术栈:如果开发团队已经熟悉某个框架,那就直接选用该框架会更加高效,因为团队成员已经掌握了相关的开发技能和经验。

  3. 性能要求:如果对性能有较高的要求,例如需要处理大量数据或频繁更新UI,React的虚拟DOM机制可以提供较高的性能优化。Svelte也是一个值得考虑的选择,因为它的编译机制可以生成更高效的运行时代码。

创建vue项目的两种方式:

 

 

 

 

 耐心等待一会

 

在控制台输入 npm run serve 即可启动程序。 

 

 修改端口

 Element UI 的引入:Element - 网站快速成型工具

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/27298.html

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

相关文章

[极客大挑战 2019]PHP(反序列化)

介绍说明&#xff0c;有备份的习惯&#xff0c;找常见的备份文件后缀名 使用dirsearch进行扫描 dirsearch -u http://f64378a5-a3e0-4dbb-83a3-990bb9e19901.node4.buuoj.cn:81/ -e php-e 指定网站语言 扫描出现&#xff0c;www.zip文件 查看index.php <?php include c…

力扣C++|一题多解之数学题专场(1)

目录 7. 整数反转 9. 回文数 12. 整数转罗马数字 13. 罗马数字转整数 29. 两数相除 7. 整数反转 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 -如果反转后整数超过 32 位的有符号整数的范围 [2^31, 2^31 -1] &#xff0c;就返回 0。…

智慧体育:冰壶比赛数字孪生

本篇文章将介绍如何使用物理引擎和图扑 3D 可视化技术来呈现冰壶运动的模拟。 Oimo.js 物理引擎 Oimo.js 是一个轻量级的物理引擎&#xff0c;它使用 JavaScript 语言编写&#xff0c;并且基于 OimoPhysics 引擎进行了改进和优化。Oimo.js 核心库只有 150K &#xff0c;专门用…

漏洞复现畅捷通CRM SQL注入

免责声明 术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失,均由使用…

PHP与Golang对战:两种语言的比较与应用场景探讨

引言 在软件开发领域&#xff0c;选择一种合适的编程语言对于项目的成功至关重要。而在今天的文中&#xff0c;我们将探讨两个备受争议的编程语言——PHP与Golang之间的对战。通过比较它们的优势和应用场景&#xff0c;帮助开发者更好地了解如何选择适合自己项目的语言。 PHP的…

cocos creator Richtext点击事件

组件如图 添加ts自定义脚本&#xff0c;定义onClickFunc点击方法&#xff1a; import { Component, _decorator} from "cc";const { ccclass } _decorator; ccclass(RichTextComponent) export class RichTextComponent extends Component{public onClickFunc(even…

MySQL-DQL-小结

基本查询 条件查询 分组查询 排序查询 分页查询

AC+AP 旁挂式连接配置(华为)

AR1路由器配置 # interface GigabitEthernet0/0/0 ip address 10.1.30.1 255.255.255.0 ip route-static 10.1.20.0 255.255.255.0 10.1.30.2 # LSW1核心交换机 # dhcp enable vlan batch 10 20 30 interface Vlanif20 ip address 10.1.20.1 255.255.255.0 dhcp select in…

源码解读之FutureTask如何实现最大等待时间

预备知识&#xff1a;Java 线程挂起的常用方式有以下几种 Thread.sleep(long millis)&#xff1a;这个方法可以让线程挂起一段时间&#xff0c;并释放 CPU 时间片&#xff0c;等待一段时间后自动恢复执行。这种方式可以用来实现简单的定时器功能&#xff0c;但如果不恰当使用会…

vue文件上传,文件打不开。文件上传 on-progress不触发

//文件上传带进度条<el-uploadv-model:file-list"fileList":limit"3":on-progress"beforeAvatarUpload"//on-progress 不触发&#xff0c;触发的关键在于覆盖原有的http请求:http-request"getFile":action"${app.api}/student…

投个 3D 冰壶,上班玩一玩 | 物理引擎

本篇文章将介绍如何使用物理引擎和图扑 3D 可视化技术来呈现冰壶运动的模拟。 Oimo.js 物理引擎 Oimo.js 是一个轻量级的物理引擎&#xff0c;它使用 JavaScript 语言编写&#xff0c;并且基于 OimoPhysics 引擎进行了改进和优化。Oimo.js 核心库只有 150K &#xff0c;专门用…

【原创】实现GPT中Transformer模型之框架概念

作者&#xff1a;黑夜路人 时间&#xff1a;2023年7月 GPT是什么意思 GPT的全称是 Generative Pre-trained Transformer&#xff08;生成型预训练变换模型&#xff09;&#xff0c;它是基于大量语料数据上训练&#xff0c;以生成类似于人类自然语言的文本。其名称中的“预训练”…