在工程目录/src下创建component文件夹,并在component文件夹下创建一个myfirstcomponent.vue并写仿照App.vue的格式和前面学到的知识写一个组件。
<template>
<div id="myfirstcomponent">
<h1>I am a title.</h1>
<a>written by {{ author }}</a>
</div>
</template>
<script>
export default{
data(){
return{
author:"Hello minmin"
}
}
}
</script>
然后在App.vue使用组件(因为在index.html里面定义了<code><div id="app"></div></code>所以就以这个组件作为主入口,方便)
第一步,引入。在<script></script>标签内的第一行
import firstcomponent from'./component/myfirstcomponent.vue'
第二步,注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!
components:{firstcomponent,secondcomponent}
第三步,使用。
在<template></template>
内加上<firstcomponent></firstcomponent>
完成后代码:
最后查看完成后效果图,打开index.html;