VUE快速入门03-VUE组件
组件 (Component) 是 Vue.js 最强大的功能之一,使用组件化方式开发,可以封装可重用的代码,减少重复劳动
接下来,我们来注册一个组件
语法Vue.component(tagName, options)
注册组件
Vue.component('component-a', {
template: '<div>component-a</div>'
})
<div id="app">
<component-a></component-a>
</div>
// 创建根实例
new Vue({
el: '#app'
})
利用注册组件进行数组遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<aaa v-for=" item in items" v-bind:baba="item"></aaa>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component("aaa",{
props:['baba'],
template:'<h1>{{baba}}</h1>'
});
let vm= new Vue({
el: "#app",
data:{
items:['java','php','html','python']
}
});
</script>
</body>
</html>