xxxxxxxxxx
// Create Vue application
const app = Vue.createApp( )
// Define a new component called todo-item
app.component('todo-item', {
template: `<li>This is a todo</li>`
})
// Mount Vue application
app.mount( )
xxxxxxxxxx
//-------------------- This is your main vue file
<template>
<h1>Your File Name Title</h1>
<p>Random text</p>
// now import your component here --- see below comments to find the component code
<ComponentName />
</template>
<script>
import ComponentName from '/componentlocation'
export default{
name: 'MainFile',
components: {
ComponentName
}}
</script>
//------------ This is the component code in a different file
<template>
<h1>This is the component</h1>
</template>
<script>
export default{
name: 'ComponentName'
}
</script>
xxxxxxxxxx
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
xxxxxxxxxx
Vue.component('my-component', {
components: {
ProductComponent, ReviewComponent
},
props: {
message: String,
product: Object,
email: {
type: String,
required: true,
default: 'none'
validator: function (value) {
}
}
},
data: function() {
return {
firstName: 'Vue',
lastName: 'Mastery'
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function (value, oldValue) { }
},
methods: { },
template: '<span>{{ message }}</span>',
})