índice
Introdução ao Vue
Vue (pronuncia-se / vjuː /, semelhante a view) é uma estrutura progressiva para construir interfaces de usuário.
Este tutorial é baseado na versão 2.x.
Learning Vue requer conhecimento de HTML, CSS e JavaScript.
Instalação Vue
A maneira mais fácil de usar o Vue.js é baixá-lo diretamente e importá-lo com a tag de script.
Download Vue.js
Download da versão do ambiente de desenvolvimento : inclui aviso completo e modo de depuração
Download da versão do ambiente de produção : tamanho e velocidade otimizados
<script src="vue.js" type="text/javascript"></script>
CDN
Para prototipagem ou aprendizagem, você pode usar a versão mais recente como esta:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Para ambientes de produção, recomendamos vincular a um número de versão e arquivo de compilação claros para evitar danos inesperados causados pela nova versão:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
Se você usar Módulos ES nativos, também há um arquivo de compilação compatível com Módulos ES:
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>
Você pode navegar pelo código-fonte do pacote NPM em cdn.jsdelivr.net/npm/vue.
O Vue também está disponível em unpkg e cdnjs (a atualização da versão do cdnjs pode demorar um pouco).
Certifique-se de entender as diferentes versões de compilação e usar a versão do ambiente de produção em seu site publicado, substitua vue.js por vue.min.js. Esta é uma construção menor que pode trazer uma experiência de velocidade mais rápida do que no ambiente de desenvolvimento.
NPM
A instalação do NPM é recomendada ao construir grandes aplicações com Vue [1]. O NPM funciona bem com empacotadores de módulo, como webpack ou Browserify. Ao mesmo tempo, o Vue também fornece ferramentas de suporte para desenvolver componentes de arquivo único.
# 最新稳定版
$ npm install vue
Ferramenta de linha de comando (CLI)
O Vue fornece uma CLI oficial para construir rapidamente estruturas complexas para aplicativos de página única (SPA). Ele fornece configurações de compilação com baterias para fluxos de trabalho front-end modernos. Leva apenas alguns minutos para estar pronto e funcionando com recarregamento a quente, verificação de lint ao salvar e versões de compilação disponíveis no ambiente de produção. Para obter mais detalhes, consulte a documentação do Vue CLI.
A ferramenta CLI pressupõe que o usuário tenha um certo nível de compreensão do Node.js e das ferramentas de construção relacionadas. Não é recomendado para iniciantes usar o vue-cli diretamente, especialmente se você não estiver familiarizado com as ferramentas de compilação baseadas em Node.js.
caso helloworld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
{
{ message }}
</div>
<script type="text/javascript">
var app = new Vue ({
el: '#app',
data: {
message: 'Hello Vue!',
}
})
</script>
</body>
</html>
Hello Vue!
Criamos com sucesso o primeiro aplicativo Vue! É muito parecido com a renderização de um template de string, mas o Vue fez muito trabalho nos bastidores. Agora os dados e o DOM foram associados e tudo está responsivo.
Como podemos confirmar? Abra o console JavaScript do seu navegador (basta abrir nesta página) e modifique o valor de app.message, você verá o exemplo acima atualizado de acordo.
Observe que não interagimos mais diretamente com HTML . Um aplicativo Vue irá montá-lo em um elemento DOM (#app neste exemplo) e então controlá-lo totalmente. Esse HTML é nossa entrada, mas o resto acontecerá dentro da instância Vue recém-criada.