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

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.

  • + 3
  • 0
  • 17127
  • 7

Comments

How does Vue.JS stacks against other popular JS frameworks like Angular2, React, etc.?

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.

why didn't someone else think of this before?

As far as I know, VueJS uses property accessors to ovewrite set/get behavior. When AngularJS came out there wasn't an estabilished way of reproducing that, so who takes the blame here was the slower JavaScript development, untill ECMAScript 5 came out. Mostly because IE of course.

I completely agree - Vue.js uses the more modern features in JavaScript cleverly (btw which finally rules out IE <= 8). But anyway, Vue.js is a great initiative taken by an Angular developer to create a much faster, more natural and lighter library - keeping the good parts of Angular.

The REST example using Axios works great from outside the Cache environment but when I try it out in a CSP page ( a HTML based CSP page e.g. demo.csp ) Atelier throws a syntax error due to the @click="getPostsViaREST".  ERROR #5928: Syntax error while parsing tag <button> on line number 24

Any ideas what could be wrong?

 

 

FYI:  I found that an Atelier error isn't thrown if you use the long version of the shortcut @ i.e. by just using v-on