Vue 组件

组件:
页面上的任何一个部分都是组件
 
好处:复用 灵活
 
组成：
html + css
html + css + js
 
组件创建的方式
全局组件 Vue.component
参数1:组件的名称 如果需要使用的时候则当做标签使用即可
参数2:组件的配置项 对象 :
new Vue中的配置项有什么东西。这个配置项里面就有什么东西
唯一不同的是这个配置项中多了一个属性叫做template
另外在组件中data不在是一个对象了而是一个函数，这个函数必须返回一个对象
 
局部组件 components
 
在vue中简单的来说一个组件其实就是一个小型的Vue实例
 
组件的名称规范:
1、组件的名称首字母必须大写
2、不允许与html标签名称一样
 
一个文件变成一个组件?
文件的布局
 
template: 写html
 
script js
 
style css
 
单文件组件: .vue文件
 
<!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>
    <style>
        *{margin:0;padding:0}
        ul,li{
            list-style: none;
        }
        .nav{
            height: 50px;
            background: #000;
            padding: 0 40px;
        }
        .nav>ul{
            width: 100%;
            height: 100%;
            display: flex;
        }
        .nav>ul>li{
            height: 50px;
            line-height: 50px;
            color:#fff;
            font-size:16px;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <navcom></navcom>
        <banner></banner>
        <main></main>
    </div>
 
</body>
</html>
<script src="vue.js"></script>
<script>

    var config = {
        //当前组件的模板
        template:`
            <div class="nav">
                <ul>
                    <li v-for="(item,index) in navs" @click="handle(index)">{{item}}</li>
                </ul>    
            </div>
        `,
        data(){
            return {
                navs:["公司简介","产品介绍","需求文档","关于我们"]
            }
        },
        methods:{
            handle(index){
                alert(index)
            }
        },
        computed:{

        },
        watch:{

        },
        beforeCreate(){
            console.log("我是组件里面的生命周期")
        }
    }


    //  Vue.component("navcom",config)



    var vm = new Vue({
        el:"#app",
        components:{
           "navcom":config
        }
    })

    /*
        组件:
            页面上的任何一个部分都是组件

            好处:复用 灵活

            组成：
                html + css    
                html + css + js


        组件创建的方式
            全局组件 Vue.component
                参数1:组件的名称  如果需要使用的时候则当做标签使用即可
                参数2:组件的配置项  对象 :
                     new Vue中的配置项有什么东西。这个配置项里面就有什么东西
                     唯一不同的是这个配置项中多了一个属性叫做template
                     另外在组件中data不在是一个对象了而是一个函数，这个函数必须返回一个对象


            局部组件 components


            在vue中简单的来说一个组件其实就是一个小型的Vue实例


        组件的名称规范:
            1、组件的名称首字母必须大写
            2、不允许与html标签名称一样


        一个文件变成一个组件?   
            文件的布局

            template: 写html

            script  js

            style   css

            
        单文件组件:   .vue文件

    */
</script>

 

posted @ 2019-07-22 10:40  前端小菜鸟吖  阅读(731)  评论(0)    收藏  举报