Vue Learning – Getting Started – Components

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--1.component --> 
    >myname<</myname><br/>


    <!--2.Component--> 
    <!--Component:The value passed to the component:props v-bind:propdata="item binds each day's data to the prodata in props" --> 
    < myname2  v -for = "item in items"  v-bind:propdata = "item" > </ myname2 >

</div>

< script > //1. Component --> //Define a vue component component--myname as its name // Extension: There are <template><template> in vue files because their component name is template, which is Here myname 
    Vue.component( "myname" ,{
     template : '<h1>My component name is myname</h1>>'



    });

    //2.Component --> 
    //Components pass parameters 
    Vue.component( "myname2" ,{
         props :[ 'propdata' ],
         template : '<h1>{{propdata}}</h1>>'
    });



    var vm= new Vue({
         el : "#app" ,
         data : {
             items :[ 'software engineering' , 'information technology' , 'e-commerce management' , 'software testing' ]
        },
        //The method must be defined in the methods object of vue!
        methods:{},

    });
</script>

</body>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *