vue 后台翻译_vue - 实战项目 - 在线翻译

本来打算今天上午把这个案例写好的，结果上午昏昏欲睡，毫无动力，中午吃完饭就打王者荣耀，玩到下午三点多，队友不给力，自己又太坑实在太累了就睡了一觉，醒来到了六点了，我去！

好了，废话少说。我先介绍下这个案例--效果：左侧输入一种语言，右侧选择要转换的语言，点击翻译就可以得到结果！是不是很神奇！当然博主这里仅仅罗列的七八种语言！效果图如下：

介绍详细的书写过程：

1.搭建脚手架我不多说，建立两个vue文件 TranslateForm.vue 和 TranslateOutput.vue 如下图：

2.组件传值

在TranslateForm.vue代码中，

，第一步：当点击 formSubmit 的时候把 input 标签的值拿到。所以我们在name后面定义一个方法 methods ，在这个方法中实现 formSubmit 方法。(表单绑定一个事件submit(也就是后面点击“ 翻译 ”的那个)，并为这个事件起名为formSubmit)这里我们先测试一下先在formSubmit的方法中打印输出alert("hello world")，然后点击翻译按钮，显然可以。

第二步：我们要拿到输入框的内容。使用data方法并返回 我们定义的一个属性 textToTranslate，然后我们用v-model的形式将输入框input标签的值绑定到这个textToTranslate 属性上。 这里我们直接在formSubmi