Vue 3.0 Render

Posted on  by admin

In this article, you’ll learn the fundamentals of Vue.js. Even though the article uses Vue 3, the fundamentals apply to older Vue versions too. We’ll cover how to:. create a Vue application with Vue CLI. use conditional rendering. make use of dynamic CSS. handle user inputs and events.

  • use methods and computed properties.
  • use HTML attribute binding.
  • We’ll start by creating a skeleton application with the CLI.
  • The Vue command-line interface allows us to create and configure new Vue projects from scratch.
  • That is, instead of adding packages and configurations ourselves, the CLI does that for us.

Let’s install the Vue command-line interface. The tutorial assumes you don’t have Vue CLI installed on your machine. To install it, run the following command:. Alternatively, you can install it using Yarn as follows:.

Attribute Binding

Once you’ve run any of the above commands, the installation starts, and it will take a few seconds or minutes. Once the installation finishes, you can create projects with the following command:.

Once we’ve run the vue create command, we’ll be prompted with a handful of questions.

The purpose of these questions is to configure the project to suit our needs. Figure 1: The Vue CLI welcome screen. Figure 1 above shows the welcome screen we get when we run vue create your-project-name.

Reactive Data in the Composition API

We then have to choose between three different options:. create a default Vue 2 project. create a default Vue 3 project. manually select features. The first two options will install a default Vue project for us. However, we don’t want a default project. For this tutorial, we’ll manually select the features for our project. Once we choose the third option, we’ll get a series of questions. Figure 2 above illustrates what we see when we choose the third option — manually select features.

We can pick what features we need in our project, such as:. adding unit and E2E testing to our project. choosing a linter/formatter for the project.

adding options such as Vuex, TypeScript, Router and so on . After that, we’re prompted to choose a Vue version for our project.

  • Vue.nextTick
  • Vue.observable
  • Vue.version
  • For this tutorial, I recommend choosing Vue 3, as pictured below.
  • Figure 3: Choosing a Vue version in Vue CLI. Lastly, we’ll need to answer more questions based on the features we select in the first step, as shown earlier in Figure 2.
  • Before going further, I want to make sure we’re on the same page:.

Run vue create vue3-fundamentals in your terminal. Choose “manually select features”. Untick all features except Babel. For this tutorial, we don’t need any extra features. Choose Vue version 3. Choose “In dedicated config files” when it asks you where to place the config for Babel, and so on.

Don’t save the preset for future projects. After following the above steps, the project structure should look like the one in Figure 4 below. That’s it with the project configuration! Now we’re ready to work on it and learn Vue!

If you want to see a more comprehensive article about the CLI, check this Vue CLI article.

There are some things we don’t need in the application. First of all, go to src >components and delete the HelloWorld.vue component. Now go to the App.vue file and remove all the references of HelloWorld from the file.

Understanding the Vue 3 Component

Also, remove the image with the Vue logo. Lastly, modify the export default {} code block. See the complete code of App.vue below:.

Set up a title property and display it in the template. The first concept we’ll cover is how to render lists in a Vue application.

However, before we can do that, we need a list. Open the file App.vue and add the following array:. In the above code snippet, we added an array of objects. Each object represents an individual task, and each task contains the following:. an ID: we can identify each task by its unique ID. a name: it describes what the task is about. finished field: it represents whether the person finished the task or not. The next step is to loop over the array and render it on the page.

In Vue, we can loop over lists with the v-for directive. The v-for directive has the form of task in tasks, where each task represents an individual item in the array, and the tasks represents the array.

We can see the v-for directive in action in the code snippet below:. We can render each item or task using the Mustache notation. We use the Mustache notation by using those double curly braces.

At the moment, it only displays the ID and the name of the tasks. But we could also show whether it’s finished or not as follows:. However, we’ll use that field for other purposes later in the tutorial.

Customizing createText

If we save the code and run the application, we should see something as follows:.

Figure 5: List rendering in Vue with the v-for directive. You can see that the tasks are rendered on the page, and each one has an ID and a name.

You may have noticed the following bit of code:. It’s recommended we use the :key attribute when we loop over lists. The reason is so that each DOM element has a unique key. Thus, Vue can track each node’s identity to reuse and reorder existing elements. As a result, it also improves the performance of the application.

Usually, we use the item’s ID for the :key attribute, like in the above example. Check this gist to see how the App.vue file should look up to this point. There are occasions when we want to display something on the page based on a specific condition. Thus, we can use the v-if directive to render a piece of code based on a condition. The block of code is rendered only if the expression provided returns a truthy value.

For instance, in the application we’re building in this tutorial, we might want a Delete task button to show after we finish a task. Thus, we can delete a task when we’re done with it. Let’s add the Delete task button.

Go to the App.vue file and add the following code in the unordered list:. You can see the new div with the v-if directive. Its purpose is to check if the task is finished. If the task is completed, it shows the delete button. If the task isn’t finished, the button is hidden. Go and change the finished field on any task from the task array to true.

After that, refresh the application, and we should see the delete button. If you followed all the steps, this is what you should see:. Figure 6: Vue conditional rendering. The v-if directive is handy when we want to render something based on a condition.

Before moving on, it’s important to note that we can use v-else-if and v-else too. For instance, we could have something similar to this:.

Our First Renderer

You can see how powerful conditional rendering is. However, for this tutorial, we’re using only the v-if. Check this gist to see how the App.vue file should look up to this point. The next step is to handle the user input. First of all, go to the App.vue file and add the following HTML code under the application title:.

Last Touches

In the above code snippet, we add a text input that allows users to add new tasks. Also, you’ll note the v-model directive. The v-model directive enables us to create two-way binding between the input field and the application state.

(You can learn more about v-model in “Understanding the New Reactivity System in Vue 3”.).

  • Before we can try out the code, add the newTask field in the Vue instance as follows:.
  • If we run the application and type anything in the input field, we’ll see the text appearing under the input field.
  • Figure 7: Vue handling user input. In the code above, we added

    {{ newTask }}

    in the HTML code, which represents the “newTask” field.

Thus, it gets updated and rendered on the page whenever we add anything in the input field. It appears under the input field. Check this gist to see how the App.vue file should look up to this point.

Computed Properties

Before learning about handling user events, we need to learn about methods. The reason is that we’ll use methods to handle those user events. All Vue instances have a property called methods, where we add all our methods. For example, we’ll add a button that allows us to add tasks.

Thus, we encapsulate the logic for that button in a method, and we add it to the methods field. Open the file and add the following code after data():. The above code only adds a task if the user entered something in the input field and then clears the field. That is to prevent entering empty strings into our tasks list.

Customize insert

Now, we can use the addTask() method as we would in any other application. We call the method, and the method will run, which is precisely what the next step is about. Be aware: The application will have two more methods:.