1. Vue – 组件
组件是可复用的Vue实例, 说白了就是一组可以重复使用的模板
1.1 第一个Vue组件
注意:在实际开发中,我们并不会用以下方式开发组件,而是采用vue-cli创建,vue模板文件的方式开发,以下方法只是为了让大家理解什么是组件。
1.1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<pan></pan>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
//先注册组件
Vue.component("pan", {
template: '<li>Hello</li>'
});
//再实例化Vue
var vm = new Vue({
el: "#app",
});
</script>
</body>
</html>
1.1.2 运行结果
1.1.3 小结
- Vue.component():注册组件
- pan:自定义组件的名字
- template:组件的模板
1.2 使用props属性传递参数
像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用props属性了
注意:默认规则下props属性里的值不能为大写;
1.2.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--组件:传递给组件中的值:props-->
<pan v-for="item in items" v-bind:panh="item"></pan>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
//定义组件
Vue.component("pan", {
props: ['panh'],
template: '<li>{{panh}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
items: ["java", "Linux", "前端"]
}
});
</script>
</body>
</html>
1.2.2 运行结果
1.2.3 小结
v-for="item in items":
遍历Vue实例中定义的名为items的数组。v-bind:panh="item":
将遍历的item项绑定到组件中props定义名为item属性上;= 号左边的panh为props定义的属性名,右边的为item in items 中遍历的item项的值