Header Ads Widget

header ads

Vamos aprender VueJS 3

geraldopcf outubro 16, 2022

 VueJS é um dos 3 frameworks de JavaScript mais utilizados, vou focar no aprendizado direto e documentar cada detalhe que julgar importante.

Obviamente você deve ter um bom conhecimento prévio de JavaScript, com o VueJS podemos como:

CDN  - precisamos linkar o link na head - Vamos focar nesse por enquanto!
CLI - instalação local completa na máquina, mais o objetivo aqui é dominar primeiro a versão CDN, posso chamar de lite.

Quero evitar ficar replicando informação então visite meu GitHub e copie o link de CDN do VueJS 3
DevMap/Vue_3_CDN.md at main - geraldotech/DevMap (github.com)


Getting Started:

Antes de começar a codar, ::before é necessário fazer uma div com uma id, já percemos que as variáveis ficam entre {{}}

      

{{name}}

Abra a tag script dentro do body ou crie link o seu script externamente, para facilitar minha documentação vou deixar tudo no mesmo código.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VueJS</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
      :root {
        color-scheme: dark;
      }    
    </style>
  </head>
  <body>

    <div id="app">     
      <p>{{name}}</p>      
    </div>

    <script>
Vue.createApp({
  data(){
    return{
      name: "Hello Dev!",
    }
  }
}).mount(app);
    </script>
  </body>
</html>

A saída será: Hello Dev!


v-model - atualizando variável em tempo real com input

<div id="app">     
    <input type="text" v-model="InputVal">
    <p>{{InputVal}}</p>
   </div>


   <script>
Vue.createApp({
 data(){
   return{
     InputVal: '',
   }
 }
}).mount(app);
   </script>


Methods - são com functions dentro do Vue




    <div id="app">     
        <h1>Title: {{title}}</h1>
        <h3>Author: {{author}}</h3>
       <h1> {{show()}}</h1> <!--chama a funcao -->
      </div>
  
      <script>
  Vue.createApp({
    data(){
      return{
       title: "technotesbr",
       author: "Geraldo Dev",
       topic: "VueJS"
      }
    },methods:{
      show(){
        return `Bem vindo ao ${this.title} no topico de ${this.topic} by ${this.author}`
      }
    }
  }).mount(app);
      </script>

Output:



@click methods
<div id="app">     
    <h1>Title: {{title}}</h1>
    <h3>Author: {{author}}</h3>     

    <button @click="show()">Click</button>
   <h2 id="views"></h2>
  </div>

  <script>

Vue.createApp({
data(){
  return{
   title: "technotesbr",
   author: "Geraldo Dev",
   topic: "VueJS"
  }
},methods:{
  show(){
    //document.getElementById("views");
   views.innerHTML = "Ola, Dev"; //chamando a ID diretamente no DOM

   //esconde o text depois de 2 seconds
   setTimeout(() => {
     views.innerHTML = ""
   }, 2000);
  }
}
}).mount(app);
  </script>

Output:



Toggle  @click v-if / v-else:

<div id="app">        
    <button @click="awesome = !awesome">{{ awesome ? 'Esconder' : 'Mostrar'}}</button>
    <p v-if="awesome">Vue is awesome</p>
    <p v-else>conteudo oculto</p>
  </div>    
  <script>

Vue.createApp({
data(){
  return{
    awesome: ''
  }
},methods:{
    
}
}).mount(app);
  </script>

Output:



Tags:

Postar um comentário

0 Comentários

Comentários são sempre bem vindos.
Para links quebrados entre em contato.
Os comentários são moderados.
Não respondemos a comentários realizados pelo Facebook pois este nem sempre nós notifica sobre novos comentários.