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如下: