組件:
頁面上的任何一個部分都是組件
好處:復用 靈活
組成：
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>