組件(component)：
組件化開(kāi)發(fā) 組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼 ，可以被連續(xù)調(diào)用。
分為
1.全局組件
2.局部組件
注： 組件名不可以使用已經(jīng)存在的html元素 組件中的data數(shù)據(jù)是一個(gè)函數(shù)，并且要有一個(gè)返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-component",{
template:`
<ul>
<li>首頁(yè)</li>
<li>關(guān)于</li>
<li>我們</li>
</ul>
`
})
new Vue({
el:'#app',
/* components:{
"my-component":{
template:`
<p>你好</p>
`
}
}*/
})
</script>
</body>
</html>
q.png
組件的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>Hello</h1>
<my-child ></my-child>
</div>
`
})
Vue.component("my-child",{
template:`
<p>你好</p>
`
})
new Vue({
el:"#app" ,
})
</script>
</body>
</html>
把子元素嵌套在父元素中 顯示出父元素與子元素的值
w.png
組件中data是一個(gè)函數(shù)，并且要有一個(gè)返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<m></m>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("m",{
template:`
<div>
<h1>{{mess}}</h1>
<button @click="add">點(diǎn)擊</button>
</div>
`,
data:function(){
return{
mess:"你好"
}
},
methods:{
add:function(){
alert("aa")
}
}
})
new Vue({
el:"#app",
})
</script>
</body>
</html>
R.png
組件的嵌套父給子傳(用prop屬性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<my-tit v-bind:tit='title'></my-tit>
<my-fruit v-bind:fruList='list'></my-fruit>
</div>
`,
data:function(){
return{
list:['apple','pear','banana'],
title:'水果列表'
}
}
})
Vue.component('my-tit',{
props:['tit'],
template:`
<h2>{{tit}}</h2>
`
})
Vue.component('my-fruit',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:"#app" ,
})
</script>
</body>
</html>
O.png
