Vue.js: a quick start guide for beginners. Part 1.

by Janeth Kent Date: 10-12-2019 javascript vueJs tutorial guide

Learning a new framework can be a very complicated process for any developer, especially for someone that is still learning the basics of JavaScript. For this reason, we decided to create this series, which will make Vue.js learning as easy and digestible as possible.

How to integrate Vue.js to your project

There are several ways you can integrate Vue into your web project. Let's begin with the simplest one.

Most tutorials automatically assume that you understand how to set up and run a development environment in which you should use things like npm, the webpack...

We will start with a much simpler beginner-friendly approach.

Just go ahead and run your favorite code editor. Then, create a new file called index.html.

<html>
  <head>
     <title>Vue test page</title>
  </head>
  <body>
     <h1>Hi world!</h1>
     <div id="app"></div>
  </body>
</html>

We just set the bones for a simple website, nothing really fancy. Now, let's get the library of Vue. Before closing,< /body > paste this script tag.

[...]    
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</body>

So we can use Vue now that it's loaded into our page. Let's go ahead and and and in a < script > tag create a new Vue instance. We will give it a selector by passing #app to the options object property, and Vue will know where to render our app.

Place this script after html.

<script>      
const app = new Vue({          
    el: '#app', // 1          
    data: { // 2             
       myLocalProperty: 'Im a local property value' // 3          
    }      
 });  
</script>

So what's going on here? We created a Vue instance and pass It a configuration object.

el: As I said before, we have to tell Vue where we want our app to be displayed in our HTML. Div with the app ID in this ca
data object: Vue instance has a local storage system, such as a box of variables and properties that we can use when coding the app. Data holds a JavaScript object, so we assign it one with the { } syntax. Inside, we place a property.
myLocalProperty: This property is defined within the data object for our instance, the name is myLocalProperty and the value on the right is the value - a string in this case.

Displaying properties on our app

Right now, if you open index.html in your browser, there's not much going on.

Let's add some code:

<html>      
<head>          
<title>Vue 101</title>      
</head>        
<body>          
 <h1>Hi world!</h1>         
 <div id="app">            
 <p>My local property: {{ myLocalProperty }}</p>          
</div>            
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>            
<script>            
   const app = new Vue({              
     el: '#app',              
     data: {                
     myLocalProperty: 'Im a local property value'              
     }            
   });          
</script>

Be careful with this line:

<p>My local property: {{ myLocalProperty }}</p>

What's happening here is called variable interpolation, which is a fancy term for "I'm going to display the content of my myLocalProperty variable in this placeholder where my {{ }} are now.

Reload the page, and you will now see the string updates to reflect our variable.

Go ahead and try to change the string inside myLocalProperty to some other text and reload the page, you should see the text update accordingly.

Vue is a reactive framework

Let's discuss reactivity. You may have heard that Vue is a reactive framework. But what exactly does this mean? Open up your console in the chrome developer tools, and with your index.html loaded type:

app.myLocalProperty = 'Vue is reactive';

You will see the page react to this change!

Read Vue.js: a quick start guide for beginners. Part 2!

by Janeth Kent Date: 10-12-2019 javascript vueJs tutorial guide hits : 5282

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

A FULFILLED PROMISE - Using the FETCH API to make AJAX calls

In this article we talked about what AJAX calls are and how to use them in a traditional way, by using the XMLHttpRequest (XHR) object. In short, thanks to AJAX…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

A Java approach: While loop

Hello everyone and welcome back! After having made a short, but full-bodied, introduction about cycles, today we are finally going to see the first implementations that use what we have called…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

A Java approach: The Cycles - Introduction

Hello everyone and welcome back! Until now, we have been talking about variables and selection structures, going to consider some of the fundamental aspects of these two concepts. Theoretically, to…

A Java Approach: Selection Structures - Use Cases

Hello everyone and welcome back! Up to now we have been concerned to make as complete an overview as possible of the fundamental concepts we need to approach the use…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

A Java approach: boolean variables

The previous time, we talked extensively about Boolean variables, trying to outline the main operations that can be carried out at a practical level. Of all the cases examined, we have…

A Java approach: condtional structures

Hello everyone and welcome back! The previous times we have introduced the concept of variable, trying to define some basic concepts about it. However, some situations suggest that the concept of…

Hashmap: hashing, collisions and first functions

Today we are going to study some concepts closely related to hashmaps. The concepts we are going to see are hashing and collisions. Hashing The idea of hashing with chaining is to…