Vue.js 2.0 e atributos HTML

O Vue.js é um framework javascript progressivo, extremamente acessível, versátil (permite manipular aplicativos de qualquer escala), leve, performático (18kb min + gzip) e com suporte completo para ECMAScript 5.

Um dos recursos que considero mais poderosos do Vue.js é a programação orientada a componentes, que permite estender elementos básicos de HTML para encapsular código reutilizável. Em alto nível, os componentes são elementos personalizados no qual o compilador do Vue.js injeta os seus comportamentos. Em alguns casos, eles também podem aparecer como elementos HTML nativos porém estendidos como um atributo especial e personalizável.

Instalação

Há diversas maneiras de instalar o Vue.js em uma aplicação, a maneira mais simples e não recomendada para ambiente de produção é a importação do script via CDN

NPM

O NPM é o método de instalação recomendado ao se construir aplicações de grande porte com o Vue.js. Ele combina muito bem com pacotes de módulos, como o Webpack e/ou Browserify. O Vue.js também fornece ferramentas de acompanhamento para a criação de componentes em um único arquivo.

$ npm install vue

Vue.js CLI

O Vue.js fornece também um CLI oficial para construção de aplicações de página única (Single Page Application). Fornecendo compilações para um fluxo de trabalho de front-end moderno. Leva apenas alguns minutos para começar a funcionar com hot-reload, lint-on-save e para automatizar suas builds.

Entretanto o uso do CLI pressupõe conhecimento prévio do Node.js e das ferramentas de compilação associadas.

Se você é novo no Vue ou nas ferramentas de compilação de front-end, sugerimos fortemente que você passe por esse guia sem utilizar as ferramentas de compilação antes de usar o CLI.

E os atributos HTML?

Como todos sabemos, os atributos HTML não diferenciam maiúsculas de minúsculas (case insensitive), portanto, ao usar os modelos não-string, os nomes de propriedades camelCased precisam usar seus equivalentes kebab-case (delimitados por hífen).

camelCase vs kebab-case

Inicialmente isso influencia negativamente, gerando muitas duvidas durante o desenvolvimento, ao se utilizar o formato camelCase para definir variáveis, métodos, funções computadas, nomes de componentes e etc… no entanto para utiliza-los na aplicação deve-se seguir o padrão kebab-case.

PS: A boa notícia é que essa limitação não se aplica ao utilizar o sistema de templates

O empacotador junto ao compilador ajusta todas as nomenclaturas. =)

O Vue.js é extremamente poderoso, possui uma curva leve de aprendizado e ajuda a reduzir o código fonte da aplicação ao se comparar com soluções como jQuery. O Two-way Data Binding usa uma implementação baseada em DOM, porém é extremamente eficiente.

Recomendo!

Abraços; Thiago Pereira Rosa.