Inserindo o Vue.js no projeto

Utilizando o projeto da aula passada, vamos adicionar o Vue.js através de um CDN, para facilitar nossa vida. É possível integrar um Vue em um projeto de diferentes maneiras, como pode ser visto na documentação de instalação em: https://br.vuejs.org/v2/guide/installation.html

Se preferir, antes de alterar o projeto da aula passada, faça uma cópia inteira dele para outra pasta chamada "vueanimais", somente para ter as duas versões na sua máquina.

Na versão Vue da sua aplicação, abra o arquivo em "/pages/animais.html" e adicione a seguinte linha dentro da tag HEAD, logo depois das linhas que adicionam o Bootstrap:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vamos inicialmente "limpar" todo o Javascript e algumas outras coisas na nossa página. Para isso precisamos fazer algumas mudanças.

Remova todo o javascript atualmente no projeto (inclusive as tags <script> e </script>
Remova todos os atributos "id" e "onChange" dos elementos, deixando somente o atributo "class="container" do DIV principal e o "class="form-select" no SELECT.
No FINAL do HTML, entre as tags </body> e </html> adicione uma nova tag <script></script> que conterá todo o código do Vue. Essa tag ser no final do documento é importante pois o Vue precisa ser executado como o último passo da página, quando o HTML já está pronto. Vamos ainda colocar o código javascript do Vue aí.

Sua página limpa, somente com o Vue adicionado por CDN e sem nenhum Javascript ficará assim:


<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>Animais</title>

</head>

<body>
  <div class="container" >
    <h1>Animais</h1>
    <select class="form-select">
      <option value="">Escolha um tipo abaixo</option>
      <option value="caes">Cães</option>
      <option value="gatos">Gatos</option>
    </select>
    <ul>
    </ul>

  </div>

</body>
<script>
<!-- aqui ficará o código do Vue -->
</script>

</html>

Sim, perdemos toda a parte dinâmica, mas calma, vamos adicionar novamente usando o Vue.js

Termo de uso

arrow_back Aula 08 - Comportamento reativo com o Vue.js

Inserindo o Vue.js no projeto

Aula 08 - Comportamento reativo com o Vue.js