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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
JQuery小知识
Oct 15 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
js+css实现打字效果
Jun 24 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
vue实现移动端返回顶部
Oct 12 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危险函数(disable_functions)
2012/02/23 PHP
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
再探JavaScript作用域
2014/09/24 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
深入理解js中this的用法
2016/05/28 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
在Django中实现添加user到group并查看
2019/11/18 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
如何写毕业求职自荐信
2013/11/06 职场文书
自我鉴定写作要点
2014/01/17 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
教师专业自荐信
2014/05/31 职场文书
体育口号大全
2014/06/18 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
教师个人事迹材料
2014/12/17 职场文书
英文升职感谢信
2015/01/23 职场文书