本來打算今天上午把這個案例寫好的，結果上午昏昏欲睡，毫無動力，中午吃完飯就打王者榮耀，玩到下午三點多，隊友不給力，自己又太坑實在太累了就睡了一覺，醒來到了六點了，我去！

好了，廢話少說。我先介紹下這個案例--效果：左側輸入一種語言，右側選擇要轉換的語言，點擊翻譯就可以得到結果！是不是很神奇！當然博主這裏僅僅羅列的七八種語言！效果圖如下：

介紹詳細的書寫過程：

1.搭建腳手架我不多說，建立兩個vue文件 TranslateForm.vue 和 TranslateOutput.vue 如下圖：

2.組件傳值

在TranslateForm.vue代碼中，<form class="well form-inline" v-on:submit="formSubmit">，表單綁定一個事件submit（也就是後面點擊“ 翻譯 ”的那個），並為這個事件起名為formSubmit，後面先在formSubmit的方法中打印輸出alert("hello world"),顯然可以。然後我們要拿到輸入框的內容。使用data方法，定義一個屬性 textToTranslate，然後我們用v-model的形式將輸入框的值綁定到這個屬性上，表示用戶輸入的是什麽，也就綁定到input裏面標簽是什麽。 這裏我們直接在formSubmit的方法中打印輸出alert(this.textToTranslate);，你輸入什麽就會彈出什麽。然後用e.preventDefault();取消默認的刷新事件。這裏演示也就拿到了input 標簽輸入的內容，然後需要把這個內容傳遞到app.vue 中去翻譯，並把翻譯後的內容傳遞到TranslateOutput.vue文件中。這裏有個辦法叫做事件註冊的方法this.$emit();這個方法中傳遞一個自定義的事件方法 起名為 formSubmit，這和上面的formSubmit沒有關系，其實可以隨意起名的。然後我們在app.vue中<translateForm v-on:formSubmit="translateText"></translateForm><br/>綁定一個這個自定義的事件，並為其命名為translateText這麽一個方法，然後在下面實現這個方法，並打印輸出一句話alert(‘hello world") 這裏我們先驗證一下，我們直接刷新頁面，點擊翻譯按鈕，會彈出對話框。說明我們事件註冊和調用都已經完事了。然後我們在this.$emit（）方法中在傳遞一個參數this.textToTranslate。雖然傳遞出去了，但是需要接收。我們在app.vue 中的translateText（）方法中定義一個形參text接收,這時候是alert(text);了。我們刷新頁面，輸入任何內容，點擊翻譯後會彈出相應的內容。 組件傳值的內容就ok了。

接下來使用 翻譯API：API網址：https://tech.yandex.com/

vue-resource 安裝 和 使用我不多說。然後用this.$http.get（）使用這個API。

css樣式使用bootstrap中的 bootswatch 網址 https://bootswatch.com/.具體使用我也不說了。

講實話，我現在好困，有些廢話寫的再多也沒用，得多動手，從新寫個三四遍不就記住了嘛。

app.vue代碼

 1 <template>
 2   <div id="app">
 3     <h1>在線翻譯</h1>
 4
 
     <h5 class="text-muted">簡單/易用/便捷</h5>
 5     <translateForm v-on:formSubmit="translateText"></translateForm><br/>
 6     <translateOutput v-text="translatedText"></translateOutput>
 7   </div>
 8 </template>
 9 
10 <script>
11 
12 import TranslateForm from
 
 ‘./components/TranslateForm.vue‘
13 import TranslateOutput from ‘./components/TranslateOutput‘
14 
15 export default {
16   name: ‘App‘,
17   data:function(){
18     return{
19       translatedText:""
20     }
21   },
22   components:{
23     TranslateForm,TranslateOutput
24   },
25   methods:{
26     translateText:function(text,language){
27       // alert(text);
28       this.$http.get(‘https://translate.yandex.net/api/v1.5/tr.json/translate?
　　　　　　　　　　　　　　　key=trnsl.1.1.20180806T023828Z.262c5f4356ee8837.93b2f555c5f7937e029a263f958de5233b58c335
　　　　　　　　　　　　　　　&lang=‘+language+‘&text=‘+text)
29       .then((response)=>{                                            //請求出來的數據有個返回值
30         // console.log(response.body.text[0]);
31         this.translatedText = response.body.text[0];
32 
33       })
34     }
35   }
36   
37 }
38 </script>
39   
40 <style scoped>
41   h1,h5{
42     text-align: center;
43     margin: 20px;
44   }
45 </style>

TranslateForm.vue代碼

 1  <template>
 2   <div class="row" id="translateForm">
 3 
 4     <div class="lala">
 5       <form class="well form-inline" v-on:submit="formSubmit">
 6         <input class="form-control" type="text" v-model="textToTranslate" placeholder="輸入需要翻譯的內容">
 7         <select class="form-control" v-model="language">
 8           <option value="en">英語</option>
 9           <option value="ru">俄語</option>
10           <option value="ko">朝鮮語</option>
11           <option value="ja">日語</option>
12           <option value="es">西班牙語</option>
13           <option value="it">意大利語</option>
14           <option value="de">德語</option>
15           <option value="zh">中文</option>
16         </select>
17         <input class="btn btn-primary" type="submit" value="翻譯">
18       </form>
19     </div>
20     
21   </div>
22 </template>
23 <script>
24 
25 export default {
26   name: ‘translateForm‘,
27   data:function(){
28     return{
29       textToTranslate:"",
30       language:""
31     }
32   },
33   methods:{
34     formSubmit:function(e){
35       // alert(this.textToTranslate);
36       this.$emit("formSubmit",this.textToTranslate,this.language);
37       e.preventDefault();
38     }
39   },
40   created:function(){
41     this.language = ‘en‘;
42   }
43 }
44   
45 </script>
46 
47 <style scoped>
48   .lala{
49     float: none;
50     display: block;
51     margin-left: auto;
52     margin-right: auto;
53 
54 }
55 </style>

TranslateOutput.vue代碼

 1 <template>
 2   <div id="translateOutput">
 3     <h2>{{translatedText}}</h2>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 
 9 export default {
10   name: ‘translateOutput‘,
11   props:["translatedText"]
12 }
13 </script>
14 
15 <style scoped>
16     div{
17         text-align: center;
18         font-size: 26px;
19         color: #fff;
20     }
21 </style>

main.js代碼

 1 import Vue from ‘vue‘
 2 import VueResource from ‘vue-resource‘
 3 import App from ‘./App‘
 4 
 5 Vue.use(VueResource)
 6 Vue.config.productionTip = false
 7 
 8 new Vue({
 9   el: ‘#app‘,
10   components: { App },
11   template: ‘<App/>‘
12 })

index.html代碼

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>online-translation</title>
 7     <link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/solar/bootstrap.min.css">
 8   </head>
 9   <body>
10     <div id="app"></div>
11     <!-- built files will be auto injected -->
12   </body>
13 </html>

vue - 實戰項目 - 在線翻譯