開始

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

這是一適合新手練習的小項目，一個在線翻譯的demo。

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

當然，這個項目里因為是練手，所以強行組件化來涉及更多的vue用法。

目錄結構

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

涉及的語法

• 指令：v-model，v-on，v-bind
• 父子組件通信：$emit,props
• 動態(tài)更新數(shù)據(jù)：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>

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

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

廣告

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