Try outputting text with minimal configuration!

overview

Vue.js is a JavaScript framework made for front-end development. It’s more focused on what the user sees than Angular or React, making it easier to understand. This time, in order to learn the basic usage of Vue.js, I will introduce how to embed Vue.js directly in HTML using CDN and output text with minimal configuration.

HelloWorld in Vue.js

To learn the basics of Vue.js, let’s take a look at the HelloWorld implementation.

<html>
  <head>
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div id="intro" style="text-align: center">
        <h1>{{ message }}</h1>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

Try opening the created html file in your browser. You should see the following.

I will explain each.

<script src="https://unpkg.com/vue@next"></script>

Loading external Vue.js body with CDN.

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

Outputting {{ message }} variables in HTML tags.
The message variable is defined in the Vue.js code below.

const { createApp } = Vue;
createApp({
  data() {
    return {
      message: "Hello World",
    };
  },
}).mount("#app");

The above code is a minimal configuration of Hello World implemented by embedding Vue.js directly in HTML. Call the Vue.js instance with createApp, and then attach the Vue.js instance to the HTML element with mount. It also defines a message variable within the data object. This variable will be called as {{ message }} on the HTML side to display the string Hello World.

Now open the HTML file in your browser. You should see “Hello World”, similar to the image below.

The above is how to implement a minimal configuration of Hello World using Vue.js. By all means, please move your hands and try it yourself. You can download it here.

https://github.com/wiblok/Vue.js

That’s it, Vue.js introduction | Try outputting text with the minimum configuration! was.

Try outputting text with minimal configuration!

overview #

HelloWorld in Vue.js #

overview

HelloWorld in Vue.js