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


Posted in Javascript onJune 07, 2018

 开始

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

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

在正式开始前,先??乱幌拢?且晃煌?迅?业慕ㄒ椋?褪遣灰?啃凶榧??奈侍 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 。

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

目录结构

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

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

涉及的语法

  • 指令: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实现在线翻译功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue实现商城购物车功能
Nov 27 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 #Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 #Javascript
vue.js实现标签页切换效果
Jun 07 #Javascript
js数组去重的N种方法(小结)
Jun 07 #Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 #Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 #Javascript
vue实现简单loading进度条
Jun 06 #Javascript
You might like
php实现的发送带附件邮件类实例
2014/09/22 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php数据访问之查询关键字
2016/05/09 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
js玩一玩WSH吧
2007/02/23 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
毕业生爱心捐书倡议书
2015/04/27 职场文书
《静夜思》教学反思
2016/02/17 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers