In our template, we’re mainly using the double curly braces syntax and the v-for directive. The Vue templating syntax provides us with different mechanisms of accessing the underlying instance data, such as interpolations, directives, and so on. ![]() This element is bound to that instance’s data, which allows us to reference the data directly from the template. The HTML element specified by id=“board” is the DOM element managed by the Vue root instance we created earlier. In Vue we use an html-based template syntax. Once the root instance is in place, we can create a template to display its data. In the options object passed to the instance, we use el to specify the DOM element the instance is plugged into and data to describe the data that will be handled within the app. Next, we will create a Vue instance that will serve as root of our application. ⚠️ Please note that in this article as well as in the sample application we are using: To get started, we need to prepare the entry html file and load Vue.js and Bulma libraries. You can find the complete source code on JSFiddle. The cards display the team member assigned to complete each task and the number of hours needed to complete that task. The cards that show each task are arranged vertically by status: Open, In-Progress, and Completed. I chose Bulma for the CSS framework because it’s written by Jeremy Thomas, author of Web Design in 4 Minutes.īelow is a screenshot of what the finished app will look like.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |