首先，了解vue面临的问题

最近想学一个防身的前端技术。当我看到博客公园里写了很多vue的时候，让我们和vue一起去吧。据说vue的官方教程写得很好，于是我开始向官方教程学习。根据官方教程，“Vue(发音/vju/，类似于view)是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue被设计成从下到上一层一层地应用。”但这到底是什么概念？还是很困惑。而且我一开始也不了解vue的地位，只知道它是一个前端库，但是真的不知道它有什么优势。我认为这是一个可以一劳永逸地学习的通用框架。在官方教程的开始，我们讲了如何用JavaScript绑定页面上的元素和数据，而且是双向绑定和自动更新，真的很强大。然而，我们还没有讨论如何与服务器交互以及如何从服务器获取数据。(后来反复看教程，发现其实一开始说的是“Vue的核心库只关注视图层”，我自己都忽略了。)

第二，最简单的前后段交互示例

无论你吹多少口水，都不如一个工作实例那么现实。这个例子也是从vue的官方教程中复制过来的。首先，创建一个index.html文件并编辑其内容，如下所示：

！DOCTYPE html html head title my first Vue app/title script src=' http :3359 cdn . jsdeliver . net/NPM/Vue/dist/Vue . js '/script script src=' http :https://cdn . jsdeliver . net/NPM/[emailprotected]/dist/axios . min . js '/script script src=' http 3360https://cdn . jsdeliver。}，watch: {//如果问题发生变化，此函数将运行question:函数(新问题，旧问题){this。答案='等你停止打字.'这个。deboungetanswer()} }，created:function () {//` _。“去抖”是一个通过Lodash限制工作频率的功能。//在这个例子中，我们想要限制访问yesno.wtf/api.的频率//直到用户完成输入后才会发送AJAX请求。要了解更多关于//`_。去抖功能(及其近亲` _。油门`)，//请参考https://lodash.com/docs#debounce这个。去抖getanswer=_。去抖(这个。getanswer，500) }，methods : { getanswer : function(){ if(this . question . indexof('？')====-1){ this . answer='问题通常包含问号。-)'返回}这个.答案='正在思考.'var VM=this axios . get(' https://yesno . wtf/API ')。然后(函数(响应){ vm.answer=_。大写(response.data.answer) })。catch(函数(错误){ vm.answer='Error！无法达到应用编程接口错误})} })/脚本/正文/html，然后使用chromium浏览器打开此文件。以下是运行效果：

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

这是一个神奇的网站。当你对某件事不确定，需要有人推你的时候，可以去拜访。它会随机返回一个gif动画，点头是和摇头否来帮助你做出这个艰难的决定。直接访问https://yesno.wtf，注意地址栏没有api，可以得到如下结果：

第三，我从这个例子中学到了什么

首先，我回答了我之前的问题，就是如何与后端进行交互。在本例中，它使用axios库从https://yesno.wtf/api.获取数据同时，在本例中，它还使用lodash来限制刷新频率。

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

script src=' http :3359 cdn . jsdeliver . net/NPM/vue/dist/vue . js '/script script src=' http :https://cdn . jsdeliver . net/NPM/[email protected]/dist/Axios . min . js '/script script src=' http :https://cdn . jsdeliver . net/NPM/[email protected]/lodash . min . js。本来，我是要学的。我认为学习nodejs是不科学的。

最后我了解到学习vue不仅仅是学习vue，还有axios.js和服务器之间的交互。如果你真的想写一个产品，你需要一个漂亮的UI界面，所以你需要学习匹配vue的UI框架。看来学习的路还很长。

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