首先我們在 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.如果存在子/父控件的概念的話，一定要先初始化/加載子控件 。
效果如下：
