Quick Look @ Vue.js Part III - My First Component

Brett M. Nelson - Wednesday, March 8, 2017

Before we get going remember we have already started a Vue.js app and added some content to that app. Let's clean up some of our markup with a custom component

Update app.js

We are going to create a global component in out app.js file. At the top before the line var app = new Vue({ we are going to add Vue.component() to register our component before the app tries to use it.

Vue.component() takes an identifier or tag that we will use to place the component and an options object. In our simple case the options object will consist of a props property and a template property.

The identifier I'm going to use is task-list but you can use what you choose, just keep in mind that this is the tag you will use in the markup for the component you create.

For the props property it takes an array of names of properties to bind to the component. For now we only need to get access to the tasks in our component so I'll just have one name, tasks, in my props array.

For the template lets copy our everything inside the <ul> that we created in the index.html last time, this will be the markup the component uses.

All together now:

New and Improveded app.js

Vue.component('task-list', { props: ['tasks'], template: `

•       </p>
      </div>
    </div>
  </li>
  

var app = new Vue({ el: '#app', data: { message: 'Hello WIPDeveloper.com!', tasks: [ { title: 'test task one', complete: true, description: 'this is a task that is complete' },

  {
    title: 'test task two',
    complete: false,
    description: 'this is a task that is not complete'
  }
\]

} })

Now we need to make our index.html take advantage of our little component.

Update index.html

Delete the <ul> and everything inside it. Now add a tag for you new component. I named my task-list so I will create a tag <task-list> tag. To bind the tasks to the component use the v-bind:task="tasks" as a property on your components tag to bind the tasks from the app to the tasks of the component.

More Updated index.html