开始
这是一适合新手练习的小项目，一个在线翻译的demo。
在正式开始前，先啰嗦一下，是一位网友给我的建议，就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用（常见如公共菜单按钮栏等） 如非能够复用的情况其实并不用真的拆出组件来 。
当然，这个项目里因为是练手，所以强行组件化来涉及更多的vue用法。
目录结构
src下新建了两个文件：TranslateForm.vue表单组件和TranslateText.vue翻译结果组件
涉及的语法
指令：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',
