Creating the component vue js 3

 

Creating the component vue js 3

========================================================================

//App.Vue

<template>

 <h1>{{msg}}</h1>

</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'

export default {

  data(){

    return{

      msg: "hello vue js 3"

    }

  }

}

</script>

//index.html

 <div id="app"></div>

....................

//TestCom.vue

<template>

<div>

<h1>contact info</h1>

<p>{{name}}</p>

</div>

    

    

</template>

<script>

export default {

  data(){

      return{

          name: "zakir bd"

      }

  }

}

</script>

//App.vue

<template>

<div class="design">

   <h1>{{msg}}</h1>

<Test-Com></Test-Com> 

</div>

</template>

<script>

 import TestCom from './components/TestCom.vue'

export default {

  data(){

    return{

      msg: "hello vue js 3"

    };

  },

  components: {

    TestCom         //component declare

  }

  

}

</script>

<style  scoped>

.design{

  border: 2px solid red;

  width: 200px;

  height: 200px;

}

</style>

.......................