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

首先我们要在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>
效果图:


Logo

前往低代码交流专区

更多推荐