Primeiros passos com Vue.js: entendendo o objeto Options

Defina a lógica do seu componente Vue usando o objeto Options.

Vue.js ganhou reputação como uma estrutura JavaScript progressiva. Você pode usar Vue.js para construir aplicativos de página única (SPAs) ou desenvolver interfaces de usuário específicas.

Aqui você aprenderá o básico do Vue.js, incluindo como criar um componente Vue e trabalhar com o objeto de opções para renderizar dados dinâmicos.

Incluindo Vue por meio do link CDN

Vue.js é uma das estruturas JavaScript mais populares. Para começar a usar o Vue e adicioná-lo à sua página HTML, copie a tag de script abaixo e cole-a na seção head:

<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>

Usar o link CDN é uma excelente opção para melhorar o HTML estático ou adicionar funcionalidades ao seu aplicativo.

No entanto, você precisa instalar o Vue.js via npm para usar mais de seus recursos avançados, como a sintaxe Single-File Component (SFC), que é útil ao construir aplicativos Vue completos.

Criando um aplicativo Vue

Acessar a biblioteca Vue através do link CDN fornece um objeto Vue, incluindo o método .createApp().

Como o nome indica, você pode criar um aplicativo Vue usando este método.

Por exemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <script>
      const app = Vue.createApp();
    </script>
  </body>
</html>

Aqui o aplicativo criado é armazenado na variável app. Depois de criar a instância do aplicativo, você deve renderizá-la usando o método .mount(). Este método informa onde montar o aplicativo no Document Object Model (DOM).

Igual a:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const app = Vue.createApp();
      app.mount("#app");
    </script>
  </body>
</html>

Para usar o método .mount() do Vue, você deve fornecer um elemento DOM ou seletor como argumento. Neste exemplo, montamos o aplicativo Vue usando o elemento DOM com o ID #app.

É importante observar que o aplicativo Vue controla apenas elementos que foram especificados usando um id. Além disso, o aplicativo não tem controle sobre nada fora desses elementos, incluindo eventos de clique ou qualquer outra interatividade.

A etapa final da criação de um aplicativo Vue é chamar o método .mount() após concluir todas as configurações do aplicativo.

O objeto Opções em Vue

No Vue.js, você usa o objeto Options como um objeto de configuração para criar uma instância ou componente do Vue.

É uma parte essencial de uma aplicação Vue, pois define o comportamento e os dados de cada instância ou componente. O objeto Options consiste em diversas propriedades que representam vários aspectos da instância ou componente.

Algumas das propriedades comumente usadas no objeto Options são:

dados: Esta propriedade define o objeto de dados para as aplicações Vue. É uma função que retorna um objeto que contém as propriedades dos dados e seus valores iniciais.
métodos: A propriedade métodos do objeto Options contém funções vitais para ativar a renderização dinâmica.
template: Esta propriedade define o template HTML para a instância ou componente Vue. É uma string contendo a marcação HTML, que o compilador de template do Vue pode analisar.

Observe que ao usar uma propriedade de modelo, o compilador Vue renderizará apenas o conteúdo definido no modelo.

Aqui está um exemplo de um aplicativo Vue com as propriedades dados, métodos e modelo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 @click="reverseMessage" >{{ text }}</h1>
    </div>
    <script>
      const app = Vue.createApp({
        // template: '<h1>Welcome to your Vue app</h1>',
        data() {
          return {
            text: "This is your Vue App"
          };
        },
        methods: {
          reverseMessage () {
            this.text = this.text.split('').reverse().join('')
          }
        }
    });
      app.mount("#app");
    </script>
  </body>
</html>

Este programa representa um aplicativo Vue básico que exibe o texto "Este é o seu aplicativo Vue" usando interpolação de texto e permite que os usuários cliquem nele para reverter a mensagem.

A função data() retorna um objeto com uma única propriedade chamada texto. A diretiva @click é usada para anexar um método reverseMessage() ao elemento

, que inverte o texto propriedade.
Ao executar este programa, o aplicativo Vue criado ficará assim:
Clicar no texto irá revertê-lo.

Observe que o programa comentou a propriedade do modelo para permitir que o conteúdo do aplicativo Vue seja renderizado. Se não for comentado, este aplicativo Vue mostrará apenas uma propriedade do modelo:
Existem outras propriedades como props e computed, que você também pode utilizar para criar aplicativos Vue poderosos e flexíveis ao configurar o objeto Options.

Interpolação de texto em Vue

A interpolação de texto no Vue é um recurso que permite vincular dados a elementos HTML dinamicamente. Em outras palavras, permitirá que você gere diretamente o valor das propriedades de dados de uma instância Vue no HTML.

Para obter interpolação de texto no Vue, você precisa colocar o nome da propriedade de dados entre chaves duplas. Vue interpreta o conteúdo entre chaves duplas como expressões JavaScript e os substitui pelo valor resultante.

Por exemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <p>Welcome {{ name }}</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            message: "This is your Vue app.",
            name: "Noble",
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

Neste exemplo, a interpolação de texto vincula as propriedades message e name do objeto de dados retornado na instância Vue a

e < elementos fortes>

. Depois que o aplicativo Vue é montado, ele exibe os valores das propriedades message e name no HTML em suas respectivas posições.

Você também pode exibir o resultado de uma chamada de método ou executar operações básicas de JavaScript entre chaves duplas:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <h3>Welcome {{ name.toUpperCase() }}</h3>
      <p>There are {{ nameLength() }} letters in your name.</p>
    </div>
    <p>not here</p>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            message: "This is your Vue App",
            name: "Noble Okafor",
          };
        },
        methods: {
          nameLength() {
            return this.name.length - 1;
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

Neste exemplo, o aplicativo Vue possui um objeto dados que contém duas propriedades: mensagem e nome.

Dentro do aplicativo Vue, os três elementos HTML exibem dados usando a instância Vue. O elemento h1 exibe o valor da propriedade message, enquanto o elemento h3 exibe o valor da propriedade name com um método toUpperCase() aplicado a ele.

O elemento p exibe o resultado retornado do método nameLength() definido no objeto methods do aplicativo Vue. O método nameLength() retorna o comprimento da propriedade name subtraído por um.

Para acessar um valor do objeto de dados no objeto de métodos, você precisa usar a palavra-chave this. esta palavra-chave refere-se à instância Vue atual e permite acessar suas propriedades e métodos de dentro da instância Vue. Ao usar this, você pode recuperar o valor da propriedade name e realizar quaisquer manipulações necessárias nela usando os métodos.

Este aplicativo Vue demonstra como vincular dados a elementos HTML usando interpolação de texto e como definir e chamar métodos em uma instância Vue.

Construa seu front-end usando Vue