Vue.Js: a Quick Start Guide For Beginners. Part 1.

by admin admin 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.

  1. 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
  2. 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.
  3. 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 admin admin Date: 10-12-2019 javascript vueJs tutorial guide hits : 4370  
 
 
 
 

Related Posts

    JavaScript. What's new in ES2020?

    As we discussed in our article about the ES2019 features you should try, ECMAScript's proposals will continue to grow and give rise to new implementations. Therefore, you can already access the…

    Amazing Javascript Game Source Codes for Free

      In this article we will share the code to make simple games with Javascript programming language. The games code can later be your reference material for making other simple games. Before…

    Linux for Dummies: Ubuntu Terminal

    I introduced in the previous article, available here, the basic concepts concerning the Linux world. Today we are going to have a look to some basic operations that we can perform…

    Linux for Dummies: Introduction

    If you have thought about migrating from Windows to a Unix operating system, or Linux specifically there are things you should know. The goal is to give essential information (and…

    Cross-Origin Resource Sharing (CORS) and examples of XSS and CSRF

    Cross-Origin Resource Sharing (CORS) enables web clients to make HTTP requests to servers hosted on different origins. CORS is a unique web technology in that it has both a server-side…

    Java Design Pattern: Strategy Pattern

    One of the most popular patterns is the Strategy Pattern. It is also one of the easiest patterns. It is a member of the behavioral patterns family, it has the duty…

    Java Sorting Algorithm: Bubble Sort

    Programming, the need to order the collections of data or objects that must then be manipulated often arises. Ordering a list can be useful in cases where you have to do…

    How to Generate Static Sites with JavaScript Static Sites Generators

    Static websites and so-called JAMstack have become pretty popular recently. And with 2020 on the horizon, this trend doesn't seem to be stopping. Why? Why is old-school HTML + CSS…

    Java Sorting Algorithms: Quick Sort

    Welcome back to this overview about the Java world! Today, we are going to talk about a renowned sorting algorithm: the Quick Sort. The Quick Sort is not very suitable for educational purposes because…

    Java Design Pattern: Factory Method Pattern

    Going on with the speach about design patterns started previously, we are going to talk about another pattern often used: the Factory Method Pattern. The GoF (Gang of Four Design Patterns)…

    Java 12, finally less verbose?

    We all know Java for its characteristics thanks to which, despite more than 20 years have passed since the first version, it is still one of the most studied and…

    Angular vs React vs Vue: Which is the Best Choice?

    With the growing popularity of Vue, Angular and React as frameworks and libraries for the web and app development, a constant doubt is which of these 3 we should learn,…