vue,js入门（实战项目：在线翻译器）

这里主要讲概念，因为运用之前的知识是完全可以弄起来的

首先我们要在components下建立两个组件，一个是translate组件，一个是show组件，第一个组件用来输入你要翻译的内容，第二个组件输出你要展示的内容

效果大致这样

这里的重点是，子向父传值，父向子传值

我们当前先实现一个小功能，就是在translate模块输入要翻译的内容，也就是说要把translate.vue的值传送到app.vue文件，然后由app.vue文件，再传送给show.vue文件，这是我们第一个要实现的地方

然后我们为了要引入api，要调用http，首先我们先安装vueresource，对main.js里面配置好，

getapp:function(text,language)
    {
      
      this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180523T081500Z.2cbe2187ca53b561.81816292eafc61819dd41db8281aef0144c5d936&lang='+language+'&text='+text)
      .then((data)=>{this.gettext=data.body.text[0];})   

 },

首先我们先去https://www.tech.yandex.com/，

拷贝这个网站，然后?后面加key=

然后返回上一层

在里面new一个key值

&lang再放一个text文本值

最后得到：

this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180523T081500Z.2cbe2187ca53b561.81816292eafc61819dd41db8281aef0144c5d936&lang='+language+'&text='+text)

 
.then((data)=>{this.gettext=data.body.text[0];})

然后可以console.log输出，发现text【0】是所要获得的，就得到数据

最后，language附上值，否则不赋值，刷新页面就是一片空白

//main.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'

Vue.config.productionTip = false
Vue.use(VueResource)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

//App.vue

<template>
  <div id="app">
    <h1>在线翻译</h1>
    <translate v-on:sendapp="getapp"></translate>
    <show v-bind:sendshow="gettext"></show>
  </div>
</template>

<script>
import Translate from './components/Translate'
import Show from './components/Show'

export default {
  name: 'App',
  components: {
    Translate,Show
  },
  data(){
    return{
      gettext:"",
    }
  },
  methods:{
    getapp:function(text,language)
    {
      
      this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180523T081500Z.2cbe2187ca53b561.81816292eafc61819dd41db8281aef0144c5d936&lang='+language+'&text='+text)
      .then((data)=>{this.gettext=data.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;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

//Translate.vue

<template>
  <form v-on:submit="send">
    <input type="text" placeholder="请输入要翻译的内容" v-model="inputtext">
    <select v-model="language">
        <option value="en">English</option>
        <option value="ru">Russian</option>
        <option value="ko">Korean</option>

     </select> 
    <input type="submit" value="翻译">
  </form>
</template>

<script>


export default {
  name: 'translate',
  components: {
  
  },
  data(){
    return{
      inputtext:"",
      language:"en"
    }
  },
  methods:{
    send:function(e)
    { 
      this.$emit("sendapp",this.inputtext,this.language); 
      e.preventDefault();// 取消默认事件，防止点击以后再默认刷新一次
    }
  }
}

</script>

<style>

</style>

//Show.vue

<template>
	<p>{{ sendshow }}</p>
</template>

<script>


export default {
  name: 'show',
  props:{
  	sendshow:{
  		type:String
  	}
  }
}
</script>

<style>

</style>

效果图：