Hi, This is Hara from System Inegration Department.

I’ve recently found myself very interested in the Vue.js and wanted to learn more about it.
Today, I’m going to write about creating simple webpage using Vue.js

What is Vue.js?

Vue.js is a progressive framework for building interactive web interfaces using MVVM.

To use Vue.js you can include or to use CLI, I recommend using a CLI since this is more realistic to build Vue.js application. So let’s use the recommended way this time.

Building an app using Vue.js

1.Setting up an environment

※Assume that Node.js is already installed

Write a command using Windows Command Prompt or PowerShell.

#install vue-cli globally
npm install -g vue-cli
#create a new project using "webpack-simple" template
vue init webpack myapp
#install dependencies
cd myapp
npm install

#start the server
npm run dev

img1
This will start the server and application.
img2

2.Create a layout

Let’s create a container.
Create Header.vue, Footer.vue and store them in myapp\src\components folder

Header.vue

<template>
  <header>
    <!-- This is to display the data -->
    <h1>{{title}}</h1>
    <p>{{subTitle}}</p>
  </header>
</template>

<script>
export default {
//Data objects for Vue instance
  data(){
    return{
      title: "Casley Consulting Inc.",
      subTitle: "A \"Creating Shared Value\" company."
    }
  }
}
</script>

<style>
header{
  background-color: #f6f7f9;
  text-align: center;
  padding: 10px;
}
h1{
  color: #013892;
  margin: 0;
}
p{
  color:#999;
  margin: 0;
}
</style>

Footer.vue

<template>
  <footer>
    <!-- This is to display the data-->
    <p>{{addr}}</p>
    <p>{{copyright}}</p>
  </footer>
</template>

<script>
export default {
  //Data objects for Vue instance
  data(){
    return{
      addr: "Yebisu Garden Place Tower 31F, 4-20-3, Ebisu, Shibuya-ku, Tokyo Japan, (〒150-6031)",
      copyright: "Casley Consulting Inc. All rights reserved."
    }
  }
}
</script>

<style>
footer{
  background-color: #c9c9c9;
  text-align: center;
}
h1{
  color: #013892;
  margin: 0;
}
p{
  color:#000;
  margin: 0;
}
</style>

Let’s display the Header and Footer on the browser.
Edit the App.vue as following.

<template>
  <div>
    <app-header></app-header>
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

export default {
components:{
    'app-header': Header,
    'app-footer': Footer
  }
}
</script>

Let’s checkout if it is reflected on the browser.
vue1

3.Creating content

Next is to create the content.
Specification
Display the Value entered in the textbox in realtime on the page.
Display the value inside a blue box at the bottom when button is clicked

Contents.vue

<template>
<div class="content">
  <div class="input-holder">
    <p>add new csv mechanism</p>
    <!--
    v-model:This is to create a data binding.
    Get the data from textbox and update the value of an element automatically.
    -->
    <input type="text" v-model="csvJp" placeholder="Japanese"><br>
    <input type="text" v-model="csvEn" placeholder="English"><br>
    <!--
    @click="addContent" this will call the function “addContent” when the button is clicked.
    v-on:click attaches event listener to the element. this is the shorthand of v-on:click.
    -->
    <input type="submit" value="Add" @click="addContent">
    <!-- Display concatenated value of csvJp and csvEn</a>-->
    <h3>{{displayConcat}}</h3>
  </div>
  <hr>
  <div class="box-holder">
    <!--Displat the data by looping the array -->
    <div class="box" v-for="mechanism in csv">
      <h4>JP:{{mechanism.japanese}}</h4>
      <p>EN:{{mechanism.english}}</p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
     //csv: is an array containing a list of mechanism of csv to list on the page
     //value will be stored here when add button is clicked.
      csv: [
        {
            japanese: '製品と市場を見直す',
            english:'Reconceiving products and markets'
        },
        {
            japanese: 'バリューチェーンの生産性を再定義する',
            english:'Redefining productivity in the value chain'
        }
      ],
      //this is for data binding. Default value is blank
      csvEn:'',
      csvJp:''
    }
  },
  methods:{
    //This is the method that will trigger when add button is clicked
    //this will append the user inputs to the array (csv). Nothing will happen if the data is blank.
    addContent(){
      if(this.csvJp && this.csvEn){
        this.csv.push({
          japanese: this.csvJp,
          english: this.csvEn
        });
        this.csvJp = '';
        this.csvEn = '';
      }
      else{
        return
      }
    }
  },
  computed:{
    //Computed property is like method but only run when one of its dependencies is updated.
    //In this example, it will concatenate csvEn and csvJp and it only occurs when input is changed.
    displayConcat(){
      return this.csvJp + ' ' + this.csvEn;
    }
  }
}
</script>

<style scoped>
.content{
  padding: 10px;
}
.box{
  margin: 5px;
  padding: 15px;
  border: 2px solid #013892;
  float: left;
}
.box-holder:after{
  content: "";
  clear: both;
  display: table;
}
p{
  margin: 0;
}
</style>

Now component is done and let’s display it on the browser
App.vue

<template>
  <div>
    <app-header></app-header>
    <app-contents></app-contents>
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Contents from "./components/Contents.vue";
import Footer from "./components/Footer.vue";

export default {
components:{
    'app-header': Header,
    'app-contents': Contents,
    'app-footer': Footer
  }
}
</script>

and page is done.
vue2

4.Checking the action

input the texts(Japanese and English) in the text box.

●ビジネスを営む地域に産業クラスターを開発する
●Enabling local cluster development

Checking the binding
vue3
As you can see computed property is displayed while typing, and when you click the button it will be added to the blue box below.
vue4

In conclusion

So how was it? if you have knowledge about html,css,javascript
it is easy to create an SPA(single page application).
There are some other plugins like vue-loader,vue-router
but for today I just wanted to introduce how fun it is to create an app with Vuejs.
Thank you for reading through.
See you next time.