Vue 组件_html-js-css

概述组件: 页面上的任何一个部分都是组件好处:复用灵活组成： html + css html + css + js 组件创建的方式全局组件 Vue.component 参数1:组件的名称如果需要使用的时候则当做标签使用即可参数2:组件的配置项对象 : new Vue中的配置项有什么东西。这个配置项里面就有什么东西唯一不同的是这个配置项中多了一个属性叫做template 另外组件: 页面上的任何一个部分都是组件好处:复用灵活组成： 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 >                <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>