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

(编辑：jimmy 日期: 2024/11/19 浏览：2)

一、学习 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">

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

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

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

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

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

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

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

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

上一篇：css配合JavaScript实现tab标签切换效果

下一篇：JavaScript中七种流行的开源机器学习框架