Vue 2 入门学习笔记7.组件
- 本系列文章为
laracasts.com的系列视频教程 ——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。- 视频源码地址：github.com/laracasts/Vue-Forms
- 项目初始版本为
Vue 2.1.3，教程还在更新中。
本节说明#
- 对应第 7 小节：Components 101
本节内容#
本节我们开始学习组件。组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。我们来创建一个组件：
main.js
Vue.component('task',{
template:'<li><slot></slot></li>'
});
new Vue({
el:'#root'
})Vue 自定义的 <slot> 元素可以让我们向一个组件传递内容：
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root">
<task>Go to work</task>
<task>Go to bank</task>
<task>Go to store</task>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>最终效果：
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：