组件:
页面上的任何一个部分都是组件
好处:复用 灵活
组成：
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>