vue小案例--在线翻译

学习完vue.js的基本操作后跟着网易云课堂的“米斯特吴 ”老师写的小案例
没有写css只实现了基本功能。

可以自己添加option完善可以翻译的语言种类。

1、 先将展示界面的组件挂载到APP.Vue
（1）Import导入
（2）Components注册
（3）在template中调用
2、 搭建简单form表单界面
3、 点击 button时需传递，在form中绑定一个事件，用v-on绑定
4、 将输入框中的内容输出，使用v-model双向绑定
5、在子组件中需要向父组件传值处使用this.$emit("function",param); 其中function为父组件定义函数，param为需要传递参数。此时我们要传过去的数据时我们在输入框中获取的数据.然后在父组件中子组件引用处添加v-on：function=“function1”。Function为之前子组件传递过来的函数 ，function1是父组件中将要用来处理接受子组件传的数据的函数。 6、获取API key和documentation 7、安装vue-resource获取http方法，需要安装对应的模块，使用npm install vue-resource –-save 之后正常导入 8、使用this.$emit("function",param);其中function为父组件定义函数，param为需要传递参数。此时我们要传过去的数据时我们在输入框中获取的数据.然后在父组件中子组件引用处添加v−on：function=“function1”。Function为之前子组件传递过来的函数，function1是父组件中将要用来处理接受子组件传的数据的函数。6、获取APIkey和documentation7、安装vue−resource获取http方法，需要安装对应的模块，使用npminstallvue−resource–−save之后正常导入8、使用this.http.get()参数为接口？key=key值&language=en&需要翻译的 文本
9、用v-text绑定用于展示的子组件，通过props传递。然后在展示界面中就可以展示了。

APP.vue

<template>
  <div id="app">
    <h1>在线翻译</h1>
    <h5 class="text-muted"> 一个简单的小项目</h5>
    <home v-on:forSubmit="translateText"> </home>
    <Show  v-text="translatedText">  </Show>
  </div>
</template>

<script>

  import  Home from './components/Home.vue'
  import  Show from './components/Show.vue'
export default {
  name: 'App',
  data:function(){
    return{
        translatedText:""
    }
  },
  components:{
    Home,
    Show

  },
  methods:{
    translateText(text,language){
     this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20200225T155334Z.701dfbcdcc42938f.d73683009a7d70e0b4e895fb62b8306143067f9d&lang='+language+'&text='+text).then((response)=>{
       this.translatedText = response.body.text[0];
//       console.log(response.body.text[0]);
    })
//   alert(text);
    }
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Home.vue

<template>
<div class="row" id="translate">
  <div class="col-md-6 col-md-offset-3">
  <form class="well from-inline" v-on:submit="forSubmit">
    <input class="form-control" type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
    <select class="form-control" v-model="language">
      <option value="en">English</option>
      <option value="ru">Russian</option>
      <option value="ko">Korean</option>
      <option value="ja">Japanese</option>
    </select>
    <input class="btn btn-primary" type="submit"  value="翻译">
  </form>
  </div>
</div>
</template>

<script>
    export default {
        name: "Home",
      data(){
        return {
          textToTranslate:"",
          language:""
        }
      },
        methods:{
          forSubmit(e){
//            alert(this.textToTranslate);
            e.preventDefault();
          this.$emit("forSubmit",this.textToTranslate,this.language);
          },
//          created(){
//           this.language="en";
//          }
        }
    }
</script>

<style scoped>

</style>

Show.vue

<template>
<div id="Show">
  <h2>{{translatedText}}</h2>
  <!--<h2>测试</h2>-->
</div>
</template>

<script>
    export default {
        name: "Show",
      props:[
        'translatedText'
      ]
    }
</script>

<style scoped>

</style>