一、前言
本文的主要目的是学习如何在html文件中定义并使用组件。
主要内容是定义一个用来展示文本的组件,在 <ol>
标签内部循环展示一个列表。
学习本文前需要掌握html基础,vue实例,v-for指令。
二、示例
1、流程
- 引入vue.js文件
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
- 定义组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
todo-item是组件的名字,props中声明从外部传入组件中的值,template定义组件的内容和样式。
- 创建vue实例
var vm = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '牛肉' }
]
}
});
数组groceryList是需要展示的数据。
- 使用组件
<todo-item v-for="item in groceryList" :key="item.id" :todo="item"></todo-item>
定义的组件用标签的形式使用,示例:<todo-item></todo-item>
。v-for指令循环数组的每一项item,将item的值传给todo-item组件的todo变量。
2、完整代码
<!DOCTYPE html>
<html>
<head>
<title>使用组件示例</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ol>
<todo-item v-for="item in groceryList" :key="item.id" :todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
var vm = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '牛肉' }
]
}
});
</script>
</body>
</html>
3、目录结构
|
|--html // 保存html文件
| |--index.html // 示例起始页
|--js // 保存js文件
| |--vue.js // vue框架js文件
三、总结
- 使用Vue.component()定义组件。
- 用标签的形式使用组件。