首先我们在 src目录下新建一个目录 叫”component”,建一个mycomponent.vue文件，然后也让他打2句话吧
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<div id=
"mycomponent"
>
<h1>我是第一个自定义控件</h1>
<p>{{ msg }}</p>
</div>
</template>
<script type=
"text/javascript"
>
export
default
{
data(){
return
{
msg :
"hi i am wjj"
}
}
}
</script>
|
然后在我们的app.vue里调用他
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template>
<div id=
"app2"
>
<p>{{ message }}</p>
<input v-model=
"message"
></input>
<mycomponent></mycomponent>
</div>
</template>
<script>
import mycomponent from
'./component/mycomponent.vue'
export
default
{
name:
'app2'
,
data () {
return
{
message:
'Hello Vue.js!'
}
},
components: { mycomponent }
}
</script>
|
这里 有几个知识点
1.Vue的导入操作是在<script></script>标签里。
2.如果存在子/父控件的概念的话，一定要先初始化/加载子控件 。
效果如下：
