Archives

Here's the long list of articles I wrote in these years, in Italian and English.
 

Un giro nell'universo React

Da quando React è stato rilasciato da Facebook è diventato rapidamente una delle librerie più usate per la realizzazione di interfacce web. Come mai?

Perchè la Green Card è una lotteria?

Ho beccato un post on line in cui si chiedeva se un lavoratore da remoto può lavorare dagli USA per clienti italiani. La risposta precisa ve la potrà dare solo un avvocato esperto (o il consolato USA); semplifichiamo dicendo che se si lavora dal territorio USA bisogna pagare le tasse americane. Per lavorare legalmente in USA ci sono molte strade: la Green Card è una di queste.

VueJS basics

It has been a long week for me, I’m studying very hard VueJS - this time by coding real examples - and I confirm that there are some very good concepts backed in.

Separation of data and methods

This is a basic html containing some VueJS markup:

<html>
  ...
  <body>
  	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  	<div id="app">
  	  <h2>{{ message }}</h2>
      <p>{{ sayHelloTo(name) }}</p>
  	</div>
  </body>
</html>

This is a basic VueJS element:

new Vue({
  el: '#app',
  data: {
    message: 'Hello from Vue!',
    name: 'Michele'
  },
  methods: {
    sayHelloTo: function(name) {
      return `Hello, ${this.name}!`
    }
  }
})

Let’s describe this snippet:

  • the el references the DOM element with the #app id. This element will be Vuezed.
  • the data object contains the data that can be used inside the HTML: for example, we used the message property in the Html.
  • the methods property contains the methods you can use in your html. These are useful for calculations or for actions, like clicking on a button.

I acutally like a lot: a clear separations of data and methods.

This is a concept that comes from the functional programming world, that is, separate the data from the functions that interact with this data.

However, Vue is not functional in the classic sense of the definition, because you use the this keyword to access data & you’re not forced to write pure functions, etc etc.

A word on this

Have you noticed that from the methods section, if you want to access data properties, you use this ?

In fact, Vue proxies the this keyword so that you can access to data without writing this.data.message.

However, for this to work you must write 90% of the time the old ES5 function() declaration: this is expecially clear in VueJS components, an argouments we’ll talk in another post.

Newer >> << Older