Skip to content

3. Project [vuejs-01]: The Basics

To explain the code executed in [vuejs-00], we will simplify it in [vuejs-01]. We duplicate the [vuejs-00] folder into [vuejs-01]:

Image

The [vuejs-01] project essentially consists of four files:

  • [main.js] [2] is the entry point of the project;
  • [App.vue, HelloWorld.vue] [3-4] are [Vue.js] components, optionally containing the following elements:
    • [<template>...</template>]: HTML code;
    • [<script>...</script>]: the JavaScript code associated with the HTML code;
    • [<style>...</style>]: the CSS styles associated with the HTML code;
  • [public/index.html] [5]: the HTML document displayed by the [npm run serve] command;

The [public/index.html] file displayed when the project runs is this one:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry, but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto-injected -->
  </body>
</html>

This HTML file therefore does not display anything statically. There is no HTML code here. The display is dynamic: the project’s JavaScript code will generate HTML that will completely replace the [<div id=’app’>] tag on line 14. The HTML code generated by the project’s JavaScript and inserted in place of the [<div>] tag on line 14 comes from the [template] tags of the [vue.js] components, the files with the [.vue] suffix.

The HTML code is dynamically inserted on line 14 by the following [vuejs-01/main.js] script:


// imports
import Vue from 'vue'
import App from './App.vue'

// configuration
Vue.config.productionTip = false

// instantiate project [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

Comments

  • line 2: the [Vue] object is provided by the [vue.js] framework;
  • line 3: the [App] object is provided by the [vuejs-01/App.vue] file;
  • line 6: configuration of the [Vue] object;
  • Lines 9–11: These are the lines that:
    • generate the application’s HTML code. Line 10: the [App.vue] file generates it;
    • load the HTML code generated on line 10 into the [<div id='app'></div>] section of the [public/index.html] file;

Any [Vue.js] project can keep the [index.html] file as is.

The [App.vue] file from the initial [vuejs-00] project is simplified as follows in the [vuejs-01] project:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Our first Vue.js application" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Comments

  • A [.vue] fragment consists of at most three sections:
    • [<template>...</template>] : HTML code;
    • [<script>...</script>] : JavaScript code associated with the HTML code;
    • [<style>...</style>]: the CSS styles associated with the HTML code;

Here, we do not have a [style] section.

  • lines 1–6: the HTML code of the fragment (page, component, view, ...);
  • lines 2-5: the [template] section can contain only one element. We generally place a [div] section that encompasses all the HTML of the fragment. We can also place a <template> tag;
  • line 3: an image;

Image

  • line 4: a component named [HelloWorld]. The principle of [Vue.js] is to build web pages using fragments defined in [.vue] files, such as [App.vue] here. This component is defined by the [HelloWorld.vue] file defined on line 9 of the associated JavaScript script;
  • line 4: a component can accept parameters. The parameter here is the [msg] attribute;
  • lines 8–17: the JavaScript script for the fragment (or component);
  • line 9: to use the [HelloWorld] component within the [App] component, its definition must be imported into the [script] section;
  • lines 11–16: the script defines an object and exports it to make it available externally;
  • line 12: the [name] attribute defines the name of the exported component;
  • lines 13–15: the [components] attribute lists the components used by the [App] component. They are exported along with it;

Line 9: The [HelloWorld] component does not have to have the same name as the file that defines it. It could be imported as [X] and exported as the [Bonjour] component:

Image

  • Line 14: The [X] component is exported under the name [Bonjour]. It is then used under that name, line 4;

The first version is the most common, so we will define our components this way;


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Our first Vue.js application" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Line 14 is a shorthand for the code [HelloWorld : HelloWorld]: the [HelloWorld] component (on the right, imported on line 9) is exported under the name [HelloWorld] (on the left).

Image

We simplify the [HelloWorld.vue] component as follows:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Comments

  • The [HelloWorld] component has the same file structure as the main [App] component;
  • line 3: this evaluates a JavaScript expression, in this case the expression [msg];
  • lines 10–12: define the component’s properties, more specifically its parameters. When the [App] component instantiated a [HelloWorld] component, it did so using the following syntax: 

<HelloWorld msg="Our first Vue.js application" />

The [HelloWorld] component is instantiated by assigning a value to the parameter (attribute) [msg]. If we look at the [template] of the [HelloWorld] component, it becomes:


<div>
    <h1>Our first Vue.js application</h1>
</div>
  • lines 7–14: the component’s properties defined as an object that is exported;
    • line 9: the component is exported under the name [HelloWorld];
    • lines 10–12: its parameters are defined by the [props] property;

Ultimately, if we combine the templates of the two components [App, HelloWorld] used, the [index.html] file displayed will be as follows:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry, but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Our first Vue.js application</h1>
    </div>
  </div></body>
</html>

We launch the application by modifying the [serve] [1] command in the [package.json] file:

Image

The page displayed is then [2].

Now let’s look at the code for this page:

Image

  • In [1], right-click;
  • at [2], the page’s source code. We can see that this is the code from the initial [index.html] file, and that’s not what was displayed. It was indeed the [index.html] page that was initially loaded. Then, dynamically, JavaScript code modified this page, but we aren’t shown that;

When pages are dynamically generated by JavaScript, option [2] is useless. You must go to the browser tools (F12 in Firefox) to view the code of the currently displayed page:

Image

  • in [1], the DOM (Document Object Model) inspector for the displayed document;
  • in [2], what this DOM actually contains;
  • [3-4], tools we’ll use to view the JavaScript objects used by the [Vue.js] framework;
  • [4] is an extension (here for Firefox) for debugging [Vue.js] applications:
    • for Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
    • for Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

Let’s examine the [Vue] tab [4]:

Image

The [1-4] view shows us the [Vue.js] structure of the document: the document root [2] (index.html) contains the [App] component (3), which in turn contains the [HelloWorld] component (4). Clicking on [4] displays the properties of the [HelloWorld] component [5].

In [4] (on the right), we see the [$vm0] indicator. This is the name of the variable we can use in the JavaScript console [6] to refer to the [HelloWorld] object. Let’s do that:

Image

  • In [2], we evaluate the expression [$vm0], which displays its structure. Normally, we won't need to use this structure directly;

Let’s finish by demonstrating the [hot reload] capability of the [serve] command used to run the project:

  • In [App.vue], change the displayed message to [HelloWorld]:

Image

  • In [1], we modify the displayed message;
  • in [2-3], the page is automatically updated without any action on our part;

We will now create various [vuejs-xx] projects to illustrate the key features of [Vue.js]. By “key,” we mean “features we will use in the [Vue.js] client of the tax calculation server.” Other “key” features will be omitted if they are not used in the client. This is therefore not intended to be an exhaustive presentation of [Vue.js].

https://tahe.developpez.com
This tutorial written by Serge Tahé is made available to the public under the terms of the Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.