Introdução ao petite-vue: um pequeno novo subconjunto do Vue

Como o petite-vue se compara ao Vue padrão

petite-vue é semelhante ao Vue de várias maneiras. Conforme mencionado, ele fornece a mesma sintaxe de modelo e modelo de @ vue/reatividade fornecidos pelo Vue padrão. No entanto, a diferença mais significativa é que o petite-vue foi feito para aprimoramento progressivo.

O Vue padrão foi projetado para usar uma etapa de construção para construir aplicativos de página única (SPAs) com interações pesadas. Ele usa funções de renderização para substituir os modelos DOM existentes. O Petite-vue, por outro lado, percorre o DOM existente e o transforma no local, portanto, não requer uma etapa de compilação.

recursos exclusivos do petite-vue

petite-O vue apresenta alguns novos recursos não disponíveis no Vue padrão que auxiliam na otimização do aprimoramento progressivo. Vamos dar uma olhada neles!

v-scope

Em petite-vue, o v-scope é uma diretiva que marca a região da página controlada por petite-vue. Você também pode usar a diretiva v-scope para passar estados aos quais uma determinada região de sua página terá acesso.

v-effect

v-effect é uma diretiva usada para execute declarações reativas embutidas em petite-vue. No snippet de código abaixo, a variável de contagem é reativa, então o efeito-v será executado novamente sempre que a contagem mudar e, em seguida, atualize o div com o valor atual de contagem:

Eventos de ciclo de vida

petite-vue vem com dois eventos de ciclo de vida, @mounted e @unmounted, que permitem que você escute quando o petite-vue é montado ou desmontado em sua página.

Recursos compatíveis com Vue

Agora que vimos os novos recursos que o petite-vue traz para a mesa, vamos revisar seus recursos que já existem no Vue:

{{}}: vinculações de texto v-bind e:: classe e estilo especial manipulação v-on e @: manipulação de eventos modelo v: representa todos os tipos de entrada e não string: vinculações de valor v-if/v-else/v-else-if v-for v-show v-hmtl v-pre v-once v-cloak reactive () nextTick () Refs do modelo

Recursos exclusivos do Vue

Devido ao seu escopo pequeno, o petite-vue diminuiu alguns dos Os recursos encontrados no Vue padrão:

ref () e computed () Funções Render: petite-vue não tem Reatividade DOM virtual para tipos de coleção: Map, Set, etc. Transition, keep-alive, e componentes v-for: deep destructure v-on=”object”v-is e v-bind: style auto-prefixing

Como petite-vue se compara a Alpine

Embora petite-vue tenha sido inspirado em Alpine e trate de problemas semelhantes, ele difere de Alpine devido ao seu minimalismo e compatibilidade com Vue.

petite-vue tem cerca de dois terços do tamanho de Alpino. Ao contrário da Alpine, não é fornecido com um sistema de transição.

Alpine e petite-vue têm designs diferentes. Embora Alpine se pareça com a estrutura do Vue em alguns aspectos, petite-vue é mais alinhado com o Vue padrão, minimizando a quantidade de sobrecarga que você terá se quiser fazer a transição entre Vue e petite-vue.

Introdução petite-vue

Para começar com petite-vue, você precisa incluir uma tag de script que aponta para o pacote petite-vue. Vamos criar um aplicativo de votação simples com petite-vue.

Primeiro, crie um arquivo index.html. No corpo dele, adicione o seguinte snippet de código:

O atributo defer na tag de script faz com que o script que carrega petite-vue carregue após o conteúdo HTML ser analisado pelo navegador.

O atributo init diz ao petite-vue para consultar e inicializar automaticamente todos os elementos que têm v-scope.

O v-scope informa ao petite-vue qual região da página tratar. Também passamos os estados upVotes e downVotes para estarem disponíveis para aquela região.

Inicialização manual

Se você não quiser que o petite-vue inicialize automaticamente todos os elementos que têm o v-scope atributo, você pode inicializá-los manualmente alterando o script:

Alternativamente, você pode usar a construção do módulo ES de petite-vue:

URL de produção do CDN petite-vue