组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

组件可以分为全局组件和局部组件
一、定义一个全局组件

<body>
    <div id='itany'>
        <my-component></my-component>
    </div>
<script src='js/vue.js'></script>
<script type="text/javascript">
    Vue.component('my-component',{
        template:`
            <div>
                <h1>这是全局组件</h1>
                <p>全局组件全局组件全局组件全局组件全局组件全局组件全局组件</p>
            </div>
        `
    })
    new Vue({
        el:'#itany'
    })
</script>
</body>

二、定义一个局部组件

<body>
    <div id='itany'>
        <my-hello></my-hello>
    </div>
<script src='js/vue.js'></script>
<script type="text/javascript">

    new Vue({
        el:'#itany',
        data:{
            msg:''
        },
        components:{
            'my-hello':{//组件名记得加引号
                template:`
                   <h1>我是一个局部组件</h1>
                `
            }
        }
    })
</script>
</body>

三、全局组件中的数据

<body>
    <div id='itany'>
        <my-hello></my-hello>
    </div>
<script src='js/vue.js'></script>
<script type="text/javascript">
    Vue.component('my-hello',{
        template:`
           <div> 
                <h1>{{msg}}</h1>
                <p>这是全局组件这是全局组件这是全局组件这是全局组件这是全局组件</p>
           </div>
        `,
        data:function(){
            return {
                msg:'全局组件'
            }
        }

    })
    new Vue({
        el:'#itany'
    })
</script>
</body>

全局组件中也是可以存放数据的，但是要注意的是组建中的数据必须是一个函数，而且必须要有一个返回值

四、局部组件中的数据

<body>
    <div id='itany'>
        <my-component></my-component>
    </div>
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:'#itany',
        components:{
            'my-component':{
                template:`
                   <div> 
                        <h1>全局组件</h1>
                        <p>{{msg}}</p>
                   </div>
                `,
                data:function(){
                    return{
                        msg:'这是全局组件这是全局组件这是全局组件这是全局组件这是全局组件'
                    }
                }
            }
        }
    })
</script>
</body>

五、引用模板
如果组件模板中的内容太多，我们就可以把组件中的内容放到template模板中，在组件中引用模板的id即可

<body>
    <div id='itany'>
        <my-hello></my-hello>
    </div>
    <template id='temp'>//模板标签
        <div>
            <h1>welcome to itany</h1>
            <ul>
                <li v-for='value in arr'>{{value}}</li>
            </ul>
        </div>
    </template>
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:'#itany',
        components:{
            'my-hello':{
                template:'#temp',//引用模板标签的id号
                data:function(){
                    return{  
                        arr:['香蕉','苹果','鸭梨']
                    }
                }
            }
        }
    })
</script>
</body>