学习完vue.js的基本操作后跟着网易云课堂的“米斯特吴 ”老师写的小案例
没有写css只实现了基本功能。
可以自己添加option完善可以翻译的语言种类。
1、 先将展示界面的组件挂载到APP.Vue
(1)Import导入
(2)Components注册
(3)在template中调用
2、 搭建简单form表单界面
3、 点击 button时需传递,在form中绑定一个事件,用v-on绑定
4、 将输入框中的内容输出,使用v-model双向绑定
5、在子组件中需要向父组件传值处使用this.
e
m
i
t
(
"
f
u
n
c
t
i
o
n
"
,
p
a
r
a
m
)
;
其
中
f
u
n
c
t
i
o
n
为
父
组
件
定
义
函
数
,
p
a
r
a
m
为
需
要
传
递
参
数
。
此
时
我
们
要
传
过
去
的
数
据
时
我
们
在
输
入
框
中
获
取
的
数
据
.
然
后
在
父
组
件
中
子
组
件
引
用
处
添
加
v
−
o
n
:
f
u
n
c
t
i
o
n
=
“
f
u
n
c
t
i
o
n
1
”
。
F
u
n
c
t
i
o
n
为
之
前
子
组
件
传
递
过
来
的
函
数
,
f
u
n
c
t
i
o
n
1
是
父
组
件
中
将
要
用
来
处
理
接
受
子
组
件
传
的
数
据
的
函
数
。
6
、
获
取
A
P
I
k
e
y
和
d
o
c
u
m
e
n
t
a
t
i
o
n
7
、
安
装
v
u
e
−
r
e
s
o
u
r
c
e
获
取
h
t
t
p
方
法
,
需
要
安
装
对
应
的
模
块
,
使
用
n
p
m
i
n
s
t
a
l
l
v
u
e
−
r
e
s
o
u
r
c
e
–
−
s
a
v
e
之
后
正
常
导
入
8
、
使
用
t
h
i
s
.
emit("function",param); 其中function为父组件定义函数,param为需要传递参数。此时我们要传过去的数据时我们在输入框中获取的数据.然后在父组件中子组件引用处添加v-on:function=“function1”。Function为之前子组件传递过来的函数 ,function1是父组件中将要用来处理接受子组件传的数据的函数。 6、获取API key和documentation 7、安装vue-resource获取http方法,需要安装对应的模块,使用npm install vue-resource –-save 之后正常导入 8、使用this.
emit("function",param);其中function为父组件定义函数,param为需要传递参数。此时我们要传过去的数据时我们在输入框中获取的数据.然后在父组件中子组件引用处添加v−on:function=“function1”。Function为之前子组件传递过来的函数,function1是父组件中将要用来处理接受子组件传的数据的函数。6、获取APIkey和documentation7、安装vue−resource获取http方法,需要安装对应的模块,使用npminstallvue−resource–−save之后正常导入8、使用this.http.get()参数为接口?key=key值&language=en&需要翻译的 文本
9、用v-text绑定用于展示的子组件,通过props传递。然后在展示界面中就可以展示了。
APP.vue
<template>
<div id="app">
<h1>在线翻译</h1>
<h5 class="text-muted"> 一个简单的小项目</h5>
<home v-on:forSubmit="translateText"> </home>
<Show v-text="translatedText"> </Show>
</div>
</template>
<script>
import Home from './components/Home.vue'
import Show from './components/Show.vue'
export default {
name: 'App',
data:function(){
return{
translatedText:""
}
},
components:{
Home,
Show
},
methods:{
translateText(text,language){
this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20200225T155334Z.701dfbcdcc42938f.d73683009a7d70e0b4e895fb62b8306143067f9d&lang='+language+'&text='+text).then((response)=>{
this.translatedText = response.body.text[0];
// console.log(response.body.text[0]);
})
// alert(text);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Home.vue
<template>
<div class="row" id="translate">
<div class="col-md-6 col-md-offset-3">
<form class="well from-inline" v-on:submit="forSubmit">
<input class="form-control" type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
<select class="form-control" v-model="language">
<option value="en">English</option>
<option value="ru">Russian</option>
<option value="ko">Korean</option>
<option value="ja">Japanese</option>
</select>
<input class="btn btn-primary" type="submit" value="翻译">
</form>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data(){
return {
textToTranslate:"",
language:""
}
},
methods:{
forSubmit(e){
// alert(this.textToTranslate);
e.preventDefault();
this.$emit("forSubmit",this.textToTranslate,this.language);
},
// created(){
// this.language="en";
// }
}
}
</script>
<style scoped>
</style>
Show.vue
<template>
<div id="Show">
<h2>{{translatedText}}</h2>
<!--<h2>测试</h2>-->
</div>
</template>
<script>
export default {
name: "Show",
props:[
'translatedText'
]
}
</script>
<style scoped>
</style>