Is Vue hard to learn? Teach you to write Vue with your hands

May 31, 2021 Article blog

What is Vue?

Vue .js is a progressive framework for building user interfaces.
Unlike other heavyweight frameworks, Vue has a bottom-up incremental design.
Vue's core library focuses only on the view layer, making it easy not only to get started, but also to integrate with third-party libraries or existing projects.
On the other hand, when used in conjunction with single-file components and libraries supported by the Vue ecosystem, Vue is well placed to provide drivers for complex single-page applications.

Many students may find Vue difficult to learn and therefore afraid to try, and then the editor-in-chief will take you to understand the most basic writing "Hello World", I believe that through this you will have the confidence to learn to master Vue.

Vue environment settings

Since we need to keep everything simple, why not apply CDN, which is basically imported into Vue .js by another server. For now, to practice, understand, and learn the basics of Vue, you can use this simple setup for very small projects.

Option 1:

Option 2:

Option 3:

You can download the development or production version of the Vue .js locally and include it directly using the script tag in the HTML file.

Note: The development version contains console warnings that are useful for debugging. Production versions are optimized primarily for size (by using vue .js reduced versions of files, etc.), which is important for publishing in a real-time environment.

The initial code

Use the following code to create an HTML file

<!DOCTYPE html>

<html>

<head>

<title>Hello Vue!</title>

</head>

<body>

<h1>Hello World!</h1>

</div>

</body>

</html>

The code is very simple and basic. W e named the page "Hello Vue". a nd the development version of vue .js with <script > labeled CDN in the > section of <head. We're showing messages in the < div> > elements of "Hello World" < body < > tags with ids and "demos".

The current output in the browser is as follows: Is Vue hard to learn? Teach you to write Vue with your hands1

Go to the Vue instance

Step 1: Create a new Vue instance

We've imported Vue .js into our project using the <script > tag, but that doesn't solve the problem. T his is equivalent to having a laptop on our workbench. T o turn it on and do some work, we have to press the power button. S imilarly, to use Vue in our project, we have to create instances of Vue objects using the new keyword. This example is Vue's power button!

new Vue();

Step 2: Pass the option object

Creating only instances will only power Vue. B ut we want to do more for Vue. T o do this, we must pass the option or configuration object as an argument to the instance we just created. T his option object has some reserved properties that Vue can recognize, and they are designated as key value pairs. A s the name implies, not all properties are required and can be specified when needed. Typically, they are used to store data and perform certain operations.

For example: "el," "data," "method," and so on.

new Vue({ options/config object });

Step 3: Establish a connection to the DOM

We want to somehow gain control over a portion of the HTML code we want to manipulate. In our example, it is a <div > element with id and "app", so we can display the message "Hello World" through Vue.

In order to establish this connection between the Vue instance and part of the DOM so that it can be controlled according to our needs, we have a reserved property called "el" that is converted to an element. T his property specifies the string as a value as the CSS selector, which is the "" For class.

new Vue({ el: "#app" });

With this simple line of code, we now link the <div > elements with ids, "apps" and their contents to the Vue instance. They're inseparable now!

Step 4: Specify our data

In order to store all the data/information we want to use in this Vue instance and the DOM it links to, we also have a reserved property called "data". U nlike "el," "data" takes the object as its value. Because we want to display the message "Hello World" to the DOM, let's specify it as a key value pair in the Data object.

new Vue({ el: "#app", data: { message: "Hello World" } });

Step 5: Present this data to the DOM

Simply use the two braces shown below to render the values specified in the data object of the Vue instance to the DOM. ( For more information, see the next article!) ）

<div id="app"> <h1>{{ message }}</h1> </div>

To distinguish between the previous output (no Vue), use Vue to display, let's display "Hello World!" instead of "Hello World!"

Is Vue hard to learn? Teach you to write Vue with your hands2

Look, isn't Vue easy? It's so easy to complete an example

Of course, Vue has more to offer, and the editor-in-chief will help you pick it out for you to learn