New post
Article
· Sep 19, 2017 5m read

Vue.js: getting started with a basic HTML/REST/JSON example

#Best Practices #HTML #JavaScript #JSON #REST API #Vue.js #ZEN #Caché

This is a basic JavaScript Vue.js example how you can use REST calls using plain HTML.You can just copy/paste the example code below, save it to a *.html file and open it in your browser:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cach&eacute; &amp; Vue.js news</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
  </head>
  <body>
    <div class="container" id="app">
      <h3 class="text-center">Cach&eacute; &amp; Vue.js news</h3> 
      <div class="columns medium-4" v-for="post in posts">
        <div class="card">
          <div class="card-divider">
            {{ post.title }}
          </div>
          <div class="card-section">
            <p>{{ post.body }}.</p>
          </div>
        </div>
      </div>            
    </div>
  </body>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          posts: [
            {title: "My very first Vue.js post", body: "lorem ipsum some test dimpsum"},
            {title: "My second Vue.js post", body: "lorem ipsum some test dimpsum"},
            {title: "My third Vue.js post", body: "lorem ipsum some test dimpsum"}
          ]
        }
      });    
    </script>
</html>

When we slightly enhance this example to get the posts via a call to a REST (testing) endpoint (using the Axios helper library):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cach&eacute; &amp; Vue.js news</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
  </head>
  <body>
    <div class="container" id="app">
      <h3 class="text-center">Cach&eacute; &amp; Vue.js news</h3> 
      <div class="columns medium-3" v-for="post in posts">
        <div class="card">
          <div class="card-divider">
            {{ post.title }}
          </div>
          <div class="card-section">
            <p>{{ post.body }}.</p>
          </div>
        </div>
      </div>
      <hr>
      <button class="button" style="display:block;margin:auto;" @click="getPostsViaREST">Get posts via REST</button>
    </div>
  </body>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          posts: [
            {title: "My very first Vue.js post", body: "lorem ipsum some test dimpsum"},
            {title: "My second Vue.js post", body: "lorem ipsum some test dimpsum"},
            {title: "My third Vue.js post", body: "lorem ipsum some test dimpsum"}
          ]
        },
        methods: {
          getPostsViaREST: function() {
            axios.get("https://jsonplaceholder.typicode.com/posts")
              .then(response => {this.posts = response.data})
          }
        }
      });    
    </script>
</html>

You'll notice a couple of things were added: the Axios helper library in the <head>, a <button> to retrieve the posts via REST - look at the natural syntax in Vue.js for binding methods to event methods - and below in the Vue instance, a getPostsViaREST method where the REST call is done using Axios. The REST response modifies the (reactive) data.posts property. Notice that Vue.js automatically updates the view as soon as the data.posts content is changed, welcome to "reactivity"!

It's a trivial exercise to replace this test endpoint with your own QEWDjs/REST or Caché CSP/REST endpoints or - even better - as shown in the vue-qewd example, with an permanent WebSocket connection to a QEWDjs/Caché back-end.

This example only gives a very basic introduction to the capabilities of Vue.js. For a real application, you'll probably want to use the more advanced way of component-based coding using its Node.js modules with .vue files.

If you want  to learn Vue.js completely from the ground up, I can recommend this excellent training course by Maximilian Schwarzmüller.

Discussion (8)3
Log in or sign up to continue
Ward De Backer · Sep 19, 2017

To compare them in terms of GitHub stars:

  • Vue.js: 67.437
  • Angular: 85.077 = 27.955 (version 4) + 57.122 (older version 1.6)
  • React: 75.941

Vue.js has an exponentially growing popularity, compares well to Angular but is much more compact and is nearly as popular as React (but React came out one year earlier!).

Last week I found this excellent blog article comparing the most popular JavaScript libraries and frameworks.

I must say I'm currently using React/Redux for my projects, but last week, Vue.js drawed my attention by coincidence. When I started trying out some examples, this library felt immediately like "this is it" and "why didn't someone else think of this before?" to me. It comes very close to HTML + vanilla JavaScript and the way of coding is very intuitive.

1 0