開始

成都創(chuàng)新互聯(lián)公司電話聯(lián)系：18980820575，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)公司網(wǎng)頁制作領(lǐng)域十載，包括石牌坊等多個行業(yè)擁有豐富的營銷推廣經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)公司，為企業(yè)保駕護(hù)航。

這是一適合新手練習(xí)的小項(xiàng)目，一個在線翻譯的demo。

在正式開始前，先啰嗦一下，是一位網(wǎng)友給我的建議，就是不要強(qiáng)行組件化的問題 開始做Vue時我們可能會喜歡拆很多組件出來 但記住組件是為了復(fù)用（常見如公共菜單按鈕欄等） 如非能夠復(fù)用的情況其實(shí)并不用真的拆出組件來 。

當(dāng)然，這個項(xiàng)目里因?yàn)槭蔷毷郑詮?qiáng)行組件化來涉及更多的vue用法。

目錄結(jié)構(gòu)

src下新建了兩個文件：TranslateForm.vue表單組件和TranslateText.vue翻譯結(jié)果組件

涉及的語法

• 指令：v-model，v-on，v-bind
• 父子組件通信：$emit,props
• 動態(tài)更新數(shù)據(jù)：vm.$set
• 翻譯服務(wù)的API，我這里用的是有道翻譯的api

——————————————————————————————分割線————————————————————————

TranslateForm.vue
<template>
 <div>
 <!--加上頁面修飾符，提交時就不回再重載頁面-->
 <form v-on:submit.prevent="formSubmit">
  <input type="text" v-model="text" placeholder="輸入需要翻譯的內(nèi)容"/>
  <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>

當(dāng)前文章：vuetranslatepeoject實(shí)現(xiàn)在線翻譯功能【新手必看】-創(chuàng)新互聯(lián)
路徑分享：http://chinadenli.net/article10/dgpcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、小程序開發(fā)、動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、App開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)