vue实战之在线翻译项目

今天，博主带来的分享是vue实战之在线翻译项目，一个小小的vue项目，用到了vue的很多基础语法，传组件等等！我们先来看下效果把！

左侧输入一种语言，右侧选择要转换的语言，点击翻译就可以得到结果！是不是很神奇！当然博主这里仅仅罗列的七八种语言！我们就以汉语来展示了！

其他语言的展示：

可以输入与可以翻译的语言有：

博主比较懒，，就贴代码理解了！

好了，接下来我们正式开始把！先说下思路吧，一个是要翻译的表格制作（组件1），另一个是翻译的结果（组件2），

这是两个不同的子组件！

使用vue脚手架的话，，我们需要做点准备工作！

第一：安装node环境：直接去node官网下载就可以了，安装超级简单，直接点下一步，安装结束之后在C盘的program files下

会有一个nodejs文件夹的！node官网：https://nodejs.org/en/

第二部分：脚手架的安装：这个我们需要去一下Github！

网址：https://github.com/vuejs/vue-cli

根据需要选择不同的包：

点击进入之后选择webpack，并且安装

选择第一个webpack点击进入：安装步骤如下：

当然了，我们还需要node、ES6的基本语法知识，在这里博主就不多说了！

下面正式开始项目了！

首先，组件1代码：

</select>

</form>

</div>

</template>

export default {

data:function(){

return{

textToTranslate:"",

language:""

}

methods:{

formSubmit:function(e){

// alert(this.textToTranslate);

this.$emit("formSubmit",this.textToTranslate,this.language);

e.preventDefault();

}

</script>

<style>

</style>

构建基本的内容，并且将所需数据传导父组件上！

组件2：

<h2>{{translatedText}}</h2>

</div>

</template>

export default {

props:["translatedText"]

}

</script>

<style>

</style>

从父组件中接受翻译的结果！

父组件部分：

</translateForm>

</div>

</template>

import TranslateForm from './components/TranslateForm'

import TranslateOutput from './components/TranslateOutput'

export default {

data:function(){

return{translatedText:""}

components: {

TranslateForm,TranslateOutput

methods:{

translateText:function(text,language){

//alert(text);

this.$http.get(

'https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180611T041751Z.761a657e2b451443.1c8c07e511b6d3bf8a5744cf21be71903bb64489&lang='+language+'&text='+text)

.then((response) => {

// console.log(response.body.text[0]);

this.translatedText = response.body.text[0];

})

}

</script>

<style>

#app{

text-align: center;

}

</style>

注册两个子组件，绑定相关数据！

HTML部分代码：

<!DOCTYPE html>

<html>

<head>

<title>myproject</title>

</head>

<body>

</body>

</html>

翻译折磨神奇的东西自然少不了API了，博主这路用了一个翻译API：API网址：https://tech.yandex.com/

这里是引用的方法，上边的页面是进入主页之后点击Document进入得到的，如下图：

当然，我们还需要点击3，得到APIkey，需要注册就可以得到了！当然大家不想注册可以直接复制博主的！APIkey如下：

vue实战之在线翻译项目相关推荐

Python3网络爬虫教程8——有道在线翻译项目（JS加密）
上接: Python3网络爬虫教程7--SSL数字证书 https://blog.csdn.net/u011318077/article/details/86538116 6. js加密(有道在线翻译 ...
Vue实战开发移动端旅游网站
Vue实战开发旅游网站项目搭建搭建步骤项目结构首页拆解首页组件拆分步骤网络请求库axios axios与ajax Promise 安装axios 如何使用axios 请求和响应的拦截使 ...
Vue 新手入门项目在线翻译
用的有道的API,最后效果是这样的需要两个组件,一个是需要翻译的内容和目标语言TranslateFrom.vue,还有一个是翻译成功显示的内容TranslateText.vue 项目结构是这样的 H ...
字节跳动青训营Day01 - 实战项目 - 在线翻译字典
实战项目 - 在线翻译字典 v1,测试api响应 v2,go语言发送api请求信息的一般方式:使用结构体格式化 v3,go语言接受api请求信息的一般方式:使用结构体格式化 v4,封装函数,进行查询 ...
【项目实战】springboot+vue舞蹈课程在线学习系统-java舞蹈课程学习打卡系统的设计与实现
注意:该项目只展示部分功能,如需了解,评论区咨询即可. 本文目录 1.开发环境 2 系统设计 2.1 背景意义 2.2 技术路线 2.3 主要研究内容 3 系统页面展示 3.1 学生 3.2 教师页面 ...
vue 后台翻译_vue translate peoject实现在线翻译功能【新手必看】
开始这是一适合新手练习的小项目,一个在线翻译的demo. 在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题开始做Vue时我们可能会喜欢拆很多组件出来但记住组件是为了复用( ...
初级项目vue实战项目收银系统
Vue实战视频-快餐店收银系统 (共11集) 2017-05-22 分类:Vue.js视频教程 / 视频教程阅读(126832) 评论(136) 课程前言这是我网站恢复后写的第一篇文章,在关站这 ...
Vue实战项，基于Element-UI 电商管理系统源代码，含项目部署指南
电商项目基本业务概述根据不同的应用场景,电商系统一般都提供了 PC 端.移动 APP.移动 Web.微信小程序等多种终端访问方式,我们主要是实现PC后台管理系统. 1.2 电商后台管理系统的功能电 ...
3.Vue.js 实战调查问卷WebApp项目
问卷调查demo已上传,欢迎大家指正,欢迎大家下载:https://download.csdn.net/download/lzb348110175/11085995 如果您没积分的话,可以私信/评论, ...

vue实战之在线翻译项目

vue实战之在线翻译项目相关推荐

最新文章

热门文章