一、第一个Vue组件
1.1、什么是组件
组件是可复用的Vue 实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragrent 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
例如，有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发，以下方法只是为了更好的理解什么是组件。
二、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/Vue.js"></script>
</head>
<body>
<div id="app">
<massimo v-for="item in items" v-bind:mas="item"></massimo>
</div>
<script>
//定义一个Vue组件component
Vue.component("massimo",{
props: ['mas'],
template: '<li>{{mas}}</li>'
});
var vm = new Vue({
el:"#app",
data: {
items: ["Java","Linux","前端"]
}
});
</script>
</body>
</html>
三、效果
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
