vuejs组件

2019-08-14 09:46:34来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、什么是组件?

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

总结:
   组件是用来完成特定功能的一个自定义的HTML标签
 例如:
  1. <body>
  2.     <mytag></mytag>
  3. </body>
注意: mytag就是一个组件, 该组件必须通过Vue为mytag赋予一定的功能

二、组件的作用

组件是对特点功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.

组件分类:

全局组件和局部组件
注意:组件的template模板必须有且只有一个根标签(所有内容必须由一个标签套起来)。
 

三、全局组件

1.全局组件的语法:
   Vue.component("自定义标签的名字",{配置对象})
2. 全局组件的特点:    2.1  全局组件可以在任何被挂着的标签中使用.
   2.2  全局组件的配置对象中必须包含template属
3. 全局组件应用场景    如果该组件的特定功能需要在任何被Vue实例挂载的标签中使用. 推荐使用全局组件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--引用全局组件:方式一-->
            <compon1></compon1>
        </div>
        <div id="app2">
            <!--引用全局组件:方式二-->
            <compon2></compon2>
        </div>
        
        <div id="app3">
            <!--引用全局组件:方式三-->
            <compon3></compon3>
        </div>
    <!-- ==============================定义组件模板==================================== -->    
        <!--方式二:定义模板(注意:如果使用script标签,建议加上type="text/template")-->
        <script type="text/template" id="compon2">
            <!--这个div是根标签-->
            <div>
                <h1>我是网页</h1>
                <div>
                    天天向阳,自强不息
                </div>
            </div>
        </script>
        
        <!--方式三:定义模板(建议使用)-->
        <template id="temp">
            <!--这个div是根标签-->
            <div>
                <h1>我是网页2</h1>
                <div>
                    上天入地
                </div>
            </div>
        </template>
        <!--开发版本:vue.js(vue.js代码网址:https://cn.vuejs.org/v2/guide/installation.html)-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
    /* =======================定义全局组件=================================== */
            //定义全局组件(方式一)
            Vue.component("compon1",{
                template:"<h1> 快过来啊 </h1>"
            })
            //定义全局组件(方式二)
            Vue.component("compon2",{
                template:"#compon2"
            })
            //定义全局组件(方式三)
            Vue.component("compon3",{
                template:"#temp"
            })
    /* =======================定义vue实例=================================== */        
            //挂载vue实例(方式一)
            var app= new Vue({
                el:"#app",
            })
            
            //挂载vue实例(方式二)
            var app2= new Vue({
                el:"#app2",
            })
            
            //挂载vue实例(方式三)
            var app3= new Vue({
                el:"#app3",
            })
        </script>
    </body>
</html>

 

四、局部组件-是定义在某个vue实例上的

  1. 局部语法:
     var app = new Vue({
        el: "#app",
        data: {},
        components : {
            "局部组件的名字1" : {组件的配置对象}
              "局部组件的名字2" : {组件的配置对象}
        }
    });

  2. 局部组件的特点
     局部组件只能够在所挂载的标签中使用.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--引用局部组件:方式一-->
            <compon1></compon1>
            <hr />
            <!--引用局部组件:方式二-->
            <compon2></compon2>
            <hr />
            <!--引用局部组件:方式三-->
            <compon3></compon3>
        </div>
        
    <!-- ==============================定义组件模板==================================== -->    
        <!--方式二:定义模板(注意:如果使用script标签,建议加上type="text/template")-->
        <script type="text/template" id="compon2">
            <!--这个div是根标签-->
            <div>
                <h1>我是网页</h1>
                <div>
                    天天向阳,自强不息
                </div>
            </div>
        </script>
        
        <!--方式三:定义模板(建议使用)-->
        <template id="temp">
            <!--这个div是根标签-->
            <div>
                <h1>我是网页2</h1>
                <div>
                    上天入地
                </div>
            </div>
        </template>
        <!--开发版本:vue.js(vue.js代码网址:https://cn.vuejs.org/v2/guide/installation.html)-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
    
    /* =======================定义vue实例=================================== */        
            //挂载vue实例(方式一)
            var app= new Vue({
                el:"#app",
                components:{
                    //定义局部组件(方式一)
                    "compon1":{
                        template:"<h1> 快过来啊 </h1>"
                    },
                    //定义局部组件(方式二)
                    "compon2":{
                        template:"#compon2"
                    },
                    //定义局部组件(方式三)
                    "compon3":{
                        template:"#temp"
                    },
                }
            })
            
        </script>
    </body>
</html>

 

五、 组件中的数据必须是函数

1. 组件中数据的定义
   语法:
      "组件的名字":{
            template: "",
            data : function(){
                return {
                  键1:值1,
                  键2:值2
                }
            }
       }
2.注意事项:     1、data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码。     2、只能够在各自的组件模板中使用各自的组件中的data数据。     3、Vue对象中的数据不能够在组件中使用,组件的数据也不能够在挂载的html标签上使用。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--这里引用的message是vue实例里的data数据-->
            {{message}}
            <!--引用全局组件-->
            <compon1></compon1>
            
        </div>
        
    <!-- ==============================定义组件模板==================================== -->    
        
        <!--定义模板(建议使用)-->
        <template id="temp">
            
            <!--这个div是根标签-->
            <div>
                <h1>我是网页2</h1>
                <div>
                    <!--只能够在各自的组件模板中使用各自的组件中的data数据-->
                    上天入地{{message}}
                </div>
            </div>
        </template>
        <!--开发版本:vue.js(vue.js代码网址:https://cn.vuejs.org/v2/guide/installation.html)-->
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
    
    /* =======================定义vue实例=================================== */        
            //挂载vue实例(方式一)
            var app= new Vue({
                el:"#app",
                data:{
                    message:"哈哈哈哈啊哈!"
                },
                components:{
                    //定义局部组件(方式一)
                    "compon1":{
                        template:"#temp",
                        data:function(){
                            return {
                                message:"武二郎先生"
                            }
                        }
                    }
                    
                }
            })
            
        </script>
    </body>
</html>

 

 

 


原文链接:https://www.cnblogs.com/wanghj-15/p/11169582.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue初级使用

下一篇:VueRouter认识