Vue Tutorial Deutsch

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.

Vereinfachter Aufbau von Komponenten

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:. 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. 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 .

List Rendering

After that, we’re prompted to choose a Vue version for our project. 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!

Handling User Events

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. Also, remove the image with the Vue logo.

Creating the Application with Vue CLI

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:.

Preparing the Application

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.

Conclusion

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. 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.

Share This Article

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.

Refactoring mit der Composition API

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.