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 相关文章推荐
常用的javascript function代码
May 23 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php写的AES加密解密类分享
2014/06/20 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
js字符串转成JSON
2013/11/07 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
详解node child_process模块学习笔记
2018/01/24 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
JS实现吸顶特效
2020/01/08 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
使用Python写一个小游戏
2018/04/02 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python如何使用input函数获取输入
2020/08/06 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
工商管理实习自我鉴定
2013/09/28 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
庆七一主持词
2015/06/29 职场文书
服务行业标语口号
2015/12/26 职场文书
教师个人教学反思
2016/02/23 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL