养成一个习惯,components下的组件,首字母都大写,组件名是什么,class名,name名就是什么
这个时候写好User.vue文件
<template>
<div class="user">
<ul>
<li v-for:"user in user">{{ user }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'user'
data () {
return {
users:["day1","day2","day3"],
}
}
}
</script>
<style scoped>
</style>
但是这个时候页面是一片空白,因为App.vue文件并没有和User.vue文件关联上,关联上有两种方式
1.全局注册组件
在main.js里面加两句话
import User from './components/User'
Vue.component("user",User);
这样,任何一个文件都可以调用User这个组件了,只要调用user,就相当于调用User这个组件
然后回到App.vue文件,在第一部分template模板那里当成标签展示
<user></user>
这样就可以显示出来了,但是一般来说,基本上所有项目都不会采用全局注册这个方法,因为会导致所有都可以访问,一般采用的是第二种方法,局部注册组件
2.局部注册组件
把刚刚main.js加的两句话删掉,然后因为是想在App.vue中调用,所以直接在这个文件内引入就好
在行为逻辑第二个版块script版块中首先先引入
import User from './components/User'
然后,为了可以调用,在vue中注册组件
export default {
name: 'App',
components:{
"user":User}
}
这里有两种写法,可以写
"user":User
也可以直接写
User