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é & 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é & 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é & 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é & 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.
Top comments (0)