Vue基础实战-在线翻译

最新推荐文章于 2025-09-17 05:29:08 发布

原创

最新推荐文章于 2025-09-17 05:29:08 发布 · 784 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue CLI创建项目，结合vue-resource调用Yandex翻译API实现在线翻译功能。通过创建组件、事件监听及处理响应，完成从用户输入到翻译结果展示的过程。同时，介绍了下拉框让用户选择目标语言，完善了用户体验。

效果

这里写图片描述

知识点：

vue-cli脚手架的基本使用
vue-resource的使用
调用翻译API

（写完回来我才发现，为什么我能写这么长，整体代码量实际很少）
这次使用vue-cli脚手架来搭建工程项目,

vue init webpack translate

创建项目后，首先先搭建一个简单的页面，我们需要两个组件，一个是表单内容的，一个是输出结果，所以我们在components下创建TranslateFom.vue和TranslateOutput.vue两个文件，并将注册引入App.vue（Helloworld组件就懒得删除了，反正也不用它），
这里写图片描述

TranslateForm.vue

<template>
  <div>
    <form>
      <input type="text" v-model="translateText" placeholder="请输入要翻译的内容">
      <select>
        <option value="en">英语</option>
      </select>
      <button type="submit">翻译</