4.0、Vue组件讲解
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vuetest4</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app1">
<hkl v-for="item in items" v-bind:canshu="item"></hkl>
<!-- <h1 v-for="item in items">{{item}}</h1>-->
</div>
<script>
Vue.component("hkl",{
props: ['canshu'],
template: "<li>{{canshu}}</li>"
});
var vm = new Vue({
el:"#app1",
data:{
items: [
"java",
"前端",
"后端"
]
},
});
</script>
</body>
</html>
组件是什么？
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，根JSTL的自定义标签、Thymeleaf的th:fragment等框架有着异曲同工之妙。通常一个应用会以一课嵌套的组件树的形式来组织。
注意：给组件取名的时候，不要取语言中已经定义过、或者说已经存在的名字，否则无法生效!!!
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
