Vue.Js – introdução

Vue.Js – introdução

Hoje em nosso blog vamos ver mais um framework JS. Já vimos alguma coisa do Angular (6) e agora iremos abordar o Vue.js (pronúncia parecida com view).

O Vue.js é um framework JS para criação de interfaces do usuário com fácil integração com outras bibliotecas e projetos. O Vue.js pode ser uma boa opção para a criação de poderosas Single Page Applications.

Prática

Como todos os nossos post’s iremos ser práticos e vamos criar uma simples aplicação de exemplo. Vale lembrar que todo nossos exemplos foram baseado no guia oficial do site do Vue.js (https://vuejs.org/v2/guide/)

Crie um arquivo chamado index.html com o seguinte conteúdo:

<div id="app">
  {{ message }}</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Precisamos também em todos os exemplos realizar a chamada aos scripts do Vue, para isso adicione no arquivo index.html através da tag: “script src” o arquivo do Vue.js que pode ser baixado neste link:

https://br.vuejs.org/v2/guide/installation.html#Inclusao-Direta-com-lt-script-gt

Abra o arquivo no seu navegador e veja o resultado. Com esse pequeno exemplo podemos perceber que o Vue nos possibilita de forma simples e direta a renderização declarativa de dados para o DOM. O dado e o DOM agora estão linkados, graças ao grande trabalho que o Vue está realizando por baixo dos panos. Graças a esse link tudo em nossa pequena aplicação passou a ser reativo/reactive. Para comprovar abra o console do seu browser, tipo se estiver no firefox aperte f12 e navegue até a aba console, e digite:

app.message = "Vue.js é reativo"

Vamos ver mais um exemplo:

<div id="app-2">
  <span>
    Passe o mouse sobre este texto e veja!!!
  </span>
</div>


var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Você carregou está página as ' + new Date().toLocaleString()
  }
})

Neste exemplo adicionas um novo atributo em nosso div: v-bind. Esses tipos de atributos são chamados de diretivas/directive pelo Vue.js e sempre terão o prefixo v- para indicar que são atributos especiais fornecidos pelo Vue.

Está diretiva em especial diz para que o elemento title esteja sempre sincronizado com o valor de message na instância declarada do Vue.

Vamos ver o exemplo de mais uma diretiva o v-if:

<div id="app-3">
  <span>Agora você me vê!!!</span></div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});

Na aba console digite

app3.seen=false

Vamos a mais um exemplo:

<div id="app-4">
<ol>
	<li>
      {{ todo.text }}</li>
</ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Aprenda JavaScript' },
      { text: 'Aprenda Vue' },
      { text: 'Construa algo incrível' }
    ]
  }
})

Na aba console do navegador vamos inserir mais um elemento no nosso array:

app4.todos.push({ text: 'Mas sempre com Java no Back' })

Manipulando input’s de dados

Vamos ver uma diretiva para tratar entrada de dados do usuário, para tanto veja o exemplo auto explicativo abaixo:

<div id="app-5">

{{ message }}

  Reverse Message</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Para two-way binding podemos usar a diretiva v-model. Novamente veja o exemplo abaixo:

<div id="app-6">

{{ message }}</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Componentes

Componentes são um outro importante conceito do Vue.js. Componentes são nada mais do que uma instância do Vue com opções pré-definidas. Vamos registar um componente no Vue, veja como é simples e direto:

<div id="app-7">
<ol></ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '
	<li>{{ todo.text }}</li>
'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetais' },
      { id: 1, text: 'Queijo' },
      { id: 2, text: 'Agluma coisa que seja comestível por humanos' }
    ]
  }
})

Estude um pouco o exemplo acima e veja a ação das diretivas na construção de um elemento do Vue.

Conclusão

Neste pequeno tutorial vimos os conceitos básicos do Vue em exemplos didáticos, simples e baseados no guia oficial do Vue. Em um post futuro vamos criar uma aplicação um pouco mais robusta e um pouco mais orientada para o mundo real. Até breve.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s