vue实战之在线翻译项目
vue实战之在线翻译项目
今天，博主带来的分享是vue实战之在线翻译项目，一个小小的vue项目，用到了vue的很多基础语法，传组件等等！我们先来看下效果把！
左侧输入一种语言，右侧选择要转换的语言，点击翻译就可以得到结果！是不是很神奇！当然博主这里仅仅罗列的七八种语言！我们就以汉语来展示了！
其他语言的展示：
可以输入与可以翻译的语言有：
<option value="en">英语</option>
<option value="ru">俄语</option>
<option value="ko">朝鲜语</option>
<option value="ja">日语</option>
<option value="es">西班牙语</option>
<option value="it">意大利语</option>
<option value="de">德语</option>
<option value="zh">中文</option>
博主比较懒，，就贴代码理解了！
好了，接下来我们正式开始把！先说下思路吧，一个是要翻译的表格制作（组件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代码：
<template>
<div id="translateForm">
<form id="transform" v-on:submit="formSubmit">
<input type="text" v-model="textToTranslate" placeholder="需要翻译的内容">
<select v-model="language">
<option value="en">英语</option>
<option value="ru">俄语</option>
<option value="ko">朝鲜语</option>
<option value="ja">日语</option>
<option value="es">西班牙语</option>
<option value="it">意大利语</option>
<option value="de">德语</option>
<option value="zh">中文</option>
</select>
<input class="btn btn-primary" type="submit" value="翻译">
</form>
</div>
</template>
<script>
export default {
name: 'translateForm',
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：
从父组件中接受翻译的结果！
<template>
<div id="translateOutput">
<h2>{{translatedText}}</h2>
</div>
</template>
<script>
export default {
name: 'translateOutput',
props:["translatedText"]
}
</script>
<style>
</style>
从父组件中接受翻译的结果！
父组件部分：
<template>
<div id="app">
<h1>在线翻译</h1>
<h5 class="text-muted">简单 / 易用 / 便捷</h5>
<translateForm v-on:formSubmit="translateText">
</translateForm>
<translateOutput v-text="translatedText"></translateOutput>
</div>
</template>
<script>
import TranslateForm from './components/TranslateForm'
import TranslateOutput from './components/TranslateOutput'
export default {
name: 'App',
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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>myproject</title>
<link rel="stylesheet" href=https://bootswatch.com/4/superhero/bootstrap.min.css>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
翻译折磨神奇的东西自然少不了API了，博主这路用了一个翻译API：API网址：https://tech.yandex.com/
这里是引用的方法，上边的页面是进入主页之后点击Document进入得到的，如下图：
当然，我们还需要点击3，得到APIkey，需要注册就可以得到了！当然大家不想注册可以直接复制博主的！APIkey如下：