一、学习 vue 面临的问题

最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧。都说 vue 的官方教程写得好,所以我就从官方教程开始学习。官方教程说“Vue (读音 /vju"color: #ff0000">二、最简单的前后段交互示例

吹再多的口水,也不如一个能运行的示例来得实在。这个例子也是从 vue 的官方教程中抄来的。首先,先建立一个 index.html 文件,编辑其内容,如下:

<!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="/UploadFiles/2021-04-02/vue.js">vue最简单的前后端交互示例详解

这里访问的后端是 https://yesno.wtf/api ,它传回的数据时 json 格式的,如果直接访问它,得到的结果如下:

vue最简单的前后端交互示例详解

https://yesno.wtf 这是一个神奇的网站,当你对某件事拿不定注意,需要别人推你一把时,可以访问它,它会随机返回一个 gif 动画,点头表示 yes,摇头表示 no,帮你做这个艰难的决定。直接访问 https://yesno.wtf ,注意在地址栏中不带 api 字样,可以得到这样的结果:

vue最简单的前后端交互示例详解 

三、从这个示例,我学到了什么

首先,解答了我前面的疑惑,那就是怎么和后端交互。在这个示例中,它使用 axios 库从 https://yesno.wtf/api 获取数据。同时,在这个例子中,它还使用 lodash 限制刷新频率。

其次,这个示例只有一个 html 文件,在这个文件中,使用

<script src="/UploadFiles/2021-04-02/vue.js">

引入需要的 vue.js、 axios.js 和 lodash.js,不需要下载安装一些有的没的东西,不需要学习在服务器端运行 JavaScript 的任何知识。本来嘛,我是准备学 .netcore 的,再让我学个 nodejs 我也觉得不科学嘛。

最后,我知道了学习 vue 不是单纯学习 vue,还要学习 axios.js 和服务器交互,真的要写个产品,还少不了漂亮的 UI 界面啥的,所以还要学习和 vue 配套的 UI 框架,看来学习的路还很长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue,前后端交互,vue与后端交互

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“vue最简单的前后端交互示例详解”

暂无“vue最简单的前后端交互示例详解”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。