Sou desenvolvedor full-stack da Syncrasy Tech (empresa de soluções de TI) . Adoro escrever códigos React. Mas por que estou dizendo isso enquanto estamos aqui para discutir as práticas recomendadas do Vue.js. para o desenvolvimento da web. Estou lhe dizendo isso para que você possa entender meu histórico e por que estou discutindo aqui o Vue.js.
Adoro trabalhar nos códigos React, mas odeio lê-los. Esta é a razão pela qual não consigo codificar. Mesmo com as melhores práticas de revisão de código, não consigo descobrir o aninhamento de componentes do React que simplesmente ajudam a criar estruturas de interface do usuário mais complexas em aplicativos da web.
A solução para esse problema é o Vue, que agora não é tão novo no bloco de desenvolvimento de aplicativos da web. Ouvi falar muito sobre componentes assíncronos do Vue, renderização no servidor, ferramentas e bibliotecas. Talvez você ache essa miríade de termos confusos. Acredite, você não está sozinho nisso, muitos desenvolvedores de todos os níveis se sentem da mesma maneira quando não conhecem as melhores práticas do Vue.
Alguns dias depois, finalmente decidi inserir meus códigos. O que estou compartilhando aqui são as inúmeras práticas recomendadas que aprendi com minha experiência com o Vue. Estou pronto para compartilhar o que encontraria.
Vamos começar
Tente aprender tudo de uma vez no Vue pode ser esmagador. Vamos começar com os números. Hoje, o Vue tem estrelas do 147K Github, deixando para trás os gigantes do JS como Angular (50,6k estrelas) e React (135k estrelas).
Dividi as melhores práticas do Vue em quatro categorias:
Vue funcionalidades
As funcionalidades do Vue têm muitas coisas para discutir automaticamente sob o capô. O Vue.js é uma plataforma simples, orientada a exibição, que é sua primeira vantagem principal. Todas as informações na codificação são válidas apenas se interagirem corretamente com as visualizações nomeadas nomeadas e aninhadas.
Criar uma visualização única é bastante simples no Vue, você só precisa carregar a interface e adicionar JavaScript para iniciar o desenvolvimento do seu aplicativo da web.
let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } })
Depois, um pouco de marcação para obter a visualização final:
<div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div>
O que o código acima revela?
O exemplo de codificação acima mostra como o Vue renderiza elementos automaticamente sem usar códigos. Sintaxe simples é usada para enviar os dados para exibição direta. A adição de propriedades da instância pode ser usada para renderização de elementos do Vue.
Os sistemas Vue, como o JQuery, mantêm as informações no DOM e, para todas as alterações adicionais, os desenvolvedores precisam executar a renderização e a modificação das partes relacionadas. Vamos para as outras partes das funcionalidades do Vue.
Componentes
Para aplicativos da Web, os desenvolvedores do Vue podem usar componentes como outras bibliotecas, usando o componente Vue.com. Um componente pode incluir um nome, configuração ou identificador.
Vue.component('component-name', { /* options */ })
Os componentes de arquivo único funcionam muito bem para projetos de desenvolvimento da web de pequeno a médio porte. É muito fácil usar os componentes do Vue em um único arquivo e por causa dos benefícios da lógica JavaScript, estilo CSS e modelo de código HTML. Além disso, veja um exemplo:
<template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style>
Os componentes de arquivo único do Vue usam o WebPack para fornecer a capacidade de usar e aplicar recursos modernos da web ao seu aplicativo web. Os codificadores podem especificar um modelo criado usando Pug usando pré-processadores:
TypeScript
SCSS
Sass
Menos
Postcss
Pug
A função vue v-bind Vue permite que os componentes aceitem dados dos componentes pai (Props) que podem ser vistos na matriz de strings:
props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
Isso não apenas documentará seus componentes, mas também o alertará quando você passar um tipo de código errado no console JavaScript do navegador.
Em resumo, o Vue oferece grande flexibilidade aos desenvolvedores de aplicativos da Web que se adaptam a diferentes estratégias de desenvolvimento e também facilitam a interação com diferentes bibliotecas do Vue.
Eventos e manipuladores para manipular erros no Vue
O Vue JS é uma estrutura JS progressiva que se concentra na camada de visualização e em um sistema de bibliotecas de suporte. Para todos os estágios do desenvolvimento de aplicativos da Web que usam o Vue, os eventos são criados nas diretivas v-on e dois pontos usados para identificar o tipo de evento, como o v-on click.
Um exemplo simples de v-on pode ser este:
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
Alguns exemplos de eventos HTML DOM no Vue:
em mudança
no clique
em pairar
em carga
ao sair do mouse
ao passar o mouse
em carga
Manipuladores de Eventos no Vue JS
Os manipuladores são designados para lidar com os erros que ocorrem nos eventos. Ele permite que um desenvolvedor escreva o código quando um evento especificado é acionado.
Renderização condicional e loops no Vue
A renderização condicional no Vue significa remover ou adicionar alguns elementos do DOM se um valor especificado for verdadeiro. Essa é a melhor maneira de ligação de dados condicional que permite que os desenvolvedores conectem informações quando uma condição específica for verdadeira. Você pode usar v-if diretiva v-if para renderização condicional.
Veja um exemplo:
<template> <div> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script>
Você pode usar v-else para estender a diretiva v-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Você pode estender ainda mais usando o bloco v-else-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Se o valor que um programador deseja avaliar for verdadeiro, execute o modelo v-if . Para outras extensões, a diretiva v-else ou v-if-else é acionada.
O Vue JS contém um protocolo API simples que permite liberar espaço para a diretiva v-for que renderiza uma lista de itens no DOM.
Exemplo:
<template> <ul> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script>
Na codificação acima, um loop percorre o código na forma da matriz usando v-for diretiva v-for . A matriz refere-se a objetos que permitem aos usuários ver propriedades presentes dentro da matriz.
Saída:
samuel queen rinha
Ligação de dados bidirecional para acelerar o processo de desenvolvimento
Um dos principais recursos do Vue é a ligação bidirecional reativa que mantém seus dados, matrizes e variáveis em sincronia com o DOM sem exigir que você faça qualquer outra coisa. O Vue usa v-model diretiva v-model para ligação bidirecional. A diretiva v-model vincula o elemento de entrada à propriedade name usando diretivas v-model que atualizam o campo de entrada e também atualizam o campo de propriedade name associado a ele.
Como isso funciona?
<template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script>
A diretiva v-model vem com a opção do modificador .lazy que atualiza a propriedade data após a ocorrência do evento de alteração.
Você também pode usar a função .trim para remover o espaço em branco do seu código.
A opção do modificador .number está lá se você quiser aceitar números no campo de entrada.
Por fim, esses são os principais pontos fortes do Vue.js que você pode usar para codificar seus aplicativos da web corretamente. Portanto, se você está iniciando um novo projeto de desenvolvimento web, o Vue.js é a sua escolha. Ele lidera o jogo com seus recursos elegantes, diretrizes de estilo, codificação fácil e também economiza seus esforços.