03 组件

最新推荐文章于 2025-08-04 20:59:31 发布

转载最新推荐文章于 2025-08-04 20:59:31 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/venicid/p/11553288.html

文章标签：

#javascript #ViewUI

1、组件

官网 https://cn.vuejs.org/v2/guide/components-registration.html

1、认识组件

2、组件的创建与复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--组件的复用  -->
        <Vheader></Vheader>
        <Vheader></Vheader>
        <Vheader></Vheader>
    </div>


    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">
    
        //组件的创建
        Vue.component('Vheader',{
            //一定是函数 必须要有返回值
            data:function(){
                return{
                    // 必须要return，哪怕是空对象
                }
            },
            template:`  <div class="header">
                            <div class="w">
                                <div class="w-l">
                                    <img src="./images/logo.gif" alt="">
                                </div>
                                <div class="w-r">
                                    <button>登录</button>
                                    <button>注册</button>
                                </div>
                            </div>
                        </div>`

        })


        // vue实例
        var app = new Vue({
            el: "#app",
            data:{

            },
            computed:{

            },
            methods:{

            }
        })
    
    </script>
</body>
</html>