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

最新推荐文章于 2025-03-15 12:58:50 发布

谢西顾

最新推荐文章于 2025-03-15 12:58:50 发布

阅读量2.9k

点赞数 3

本文链接：https://blog.csdn.net/yiyiyixin/article/details/80421341

版权

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

首先我们要在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];})   

 },<