1.先在components目录下创建组件hello01.vue
- 主要是
<template>
中的视图层v - 并定义M中的data数据;
<template>
<div class="p1">
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: "hello01",
data(){
return{
msg:"静静,开始学习vue啦"
}
}
}
</script>
<style scoped>
</style>
2.在根组件APP.vue
中使用hello01.vue
子组件
主要有一下3步:
- 在
<script>
中 导入子组件; - 在
<script>
的components中声明子组件; <template>
中使用子组件
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!-- 3.使用子组件-->
<hello01/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
//1.导入子组件
import Hello01 from "./components/hello01";
export default {
name: 'app',
components: {
//2.声明子组件
Hello01,
HelloWorld
}
}
</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>
3.启动: