Vue.js ganhou sua reputação como um framework JavaScript progressivo. Você pode usar o Vue.js para criar 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.

Vue.js é um dos frameworks JavaScript mais populares. Para começar com o Vue, e para adicioná-lo à sua página HTML, copie a tag script abaixo e cole-a na seção head:

<roteiroorigem="">roteiro>

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

No entanto, você precisa instalar o Vue.js via npm para usar mais de seus recursos avançados, como a sintaxe de componente de arquivo único (SFC), que é útil ao criar aplicativos Vue completos.

Criando um aplicativo Vue

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

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

Por exemplo:

html>
<htmlidioma="en">
<cabeça>
<título>aplicativo Vuetítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<roteiro>
 app const = Vue.createApp();
roteiro>
corpo>
html>

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

Igual a:

html>
<htmlidioma="en">
<cabeça>
<título>aplicativo Vuetítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<diveu ia="aplicativo">div>
<roteiro>
 app const = Vue.createApp();
 app.mount("#app");
roteiro>
corpo>
html>

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

É importante observar que o aplicativo Vue controla apenas os elementos que foram especificados usando um eu ia. 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 .mount() método depois de concluir todas as configurações do aplicativo.

O objeto Options no Vue

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

É uma parte essencial de um aplicativo Vue, pois define o comportamento e os dados de cada instância ou componente. O Opções objeto consiste em várias propriedades que representam vários aspectos da instância ou componente.

Algumas das propriedades comumente usadas no Opções objeto são:

• dados: Esta propriedade define o objeto de dados para os aplicativos Vue. É uma função que retorna um objeto que contém as propriedades dos dados e seus valores iniciais.
• métodos: O métodos A propriedade do objeto Options contém funções vitais para habilitar a renderização dinâmica.
• modelo: Esta propriedade define o modelo HTML para a instância ou componente Vue. É uma string contendo a marcação HTML, que o compilador de modelo 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 o dados, métodos, e modelo propriedades:

html>
<htmlidioma="en">
<cabeça>
<título>aplicativo Vuetítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<diveu ia="aplicativo">
<h1 @clique="mensagem reversa" >{{ texto }}h1>
div>
<roteiro>
const app = Vue.createApp({
// modelo: '
Bem-vindo ao seu aplicativo Vue
',
 dados() {
retornar {
 texto: "Este é o seu aplicativo Vue"
 };
 },
 métodos: {
 mensagem reversa () {
esse.texto = esse.text.split('').reverse().join('')
 }
 }
 });
aplicativo.mount("#aplicativo");
roteiro>
corpo>
html>

Este programa descreve 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 inverter a mensagem.

O dados() função retorna um objeto com uma única propriedade chamada texto. O @clique diretiva é usada para anexar um mensagemreversa() método para o elemento, que inverte o texto propriedade.

Ao executar este programa, o aplicativo Vue criado ficará assim:

Clicar no texto o inverterá.

Observe que o programa comentou a propriedade do modelo para permitir que o conteúdo do aplicativo Vue seja renderizado. Se deixado sem comentários, este aplicativo Vue mostrará apenas uma propriedade de modelo:

Existem outras propriedades como adereços e calculado, 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, ele permitirá que você imprima diretamente o valor das propriedades de dados de uma instância Vue no HTML.

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

Por exemplo:

html>
<htmlidioma="en">
<cabeça>
<título>aplicativo Vuetítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<diveu ia="aplicativo">
<h1>{{ mensagem }}h1>
<p>Bem-vindo {{ nome }}p>
div>
<roteiro>
 app const = Vue.createApp({
 dados() {
 retornar {
 mensagem: "Este é o seu aplicativo Vue.",
 nome: "Nobre",
 };
 },
 });
 app.mount("#app");
roteiro>
corpo>
html>

Neste exemplo, a interpolação de texto vincula o mensagem e nome propriedades do objeto de dados retornado na instância Vue para o e elementos. Depois que o aplicativo Vue é montado, ele exibe os valores do mensagem e nome propriedades 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 colchetes duplos:

html>
<htmlidioma="en">
<cabeça>
<título>aplicativo Vuetítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<diveu ia="aplicativo">
<h1>{{ mensagem }}h1>
<h3>Bem-vindo {{ name.toUpperCase() }}h3>
<p>Existem {{ nameLength() }} letras em seu nome.p>
div>
<p>aqui nãop>
<roteiro>
 app const = Vue.createApp({
 dados() {
 retornar {
 mensagem: "Este é o seu Vue App",
 nome: "Nobre Okafor",
 };
 },
 métodos: {
 nomeComprimento() {
 retornar este.nome.comprimento - 1;
 },
 },
 });
 app.mount("#app");
roteiro>
corpo>
html>

Neste exemplo, o aplicativo Vue tem um dados objeto 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 h1 elemento exibe o valor do mensagem propriedade, enquanto o h3 elemento exibe o valor do nome propriedade com um toUpperCase() método aplicado a ele.

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

Para acessar um valor do objeto de dados no objeto de métodos, você precisa usar esse palavra-chave. esse A palavra-chave refere-se à instância Vue atual e permite que você acesse suas propriedades e métodos de dentro da instância Vue. usando esse, você pode recuperar o valor do nome propriedade e realizar quaisquer manipulações necessárias usando o 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

Neste artigo, você aprendeu como começar a trabalhar com Vue e interpolar texto com a sintaxe de modelagem do Vue. Você pode acessar vários outros recursos no Vue, como diretivas e ganchos de ciclo de vida, tornando-o uma excelente opção para criar aplicativos front-end dinâmicos.