组件component

<!--组件component可分为局部组件和全局组件。
   组件可以扩展HTML元素，封装可重用的代码。
   写组件应注意：
   1.组件名不可以使用已经存在html的标签
   2.写模板（template）时所有元素放入一个父元素中
   3.组件中data的数据是一个函数，并且要有一个返回值-->!
   <div class="box">
       <mes></mes>
   </div>
    <script src="js/vue.js"></script>
    <script>
        //全局组件
        //模板：Vue.component("组件名",function(){
        //    template:``
        //})
        Vue.component("mes",{
            template:`
                <ul>
                    <li>hello vue</li>
                    <li>hello vue</li>
                    <li>hello vue</li>
                </ul>
            `
        })
        
        new Vue({
            el:".box"
        })
    </script>

QQ图片20180919144527.png

       <message></message>
   </div>
   <script src="js/vue.js"></script>
   <script>
       //局部组件
        // 格式：
        // new Vue({
        //     el:"",
        //     components:{
         //        message:{
         //            "template":``
         //        }
         //    }
        // })
        new Vue({
            el:".box",
            components:{
                message:{
                    "template":`
                        <ul>
                            <li>hello vue</li>
                            <li>hello vue</li>
                            <li>hello vue</li>
                        </ul>
                    `
                }
            }
        })
    </script>

QQ图片20180919144527.png

<!--组件中data的用法
      data在组件中是一个函数必须含有返回值return-->
      <div class="box">
          <message></message>
      </div>
      <script src="js/vue.js"></script>
      <script>
        Vue.component("message",{
            template:`
                <p>{{msg}}</p>
            `,
            data:function(){
                return{
                    msg:"hello vue"
                }
            }
        })
        new Vue({
            el:".box"
        })
    </script>

QQ图片20180919150346.png