Program:
App.vue:
Demo.vue:
main.js:
Output:
App.vue:
<template>
<div id="app">
<h1> Hello There! </h1>
<students></students>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
h1{
color:aqua;
}
</style>
Demo.vue:
<template>
<div>
<h1> Heading of Demo </h1>
<p v-for="student in students">
{{ student }}
</p>
</div>
</template>
<script>
export default {
data () {
return {
students: ['Tom', 'John', 'Rob']
}
}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
main.js:
import Vue from 'vue'
import App from './App.vue'
import Demo from './Demo.vue'
Vue.component('students',Demo);
new Vue({
el: '#app',
render: h => h(App)
})
Output:
