- Learn by example
Make an RPG
Vue Implementations

Example of Vue Components

Think of the Vue.component name as a tag that can be used in HTML.

Vue.component('todo-item', { template: '<li>my text.</li>' });
<div id="app-7"> <ol> <todo-item></todo-item> <todo-item></todo-item> <todo-item></todo-item> </ol> </div>

Notice, in this example, how it says "todo-item" both in the Vue.component definition and the HTML code below.

Look at this groceryList example: the todo-item tag v-for says to iterate across the groceryList you find in the app7.groceryList.

<div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="" ></todo-item> </ol> </div>
window.onload = function () { Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }); var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Fruits' } ] } }); };

Components help you separate your code to reduce dependencies. You can reuse them in your markup.

In the next lesson, we will learn about Vue what do props do

Get the Latest Tutorial Updates
<< >>