vue 가족통 구성 요소 기초(7)

// scriptVue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '      ： {{ count }}'});new Vue({
    el: '#app'});// html  

// scriptnew Vue({
    el: '#app',
    components:{
        "button-inner":{
            data: function() {
                return {
                    inner: 0
                }
            },
            template: '      ： {{ inner }}'
        }
    }});// html  

// scriptnew Vue({
        el: '#app',
        components:{
            "button-props":{
                template:`
  1： {{ here }}:---  2： {{fromHere}}
`,
                props:['here', 'fromHere']
            }
        }
    });// html  

// scriptnew Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        components:{
            "button-props":{
                template:`
  1： {{ here }}:---  2： {{fromHere}}
`,
                props:['here', 'fromHere']
            }
        }
    });// html  

// script//    var city = {
    template:`
Sichuan of China
`}//    var parent = {
    template:
        `

            
 Panda from China!
            
        
`,
    components:{
        "city": city    }}//    new Vue({
    el: '#app',
    //       
    components:{
        //     
        "parent": parent    }});// html  

html>
    
    
    

    
    

    
    

    
    

    
    

    
    

    //       
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">      ： {{ count }}</button>'
    });

    //    
    var city = {
        template:`<div>Sichuan of China</div>`
    }
    //    
    var parent = {
        template:
            `<div>
                <p> Panda from China!</p>
                <city></city>
            </div>`,
        components:{
            "city": city        }
    }

    //    
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        //       
        components:{
            "button-inner":{
                data: function() {
                    return {
                        inner: 0
                    }
                },
                template: '<button v-on:click="inner++">      ： {{ inner }}</button>'
            },
            //   
            "button-props":{
                template:`<div style="color:red;">  1： {{ here }}:---  2： {{fromHere}}</div>`,
                props:['here', 'fromHere']
            },
            //     
            "parent": parent        }
    });