简介：
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件1</title>
</head>
<body>
<div class="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-component',{
template:`
<div>
<h1>这是我的第一个组件</h1>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
<a href="#">hello Vue</a>
</div>
`
})
new Vue({
el:'.app'
})
</script>
</body>
</html>
小撇号的使用：
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小撇号的使用</title>
</head>
<body>
<script>
var uname="jack";
var age=18;
console.log("我的名字叫"+uname+","+"我已经"+age+"岁了");
console.log(`我的名字叫${uname},我已经${age}岁了`);
</script>
</body>
</html>
组件还分为全局组件和局部组件：
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件1</title>
</head>
<body>
<div class="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script src="vue.js"></script>
<script>
// 全局组件
// Vue.component('my-component',{
// template:`
// <div>
// <h1>这是我的第一个组件</h1>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// <a href="#">hello Vue</a>
// </div>
// `
// })
new Vue({
el:'.app',
// 局部组件
components:{
'my-component':{
template:`
<div>
<h1>这是我的第一个组件</h1>
<a href="#">aaaaaaa</a>
</div>
`
}
}
})
</script>
</body>
</html>
传值：
prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传值</title>
</head>
<body>
<div class="itany">
<father></father>
</div>
<script src="vue.js"></script>
<script>
Vue.component('father',{
template:
`
<div>
<p>我是父元素</p>
<child v-bind:number='num'></child>
<button @click="add">点击+1</button>
</div>
`,
data:function(){
return{
num:1
}
},
methods:{
add:function(){
this.num++
}
}
})
Vue.component('child',{
props:['number'],
template:
`
<div>
<p>我是子元素</p>
<a href="#">{{number}}</a>
</div>
`
})
new Vue({
el:".itany"
})
</script>
</body>
</html>
小练习：
1.水果列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水果列表</title>
</head>
<body>
<div class="itany">
<father></father>
</div>
<script src="vue.js"></script>
<script>
Vue.component('father',{
template:`
<div>
<child v-bind:top="lis"></child>
<ban v-bind:list1="arr"></ban>
</div>
`,
data:function(){
return{
arr:["apple","banner",'orange'],
lis:"水果列表"
}
}
})
// 子数组
Vue.component('child',{
props:["top"],
template:`
<h3>{{top}}</h3>
`
})
Vue.component('ban',{
props:["list1"],
template:`
<ul>
<li v-for="value in list1">{{value}}</li>
</ul>
`
})
new Vue({
el:".itany"
})
</script>
</body>
</html>
2.删除增加水果列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加水果列表</title>
</head>
<body>
<div class="itany">
<father></father>
</div>
<script src="vue.js"></script>
<script>
Vue.component('father',{
template:`
<div>
<input type="text" v-model="inp">
<button @click="btn">添加</button>
<child v-bind:list="arr"></child>
</div>
`,
data:function(){
return{
arr:["芒果","葡萄","荔枝"],
inp:""
}
},
methods:{
btn:function(){
this.arr.push(this.inp);
this.inp="";
}
}
})
// 子组件
Vue.component('child',{
props:['list'],
template:`
<ul>
<li v-for="(value,index) in list">
{{value}}
<button @click="btn2(index)">删除</button>
</li>
</ul>
`,
methods:{
btn2:function(ind){
this.list.splice(ind,1)
}
}
})
new Vue({
el:".itany"
})
</script>
</body>
</html>
网友评论