vue translate peoject实现在线翻译功能【新手必看】

 开始

这是一适合新手练习的小项目,一个在线翻译的demo。

在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 。

当然,这个项目里因为是练手,所以强行组件化来涉及更多的vue用法。

目录结构

src下新建了两个文件:TranslateForm.vue表单组件和TranslateText.vue翻译结果组件

涉及的语法

  • 指令:v-model,v-on,v-bind
  • 父子组件通信:$emit,props
  • 动态更新数据:vm.$set
  • 翻译服务的API,我这里用的是有道翻译的api

——————————————————————————————分割线————————————————————————

TranslateForm.vue
<template>
 <div>
 <!--加上页面修饰符,提交时就不回再重载页面-->
 <form v-on:submit.prevent="formSubmit">
  <input type="text" v-model="text" placeholder="输入需要翻译的内容"/>
  <select v-model="to">
  <option value ="en">英文</option>
  <option value ="ko">韩文</option>
  <option value ="fr">法文</option>
  <option value ="ru">俄文</option>
  </select>
  <input type="submit" value="翻译"/>
 </form>
 </div>
</template>
<script>
export default {
 name: 'TranslateForm',
 data: function () {
 return {
  text: '',
  to: 'en'
 }
 },
 methods: {
 formSubmit: function () {
  this.$emit('formSubmit', this.text, this.to)
 }
 }
}
</script>
<style></style>

这里没啥好说的,text和to两个变量分别是要翻译的文字和翻译语言的选项,this.$emit把数据传给父组件使用

根组件APP

<template>
 <div id="app">
 <h2>简单翻译</h2><span>简单/易用/便捷</span>
 <TranslateForm v-on:formSubmit="textTranslate"></TranslateForm>
 <TranslateText :translated-text="translatedText"></TranslateText>
 </div>
</template>
<script>
import TranslateForm from './components/TranslateForm.vue'
import TranslateText from './components/TranslateText.vue'
import md5 from 'blueimp-md5'
import $ from 'jquery'

export default {
 name: 'App',
 data: function () {
 return {
  translatedText: '2',
  appKey: '47bb6e424790df89',
  key: 'NH2VxBadIlKlT2b2qjxaSu221dSC78Ew',
  salt: (new Date()).getTime(),
  from: '',
  to: 'en'
 }
 },
 components: {
 TranslateForm, TranslateText
 },
 methods: {
 textTranslate: function (text, to) {
  let vm = this
  $.ajax({
  url: 'http://openapi.youdao.com/api',
  type: 'post',
  dataType: 'jsonp',
  data: {
   q: text,
   appKey: this.appKey,
   salt: this.salt,
   from: this.from,
   to: to,
   sign: md5(this.appKey + text + this.salt + this.key)
  },
  success: function (data) {
   vm.$set(vm.$data, 'translatedText', data.translation[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>

1、父组件拿到子组件传来的数据后开始通过api来请求数据
2、我用的是有道api http://ai.youdao.com/login.s api文档里对于api的使用已经很详细了,我在这里是第一次使用api,没觉得难
3、需要自己安装两个依赖:一个是jquery由于ajax请求api,一个是blueimp-md5在请求api时会用到里面的md5()
4、用vue.set将得到的结果绑定到translatedText这个变量,在这一步的时候我踩了两个坑

第一个坑:习惯了以前的写法,直接就这样给变量赋值,结果变量的值并未改变,这时我还不知到有Vue.set这个语法,后面百度才知道的(不认真看文档的下场)

 success: function (data) {
   this.translatedText = data.translation[0]
   console.log(this.translatedText)
  }

第二个坑:照着文档来写,然后报错了:this.$set is not a function,这里报错是因为success这个函数里的this指向的不是当前的VueModel

success: function (data) {
   this.$set(this.$data, 'translatedText', data.translation[0])
  }

所以我在前面定义了一个vm变量来充当当前Model,然后就不报错了。

TranslateText.vue
<template>
 <div id="TranslateText">
 <p>{{translatedText}}</p>
 </div>
</template>
<script>
export default {
 name: 'TranslateText',
 props: [
 'translatedText'
 ]
}
</script>
<style></style>

props接收父组件传值来使用

最后

这个文章我自己看了一下,写的确实不好,许多地方不通顺,希望大家多多包涵

代码我上传到github了 https://github.com/Zone-F/vue... (没加样式)

以上所述是小编给大家介绍的vue translate peoject实现在线翻译功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • vue实现在线翻译功能

    本文实例为大家分享了vue实现在线翻译功能的具体代码,供大家参考,具体内容如下 最终效果: APP.vue <template> <div id="app"> <h4>在线翻译</h4> <h5>简单/易用/方便</h5> <!-- 表单组件 --> <translateForm @formSubmit='translateText'></translateForm> <!

  • vue translate peoject实现在线翻译功能【新手必看】

     开始 这是一适合新手练习的小项目,一个在线翻译的demo. 在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 . 当然,这个项目里因为是练手,所以强行组件化来涉及更多的vue用法. 目录结构 src下新建了两个文件:TranslateForm.vue表单组件和TranslateText.vue翻译结果组件 涉及的语法 指令:v-mode

  • vue2.X组件学习心得(新手必看篇)

    VUEJS学习网址:https://cn.vuejs.org/ 此文章是用来记录自己的学习和实践心得. 关注点:父子组件之间的通信 看图说话: Pass Props 子组件本身与父组件是孤立的,通过子组件中显示声明的props属性,接收父组件数据; 父组件的数据更新时,子组件的prop会跟着更新: 此数据流动是单向的(看着); Emit Events 子组件使用$.emit(fn)向外抛出自己的内部触发的事件; 父组件是否监听?如果父组件需要监听,使用v-on绑定监听,触发对应事件; 以上为通用

  • 基于JavaScript Array数组方法(新手必看篇)

    Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表,但不同的是,ECMAScript数组中的每一项可以保存任何类型的数据,无论是数值.字符串或者是对象.同时,ECMAScript中的数组大小是可以动态调整的,即可以根据数据的添加自动增长以容纳新增的数据.下面总结一下JavaScript中数组常用的操作函数及用法. •创建数组 创建数组主要有构造函数和

  • Web前端新人笔记之jquery入门心得(新手必看)

    本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jquery开发工具:jquery能做什么? ① 取得文档中的元素 $('div.content').find('p'); ② 修改页面的外观 $('ul > li:first').addClass('active'); ③ 改变文档内容 $('#container').append('<a href

  • Python 开发工具PyCharm安装教程图文详解(新手必看)

    PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrains之手. 同时支持Google App Engine,PyCharm支持IronPython.这些功能在先进代码分析程序的支持下,使 PyCharm 成为 Python 专业开发人员和刚起步人员使用的有力工具. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳

  • FFmpeg视频处理入门教程(新手必看)

    目录 一.概念 1.1 容器 1.2 编码格式 1.3 编码器 二.FFmpeg 的使用格式 三.常用命令行参数 四.常见用法 4.1 查看文件信息 4.2 转换编码格式 4.3 转换容器格式 4.4 调整码率 4.5 改变分辨率(transsizing) 4.6 提取音频 4.7 添加音轨 4.8 截图 4.9 裁剪 4.10 为音频添加封面 五.参考链接 FFmpeg是视频处理最常用的开源软件. 它功能强大,用途广泛,大量用于视频网站和商业软件(比如 Youtube 和 iTunes),也是

  • 浅谈pyhton学习中出现的各种问题(新手必看)

    目前比较杂乱无章,后续还会有一些添加补充 1.标识符 (1)标识符是区分大小写的. (2)标示符以字母或下划线开头,可包括字母,下划线和数字. (3)以下划线开头的标识符是有特殊意义的. 2.参数前加星号(*)的意义 面对实际情况时无法提前得知要传入的参数的个数,因此在参数前加星号从而允许函数接受任意多的参数,情况如下: (1)参数前加一个星号(*),传入的参数存储为元组的形式: (2)参数前加两个星号(*),传入的参数存储为字典的形式,并且调用时采用例如'a=1,b=2,c=3'的形式. 3.

  • Java知识点归纳 —给Java新手的一些建议(新手必看)

    写这篇文章的目的是想总结一下自己这么多年来使用java的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Java程序员和打算入Java开发这个行当的准新手们,希望可以给大家一些经验,能让大家更好学习和使用Java. 这次介绍的主要内容是和J2SE相关的部分,另外,会在以后再介绍些J2EE相关的.和Java中各个框架相关的内容. 经过这么多年的Java开发,以及结合平时面试Java开发者的一些经验,我觉得对于J2SE方面主要就是要掌握以下的一些内容. 1. JVM相

  • 常用Javascript函数与原型功能收藏(必看篇)

    如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function

随机推荐