Master Vue.js in 6 Days. Become a Vue.js Expert in Under a Week (Eric Sarrion) (z-library.sk, 1lib.sk, z-lib.sk)

📄 File Format: PDF

💾 File Size: 11.9 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

1© Eric Sarrion 2024 E. Sarrion, Master Vue.js in 6 Days, https://doi.org/10.1007/979-8-8688-0364-2_1 CHAPTER 1 Day 1: Mastering Components in Vue.js Welcome to Chapter 1 of our journey to master Vue.js in just six days. During this first day, we will delve into the world of Vue.js, starting by understanding why it is so powerful and exploring its key concept, the Virtual DOM. We will then follow a step-by-step process to create our first Vue.js application, guiding you through the installation of Node.js and Vue CLI, as well as examining the default files generated in a Vue.js application. We will also explore the structure of a Vue.js application, examining configuration files, directories, and essential components. Additionally, we will demonstrate how to break down an application into Vue.js components, adhering to naming conventions and creating our first component. Finally, we will delve into fundamental aspects such as reactivity usage, defining methods and computed properties in a Vue.js component, and managing the lifecycle.

📄 Page 3

2 Why Use Vue.js When it comes to choosing a JavaScript framework for modern and interactive web development, Vue.js stands out among the most popular and compelling choices. With its simple and reactive approach, Vue.js offers a smooth and enjoyable development experience, suitable for both beginners and experienced developers. In this section, we will explore five essential reasons why Vue.js is a wise choice for your development projects. From its ease of learning to optimal performance, innovative Composition API, and dynamic ecosystem, let’s quickly discover why Vue.js rightfully deserves its place among modern development frameworks. We will, of course, have the opportunity to explore these different facets in depth later in the book. 1. Ease of Learning and Implementation Vue.js is renowned for its gentle learning curve. Its simple and declarative syntax, along with comprehensive and user-friendly documentation, makes it an excellent choice for both novice web developers and experienced professionals. Concepts such as components, directives, and composables are intuitive and easy to grasp, speeding up the learning and development process. 2. Reactivity and Efficient Rendering Reactivity is at the core of Vue.js. With its bidirectional data binding system and the ability to track changes in the application’s state, Vue. js ensures reactive and efficient rendering. User interface updates are handled optimally, resulting in a smooth and performant user experience, even for complex applications. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 4

3 3. Composition API for Better Code Organization With the introduction of the Composition API (starting from Vue.js version 3, as used in this book), Vue.js provides a more structured and modular way to organize code. Instead of dividing logic by options in components (as proposed in Vue.js version 2), the Composition API allows grouping logic by functionality, making the code more readable, maintainable, and scalable. It also facilitates logic sharing between components. 4. Extensive Ecosystem of Libraries and Tools Vue.js benefits from a dynamic ecosystem composed of many third-party libraries and complementary tools. Whether it’s state management with Vuex, routing with Vue Router, or integration with other libraries and frameworks, Vue.js offers flexible options to meet various development needs. 5. Optimal Performance and Lightweight Size Vue.js is designed to be lightweight and fast. With its compact size and optimized performance, Vue.js applications load quickly in the browser, enhancing the overall user experience. Additionally, Vue.js allows server- side rendering (SSR) for even better performance in terms of SEO and initial loading time. Vue.js distinguishes itself through its simplicity, reactivity, flexibility, performance, and ecosystem, making it a wise choice for developing modern and dynamic web applications. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 5

4 Virtual DOM The Virtual DOM (Document Object Model) is a key concept in many modern JavaScript frameworks, including Vue.js. It is a lightweight and efficient abstraction of the real DOM, which represents the structure of a web page in the browser’s memory. The goal of the Virtual DOM is to improve performance and the efficiency of DOM updates by minimizing direct manipulations, which can be time-consuming. Let’s now explore how the binding between the browser’s DOM and Vue.js’s Virtual DOM works. Step 1: Virtual DOM Operation Here’s how the Virtual DOM operates in Vue.js: 1. Virtual DOM Creation: When a Vue.js component is created, it generates an internal Virtual DOM that reflects the current structure of the DOM. This Virtual DOM is a virtual and lightweight copy of the actual DOM tree. 2. Initial Rendering: At startup, the component generates the Virtual DOM using the data and templates defined in the Vue.js code. 3. Change Detection: When a component’s data changes (due to user interaction, such as clicking a button), Vue.js uses a process called “reactivity” to detect data changes. This triggers a Virtual DOM update process. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 6

5 4. Comparison and Update: Once data changes are detected, Vue.js compares the new state of the Virtual DOM with the previous state, identifying differences between the two versions. 5. Patch Generation: Vue.js generates a set of instructions (reconciliation process) describing the modifications to be made to the real DOM to reflect the changes. These instructions are created efficiently, minimizing the number of direct DOM manipulations. 6. DOM Update: Finally, Vue.js applies the reconciliation process to the real DOM in an optimized manner. Only the parts of the DOM that have changed are updated, significantly reducing performance compared to a full DOM update. The major contribution of the Virtual DOM lies in the efficiency and speed of updates. Instead of directly manipulating the DOM with each data change, Vue.js uses the Virtual DOM to minimize actual DOM modifications, resulting in improved performance and a better user experience. This allows developers to focus on application logic rather than complex DOM manipulations. Vue.js’s Virtual DOM is therefore a crucial technique that optimizes browser performance by intelligently detecting changes and efficiently updating the DOM, enhancing reactivity and the user experience. Step 2: Concrete Example Here is a concrete example to illustrate how the Virtual DOM works in Vue. js through a simple case: incrementing a counter by clicking a button. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 7

6 Suppose we have a Vue.js component called MyCounter that displays a counter and a button to increment it. Here is how it could be implemented (this code example will be explained later in this chapter; the key here is to explain how the DOM is updated with each click on the “Increment” button). The MyCounter component is associated with a MyCounter.vue file described as follows: File MyCounter.vue <script setup> import { ref } from "vue"; const count = ref(0); const increment = () => count.value++ </script> <template> <div> <p>Counter: {{ count }}</p> <button @click="increment()">Increment</button> </div> </template> This component is displayed in a browser as follows: Figure 1-1. First display of the Vue.js application Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 8

7 Upon clicking the “Increment” button once, the counter value increments from 0 to 1: Figure 1-2. Incrementing the counter from 0 to 1 Let’s examine how Vue.js’s Virtual DOM handles updates when clicking the button to increment the counter: 1. Upon startup, the MyCounter component is mounted, and the Virtual DOM is created based on the template and initial data. 2. When clicking the “Increment” button, the increment() method is called. This changes the value of the count variable in the component. 3. Vue.js detects the data change through its reactivity system. 4. The Virtual DOM is updated to reflect the new value of count. Vue.js compares the old and new Virtual DOM to determine differences. 5. Vue.js generates a set of instructions describing the modification to be made to the real DOM. In this case, the instructions simply indicate that the counter text should be updated. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 9

8 6. The real DOM is updated with the executed instructions. Only the part of the DOM corresponding to the counter is modified, minimizing direct DOM manipulations. This example illustrates how Vue.js’s Virtual DOM optimizes DOM updates by detecting changes, then generating efficient instructions to selectively update the real DOM. This provides a reactive user experience while optimizing performance. Creating a First Vue.js Application Creating a Vue.js application requires installing the Vue CLI utility, downloadable after installing the npm utility from the Node.js server. Step 1: Installing Node.js and Vue CLI Ensure that you have Node.js installed on your system, which you can download from the official Node.js website (https://nodejs.org/). Next, install Vue CLI using the npm install -g @vue/cli command in your terminal: Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 10

9 Figure 1-3. Vue CLI installation Once Vue CLI is installed, you can use the vue create command to create the Vue.js application. Step 2: Creating the Vue.js Application After installing Vue CLI, you can create a new Vue.js project by running the command vue create vueapp. This will create the vueapp application in the newly created vueapp directory: Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 11

10 Figure 1-4. Creating the Vue.js application with Vue CLI The system prompts for the desired version of Vue.js. We retain the default selection of the current version 3 by pressing the Enter key on the keyboard. The Vue.js application named vueapp begins to be created: Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 12

11 Figure 1-5. Creating the Vue.js application in progress Once the application creation process is complete, it will be displayed on the screen: Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 13

12 Figure 1-6. Completion of Vue.js application creation Once the Vue.js application is created, the next step is to start it. Step 3: Launching the Vue.js Application To start the previously created Vue.js application, simply type the two commands in the terminal window as indicated: cd vueapp, then npm run serve. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 14

13 Figure 1-7. Launching the Vue.js application The npm run serve command starts a Node.js server on which the Vue.js application will run. Once the Node.js server is launched, the terminal screen becomes the following: Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 15

14 Figure 1-8. Completion of the server launch process with the Vue.js application The terminal window indicates that the Vue.js application is accessible at the URL http://localhost:8080. Let’s enter this URL in a browser: Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 16

15 Figure 1-9. Default Vue.js application created We now have access to the previously created Vue.js application. Analyzing the Files Created by Default in the Vue.js Application The vue create vueapp command created a vueapp directory containing configuration files and directories containing the source code for our Vue. js application. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 17

16 Figure 1-10. Contents of the “vueapp” directory in the Vue.js application We can see that the Vue.js application directory primarily contains configuration files and three main directories (node_modules, public, and src). Let’s now explain their role and contents. Step 1: Configuration Files (with .js and  .json Extensions) The configuration files are directly attached to the root of the application. They serve, among other things, to enable the execution of the Vue.js application on a Node.js server. For example, here is the content of the package.json file, which is traditionally used to configure an application to run on a Node.js server: File package.json { "name": "vueapp", "version": "0.1.0", "private": true, Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 18

17 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 19

18 }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] } In this file, you’ll find the list of dependencies that our application needs to run, along with their respective versions. The “scripts” key allows the execution of commands such as npm run serve, which launches the development server on port 8080. Additional scripts can be added. For example, let’s insert a new script “start” in the “scripts” section that starts the Vue.js application on port 3000 instead of the default port 8080. Adding the "start" script (package.json file) "scripts": { "serve": "vue-cli-service serve", "start": "vue-cli-service serve --port 3000", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, The command npm run start starts the server on port 3000. Chapter 1 Day 1: Mastering CoMponents in Vue.js

📄 Page 20

19 Figure 1-11. Execution of the “start” script The Vue.js application is now accessible at the URL http:// localhost:3000, thanks to the server launched on port 3000. We briefly examined the configuration files of the Vue.js application. Let’s now look at the application directories, starting with the node_ modules directory. Step 2: node_modules Directory The node_modules directory contains external dependencies necessary for the proper functioning of the Vue.js application (those specified in the package.json file), as well as other libraries and modules that may be added to the project later. Here is a partial content of this directory shortly after creating the application. Chapter 1 Day 1: Mastering CoMponents in Vue.js