首页 > > 网页制作 > css >

vuejs组件

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

一、什么是组件?

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

总结:

   组件是用来完成特定功能的一个自定义的HTML标签

 例如:

<body>
<mytag></mytag>
</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>