Vue.componentes js

Vue.O JS é uma estrutura de JavaScript progressiva, usada para criar UIS (interfaces de usuário) e spas (aplicativos de uma página única). Podemos começar a criar aplicativos da web em Vue.JS com o conhecimento básico de HTML, CSS e JavaScript. Vue.O JS é construído combinando os melhores recursos das estruturas angulares e de reação já existentes. Os desenvolvedores gostam de codificar e sentir liberdade e conforto ao criar aplicativos em vue.JS.

Essa abordagem baseada em componente foi basicamente inspirada e escolhida nos reactjs. Escrevemos código na forma de componentes para que possamos importar esse componente e reutilizá -lo onde quer que precisemos. Vue.JS oferece um componente de arquivo único, o que o torna um código frouxo e reutilizável.

Vue.O JS oferece a melhor abordagem baseada em componentes, como qualquer que seja um desenvolvedor que precise; Ele pode encontrá -lo em um único .arquivo de vue. Os desenvolvedores se sentem tão confortáveis ​​e à vontade quando não precisam se preocupar ou cuidar da estrutura extra de um componente.

Neste artigo, daremos uma olhada no componente de arquivo único, que tem um .Extensão de Vue. Então, vamos dar uma olhada em um exemplo de componente de vue muito simples e entendê -lo.

Este é um exemplo muito simples e básico de um componente vue. Em que podemos ver que o código está dividido em três camadas. Esta sintaxe de três camadas é a melhor parte do Vue.JS. Satisfaz a separação de preocupação, mas em um único .arquivo de vue. Temos nosso modelo (html), lógica em JavaScript e estilo dentro de um componente.

• Modelo
• Roteiro
• Estilo

Modelo

Nesta tag de modelo, escrevemos nosso código HTML. Podemos vincular variáveis ​​nisso também usando o vue.JS Sintaxe de ligação a dados, e podemos adicionar outras funcionalidades também usando o Vue.JS forneceu sintaxe para as respectivas funcionalidades.

Roteiro

Esta é a seção em que podemos escrever a lógica do componente em JavaScript seguindo as sintaxes de Vue.JS. Todas as funcionalidades e lógica de um componente vão aqui. Por exemplo,

• Importando outros componentes e pacotes necessários.
• Declaração variável
• Métodos/funções
• Ganchos de ciclo de vida
• Propriedades e observadores computados
• E assim por diante…

Estilo

É aqui que escrevemos o estilo no CSS do componente, ou podemos usar qualquer pré -processador que queremos usar.

Isso é apenas um vislumbre de um componente em vue.JS. Vamos dar uma olhada no uso, organização e fluxo de dados entre os componentes um pouco.

Importar e usar componentes

Para usar o componente, primeiro precisamos importar o componente. Caso contrário, como pode vue.JS sabem sobre isso? Podemos simplesmente importar um componente adicionando uma instrução "importar" no início da tag de script e declarando esse componente no objeto "componentes", usando a seguinte sintaxe.

Depois de importar o componente com sucesso, podemos usá -lo no modelo como este