Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge of this article "how to use Vue", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to use Vue" article.

What is Vue?

Vue.js is a progressive framework for building user interfaces.

Unlike other heavyweight frameworks, Vue uses a bottom-up incremental development design.

Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects.

On the other hand, Vue is also fully capable of driving complex single-page applications when used in conjunction with single-file components and libraries supported by the Vue ecosystem.

Many students may find Vue difficult to learn, so they don't dare to try. Next, the editor will take you to understand the most basic compilation of "Hello World". I believe that through this, you will have the confidence to learn and 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, in order 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 Vue.js locally and include it directly using the script tag in the HTML file.

Note: the development version contains console warnings, which are useful for debugging. The production version is optimized for size (by using scaled-down versions of vue.js files, etc.) and speed, which is important for publishing in real-time environments.

Initial code

Create a HTML file using the following code

Hello Vue!

Hello World!

The code is very simple and basic. We named the page "Hello Vue". And the development version of vue.js that uses tagged CDN in the section. We are displaying the message within the tag within the element with id= "demo" in the "Hello World" section.

Go to Vue instance step 1: create a new Vue instance

We have imported Vue.js into our project using tags, but this does not solve the problem. This is equivalent to having a laptop on our workbench. To turn it on and get some work done, we must press the power button. Similarly, to use Vue in our project, we must create an instance of the Vue object using the new keyword. This example is the Vue power button!

New Vue ()

Step 2: pass the option object

Only creating an instance will only power the Vue. But we want to do more about Vue. To do this, we must pass the option or configuration object as a parameter to the instance we just created. This option object has some reserved properties recognized by Vue, which are specified as key-value pairs. As the name implies, not all attributes are required and can be specified when needed. Typically, they are used to store data and perform certain operations.

For example: "el", "data", "method", etc.

New Vue ({options/config object})

Step 3: establish a connection to DOM

We want to somehow gain control over a portion of the HTML code that we want to manipulate. In our example, it is an 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 we can control it according to our needs, we have a reserved attribute called "el", which is converted to an element. This property specifies the string as the value as the CSS selector, that is, the "#" and "." of id. For class.

New Vue ({el: "# app"})

With this simple line of code, we now link the element with id, "app" and its contents to the Vue instance. They are now inseparable!

Step 4: specify our data

To store all the data / information we want to use in this Vue instance and its linked DOM, we also have a reserved property called "data". Unlike "el", "data" takes an object as its value. Since we are displaying the message "Hello World" to DOM, let's specify it as a key-value pair in the data object.

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

Step 5: render this data to DOM

You only need to use the two curly braces shown below to render the value specified in the data object of the Vue instance to DOM. For more information, see the next article! )

{{message}}

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

The above is about the content of this article on "how to use Vue". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.