一、核心目录结构
涉及的内容
- V型,V系列
- 组件通信:$放出,道具
- 翻译服务的API:第三方翻译服务商,申请可以免费的金钥https://translate.yandex.com/developers/keys
App.vue
<template>
<div id="app" >
<h1>在线翻译</h1>
<h5 class="text-muted" style="margin-top: 10px">简单 / 易用 / 便捷</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){
this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20170721T082515Z.54cf3dc583f679db.f4a96182281281d8b5dfe24b4e88298e2133f219&lang='+language+'&text='+text)
.then((response)=>{
this.translatedText = response.body.text[0];
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-top: 30px;
}
</style>
TranslateForm.vue
<template>
<div id="translateForm" class="container" style="margin-top: 10px">
<form id="transForm" class="well form-inline row " style="margin-top: 20px;margin-left: 20px ;border: none" v-on:submit="formSubmit">
<textarea class="col-md-10" style ='margin-left: 8% ;height:200px; padding-left: 2% ;border-radius: 5px; border: 1px solid #DCDCDC' v-model="textToTranslate" placeholder="输入需要翻译的内容"></textarea>
<div class="col-md-10" style="margin-top: 50px;margin-left: 5% ;">
<select class="col-md-1" style ='padding-left: 2% ; padding-right: 1% ; border-radius: 5px; margin-left: 20px ;border: 1px solid #333333' v-model="language">
<option value="zh">汉语</option>
<option value="en">英语</option>
<option value="ru">俄语</option>
<option value="ja">日语</option>
<option value="ko">韩语</option>
<option value="fr">法语</option>
</select>
<input class="btn btn-primary col-md-1 " style ='margin-left: 20px;' type="submit" value="翻译">
</div>
</form>
</div>
</template>
<script>
export default {
name: 'translateForm',
data:function(){
return {
textToTranslate:"",
language:""
}
},
methods: {
formSubmit:function(e){
this.$emit("formSubmit",this.textToTranslate,this.language);
e.preventDefault();
}
},
created:function(){
this.language = "en";
}
}
</script>
<style>
#transForm{
border-radius: 10px;
border: 1px #ccc solid;
}
</style>
TranslateOutput.vue
<template>
<div id="translateOutput" style="height: 40px ;margin: 50px 10% 100px 10%;font-weight: 800;font-size: 30px">
<h1>{{translatedText}}</h1>
</div>
</template>
<script>
export default {
name: 'translateOutput',
props:[
"translatedText"
]
}
</script>
<style>
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App'
Vue.use(VueResource)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
项目源码地址:https://gitee.com/caott/my-project
项目运行步骤:
- git clone https://gitee.com/caott/my-project.git
- cd my-project
- npm install
- npm run dev