A view of VueJs

Do you want to get started in Vue or just get an idea of how it works, then you have come to the right place. I will go through how to get setup with Vue. We will be building a simple Vue app that will dispense programming jokes.

What is Vue?

Vue is a Front-end framework, one of the most used Front-end framework right now. Vue is used to create dynamic single page applications so that the site is loaded up as soon as the request is made and then future page requests are very quick. It does this by splitting the pages into components that can be reused in many different places and pacing data between applications.

Photo by Ferenc Almasi on Unsplash

Prerequisites

• Familiar with HTML/CSS (Required)
• Know JavaScript (Optional but recommended )

How to start with Vue

Getting started with Vue is really easy simply create an html file and place the following script tag.

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Now you have Vue on you page, you won’t see anything if you load it but Vue is on there.

Building Vue

As was mentioned before Vue creates single page applications. That page is the HTML file you created.

Within the HTML file, you can place regular HTML, then underneath, place a new script tag. Within the script create the Vue app variable that would be bound to the HTML element with the id “app” in this case (this is set in el:).
Vue has an option to store data that can be accessed by the HTML output. Lets create a simple message with Hello World! as the value. We can access the data using double curly brackets. Lastly to add style just add a style tag with all the CSS within.

Notice that the page changes only once you save your changes and refresh the page. Next, lets create a component, to do create a new Vue.component item in the script tag then add the tag <todo-item> within the HTML . Components are a powerful and essential part of any large Vue application but unfortunately we will not cover them within this tutorial since we will be building a small application. For the most part anything used in the Vue app can be used in the components.

Vue.component("todo-item", {
template: "<li>This is a todo</li>",
});

Next lets use a conditional statement. We can add conditionals right into the HTML to toggle elements. To do this we will create a hasJoke Boolean in the data, then we will use v-if followed by the statement as such.

Next lets create a get Joke button and map a method to it using v-on:click on a button element. Lets also add a new field to the Vue app called methods that will have all the methods for this project. Then within it lets add a method called getJoke that will turn the hasJoke variable to true. Lets also create a Joke variable which will store the Joke. Here is how that will all go together,

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" class="app">
<div>
{{ message }}
</div>
<div v-if="!hasJoke">
There is no Joke yet!
</div>
<div v-if="hasJoke">
{{joke}}
</div>
<button v-on:click="getJoke"> get a Joke </button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!",
hasJoke: false,
joke: ""
},
methods: {
getJoke: function () {
this.hasJoke = true
this.joke = "This is a very funny Joke"
}
}
});
</script>

<style>
.app {
text-align: center;
font-size: 40px;
font-style: italic;
}
</style>

As a last step lets add real jokes from official-joke-api and lets also make the page a little more stylized.

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" class="app">
<div>{{ message }}</div>
<div v-if="!hasJoke">There is no Joke yet!</div>
<div v-if="hasJoke">
<h1>{{joke["0"]["setup"]}}</h1>
<h2>{{joke["0"]["punchline"]}}</h2>
</div>
<button v-on:click="getJoke">get a Joke</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!",
hasJoke: false,
joke: "",
},
methods: {
getJoke: async function () {
this.hasJoke = true;
let theJoke = await (
await fetch(
"https://official-joke-api.appspot.com/jokes/programming/random"
)
).json();
this.joke = theJoke;
},
},
});
</script>
<style>
.app {
text-align: center;
font-size: 40px;
font-style: italic;
}
h1 {
color: green;
}
h2 {
color: red;
}
</style>

That should be it for the tutorial, the page is now working, providing new jokes and using Vue. The code is available at : https://github.com/YoussefZayed/Medium-content/tree/main/vueJsIntro