当前位置: 萬仟网 > IT编程>网页制作>CSS > vuejs组件

vuejs组件

2019年07月12日 16:07  | 萬仟网IT编程  | 我要评论

一、什么是组件?

    组件 (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>

 

 

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com