20180407 构建在线翻译demo

目录：

一 . 最终样式预览

二. 实现方式

    1. 创建一个基于webpack模板的新项目

    2. 分析：整个项目由三块组成

    3. 项目结构：

    4. 完成TranslateFrom组件编写

        4.1 分析：

        4.2 构建模板步骤

        4.3 使用模板

5. 完成App.vue标题编写

6. 完成TranslateOutput.vue子组件构建

7. 接下来考虑数据传递

    7.1 逻辑：输入查询的内容 ——> 传递给接口 ——> 打印返回数据

    7.2 根组件和自组件的交互

一 . 最终样式预览

二. 实现方式【上半部分：子组件向父组件传递值】

1. 创建一个基于webpack模板的新项目

vue init webpack my-project

2. 分析：整个项目由三块组成

1） 标题 —— 直接写在根组件下（App.vue中）

2）输入框 ➕ 下拉框 ➕ 翻译按钮 —— 放在TranslateForm.vue 组件中实现

3）显示效果 —— 放在TranslateOutput.vue组件中实现

3. 项目结构：

4. 完成TranslateFrom组件编写

4.1 分析：

模板中包含：

1. 输入框

2.下拉菜单

3.翻译按钮

4.2 构建模板步骤

1） 修改根容器id为translateForm，并且构建输入框

2） 构建表单

3） 构建输入框

4） 构建下拉菜单

5） 构建翻译按钮

4.3 使用模板

1）来到Vue.app根组件中

2）引入TranslateForm组件

3）注册TranslateForm组件

4）使用组件名标签

5） 查看效果 npm run dev

5. 完成App.vue标题编写

6. 完成TranslateOutput.vue子组件构建

7. 接下来考虑数据传递

7.1  逻辑：输入查询的内容 ——> 传递给接口 ——> 打印返回数据

7.2  根组件和自组件的交互

1.1 根据第一点，首先要构建form中的事件，因为点击submit提交按钮，需要将输入的内容传给根组件

1.2 绑定提交（submit）时调用的方法（formSubmit）——为了接收输入的值

1.3 利用v-model绑定input标签，将输入的值传到textToTranslate中

1.4 取消默认刷新事件

2.1 TranslateForm需要完成的任务是：获取用户输入的内容，并将该内容传递给父组件App.vue

在Vue中，我们使用tihs.$emit() 事件注册方式，我们先在提交事件中注册另一个事件formParentSubmit

this.$emit([arg1:注册事件名称],[arg2:传入事件的参数1],[arg3:传入时间的参数2]...)

2.2 在子组件中声明一个事件，将接收到的text值通过在父组件中绑定子组件标签的形式，传递给父组件

2.3 父组件中实现translateText方法，接收子组件传递过来的值，并将其打印出来

2.4 到此为止，已经完成了子组件向父组件传值的全部过程，下半部分利用父组件向翻译api发起http请求