note_4：vue.js实战项目

Vue.js实战项目

---

参考

• 网易云课堂：Vue实战项目
• 博客：如何在vue里引入Bootstrap
• 博客：vue引入bootstrap——webpack
• 官网：bootswatch
• 官网：yandex translateAPI
• 官网：Vue.js文档
• 文章：深入浅出ES6（七）：箭头函数 Arrow Functions
  
• 官网：html/css教程

---

目录

---

在线翻译

一、components目录下创建新组件

1. TranslateForm.vue

• 实现表单部分

2. TranslateOutput.vue

• 实现内容显示部分

---

二、TranslateForm.vue

1. App.vue中要引入TranslateForm

• 首先在<template>里面要加载一下<translateForm></translateForm>
• 在<script>里面要引入一下TranslateForm
• components里面要调用一下TranslateForm

2. 处理

• <select>下拉选择框，可以选择翻译的语言种类：英语、韩语、日语、俄语。
• placeholder属性是当选择框内没填东西的时候显示出的内容
• <option disabled value="">请选择</option>是选择框内没有选择的时候显示出来的内容。

<form id="transForm" v-on:submit="formSubmit">
<!-- placeholder没填东西时，显示出的文字 -->
<!-- v-model双向绑定，可以获取框里面的内容 -->
    <input type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
    <!-- 先给出一个option用作测试 -->
    <!-- language获取用户选择的语言 -->
    <select v-model="language">
        <!-- "en"代表英语 -->
        <option value="en">English</option>
        <option value="ru">Russian</option>
        <option value="ko">Korean</option>
        <option value="ja">Japanese</option>
    </select>
    <input type="submit" value="翻译">
</form>

• 要在methods里面实现formSubmit事件。
• 要把获取的this.textToTranslate传递到App.vue中，再从App.vue传递到TranslateOutput.vue中进行显示。
• $emit()是新建事件，将this.textToTranslate和this.language的内容带到this.textToTranslate事件中。这里的this.textToTranslate事件和函数名没有关系，只是刚好相同而已。

methods: {
    formSubmit:function(e) {
      // 测试submit键是否有效
      // alert("Hello World!");
      // alert(this.textToTranslate);
      // 注册事件，将获取的输入数据传递到App.vue
      // $emit()里的参数可以随意填，"formSubmit"和前面的没有关系
      // 要传递参数出去
      this.$emit("formSubmit", this.textToTranslate, this.language);
      // 取消默认事件，防止点击以后再默认刷新一次
      e.preventDefault();
    }

在App.vue中，

• 在加载translateForm的时候监听自定义事件formSubmit（前面提到的$emit()，获取里面的两个参数值），然后调用方法translateText并且传递前面获取的两个参数。

<!-- 要将TranslateForm里面拿到的输入传递给App.vue
    然后通过App.vue传递给TranslateOutput.vue进行翻译输出 -->
<!-- 要实现TranslateForm里面的注册事件，必须找到加载的地方
    也就是<translateForm></translateForm>
    将时间绑定上去，就可以触发事件，"translateText"是任意名 -->
<translateForm v-on:formSubmit="translateText"></translateForm>

• text和language就是对应接收的两个参数，获取的文字和语言。
• 因为涉及到在线翻译，而在线翻译有现成的API可以调用：yandex translateAPI，所以要用到http请求。
• 此时，要安装vue-resource才可以实现http请求，并在main.js中引入。
• 进入yandex后，往下找到document并进入链接，左边菜单栏找到Translate text并选择，看到Request Syntax的第一行，就是地址：https://translate.yandex.net/api/v1.5/tr.json/translate?，后面加上?。
• 返回yandex首页，找到API key，进入并注册，获得API key：trnsl.1.1.20180427T110549Z.c1edaf8641273abe.f7bddfe02d631cba6f3a59110912c178be5f27dc。前面加上key=，后面加上&。
• lang是语言的种类，和获取的参数语言language相同。+是字符串拼接。最后要加上&。
• text是文本内容，和获取的内容text相同。+是字符串拼接。
• this.$http.get()是有返回值的，所以使用then()，外加一个es6的箭头函数，获取返回的response的内容。
• 在控制台可以看到，response下面有个body，body下面有个text，text里面是有一个数组，数组里面的多个数对应多种语言的翻译。由于我们一次只选择一种语言翻译，所以我们直接获取text[0]。
• 翻译好的文本要存进新的data变量translateText中，用于下一步传递到TranslateOutput.vue中。

methods: {
    // text用于接收TranslateForm.vue里面的textToTranslate
    translateText:function(text, language) {
      // alert("Hello World!");
      // 打印内容，看是否成功接收了参数
      // alert(text);
      // yandex里documentation的translate-text：request syntax
      // 后面要跟上?key='api key'，不能写&
      // 还要跟一个参数lan(语言)
      // 还要获取用户文本text
      this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180427T110549Z.c1edaf8641273abe.f7bddfe02d631cba6f3a59110912c178be5f27dc&lang='+language+'&text='+text).then((response)=>{
        // console.log(response.body.text[0]);
        // 获取翻译好的内容
        this.translatedText = response.body.text[0];
      })
    }
  }

---

三、TranslateOutput.vue

1. App.vue中要引入TranslateOutput

• 首先在<template>里面要加载一下<translateOutput></translateOutput>
• 在<script>里面要引入一下TranslateOutput
• components里面要调用一下TranslateOutput

2. 处理

• v-text属性就是绑定文本，相当于之前的{{}}。这里绑定文本，适用于传递内容到TranslateOutput.vue中。

<!-- 因为要把内容传递到translateOutput里，所以要绑定 -->
<translateOutput v-text="translatedText"></translateOutput>

在TranslateOutput.vue中，

• props用于获取父组件中传入的值。详情查看vue.js官方文档中的prop属性。

export default {
  name: 'translateOutput',
  // 因为translatedText是父组件传过来的，所以用props来引用
  props: [
    "translatedText"
  ]
}

---

四、完善样式

1. 基础样式

• 和css、html设置的方法类似，先给表单<form>一个id，然后在<style>中对特定的id进行样式编排。具体的样式，参考：w3cschool的html/css教程

<form id="transForm" v-on:submit="formSubmit">
    <!-- placeholder没填东西时，显示出的文字 -->
    <!-- v-model双向绑定，可以获取框里面的内容 -->
    <input type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
        <!-- 先给出一个option用作测试 -->
        <!-- language获取用户选择的语言 -->
        <select v-model="language">
        <!-- "en"代表英语 -->
            <option disabled value="">请选择</option>
            <option value="en">English</option>
            <option value="ru">Russian</option>
            <option value="ko">Korean</option>
            <option value="ja">Japanese</option>
        </select>
    <input type="submit" value="翻译">
</form>

<style>
  #transForm {
    border-radius: 10px;
    border:1px #ccc solid;
  }
</style>

2. bootstrap

由于我的bootstrap没有弄成功，下面直接贴几篇文章和相关网站过来参考：

• 如何在vue里引入Bootstrap
• vue引入bootstrap——webpack
• bootswatch

成功装好并成功引入bootstrap之后，就可以按照Vue实战项目后续的步骤进行设置，可以设置出不错的效果。（大概）

---