learning-vue2
2017-04-27T19:56:17.000Z
Lately I have been missing around with vue.js. It is very simple to learn after working with angular. There are many ways to use it. The simplest way is to simply reference it from its CDN. In the following example I use it that way. First I create a simple index.html file which contains the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>foobar-vue</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css"
/>
<style media="screen">
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div id="app" class="box has-text-centered">
<wow inline-template>
<p class="notification is-danger">{{message}}</p>
</wow>
<sum-is></sum-is>
</div>
<script src="https://unpkg.com/vue@2.2.6"></script>
<script src="js/app.js"></script>
</body>
</html>
Here I am referencing bulma.css via the <link> tag, for my styling so the page has a little color. Also referencing vue@2.2.6 via the <script> tag. Next I have a reference to my app.js file, which contains my vue application. We also added an id of app to the first <div> tag, this is how we will tell our vue application what surface to target. Next we have our app.js file:
Vue.component("wow", {
data() {
return {
message: "wow!"
};
}
});
Vue.component("sum-is", {
template: `<div>
<p class="notification is-info">Sum is {{sum}}</p>
<button @click="add()" class="button is-black is-outlined">Add One</button>
</div>`,
data() {
return {
message: "hola",
sum: 0
};
},
methods: {
add() {
this.sum += 1;
}
}
});
//main vue surface
let app = new Vue({ el: "#app" });
In this file we define the main vue surface by instantiating a new Vue and specifying what element is the target by setting the el property to app. This is precisely the id we used in the first <div> above. Right above that we define two vue components. Note in order to make these components accessible to our vue application we have to define them before we instantiate our vue instance, this makes them global. The first component is the wow component which simply has one data value of message that is set to 'wow'. It uses what is called an in-inline template which you can find in the index.html:
<wow inline-template>
<p class="notification is-danger">{{message}}</p>
</wow>
Here we specify that component by using the tag <wow> and adding the inline-template attribute, which tells vue that the following should be used as that component's template. Here we are simply using a <p> tag with a little bulma css styling and displaying the message data value which we defined in the component definition in app.js
The next component we defined in the app.js is called sum-is, and this component definition not only includes a data property but also the template, and methods properties. We use that component with the following code in the index.html:
<sum-is></sum-is>
This component contains everything it needs in its definition. The component has a template property which is used to render the component, two data properties, message and sum, and a methods property where we define a single method add(), where we increment the sum data property. In its template definition we only use one of the properties, sum, the initial value of that property is zero 0, we display that value using a <p> tag.
Next we have button using a <button> tag, and it has a new attribute @click="add()" which basically means whenever the button is clicked, call that add() method. When this component first renders on the page it will show Sum as 0, followed by an Add One button that when clicked automatically increments the value of sum and immediately changes (reactivity) on the page.
In summary we showed how we can use vue.js in a simple example that uses a CDN to pull in the vue.js library and we also show how to define custom components either in a self contained manner, or by specifying its template as in-line.
sample app:
