{"id":3441,"date":"2023-09-10T22:00:59","date_gmt":"2023-09-11T01:00:59","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3441"},"modified":"2025-09-02T14:42:30","modified_gmt":"2025-09-02T17:42:30","slug":"vue-js-uma-introducao-ao-framework","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2023\/09\/10\/vue-js-uma-introducao-ao-framework","title":{"rendered":"Vue.js: Uma introdu\u00e7\u00e3o ao framework"},"content":{"rendered":"\n

Ol\u00e1 Pessoal! Nesta edi\u00e7\u00e3o do PET Reda\u00e7\u00e3o, vamos entender mais sobre um framework muito utilizado no mercado de desenvolvimento web, o Vue.js.<\/span><\/p>\n

\u00a0<\/p>\n

O que \u00e9 e como funciona
<\/strong><\/h2>\n

Atualmente em sua terceira vers\u00e3o, o Vue.js \u00e9 um framework JavaScript para construir interfaces de usu\u00e1rio. Ele utiliza HTML, CSS e JavaScript padr\u00e3o e oferece um modelo de programa\u00e7\u00e3o declarativo e baseado em componentes que auxilia no desenvolvimento eficiente de interfaces, independentemente de sua complexidade.<\/span><\/p>\n

\u00a0<\/p>\n

Compara\u00e7\u00e3o com outros frameworks<\/strong><\/h2>\n

Ao comparar o Vue.js com outros frameworks populares, como React e Angular, \u00e9 poss\u00edvel observar algumas semelhan\u00e7as e diferen\u00e7as importantes. Essas compara\u00e7\u00f5es podem ajudar a entender melhor o Vue.js e como ele se destaca em rela\u00e7\u00e3o a outros frameworks. Vamos dar uma olhada em algumas dessas compara\u00e7\u00f5es a seguir.<\/span><\/p>\n

    \n
  • React<\/b>: Vue.js e React compartilham muitas semelhan\u00e7as, como o uso de um DOM virtual e a oferta de componentes de visualiza\u00e7\u00e3o reativos e compostos. No entanto, eles diferem em sua implementa\u00e7\u00e3o interna e abordagem para otimiza\u00e7\u00e3o de desempenho, por exemplo, o Vue.js usa um sistema de reatividade baseado em observadores para rastrear altera\u00e7\u00f5es nos dados e atualizar automaticamente a interface do usu\u00e1rio quando necess\u00e1rio. J\u00e1 o React oferece a possibilidade de usar o m\u00e9todo shouldComponentUpdate<\/i> para controlar quando um componente deve ser atualizado, evitando renderiza\u00e7\u00f5es desnecess\u00e1rias.<\/span><\/li>\n
  • Angular<\/b>: Vue.js \u00e9 considerado mais simples do que o Angular em termos de API e design, o que permite aos desenvolvedores aprenderem rapidamente e se tornarem produtivos. Al\u00e9m disso, o Vue.js \u00e9 mais flex\u00edvel e menos opinativo do que o Angular, permitindo que os desenvolvedores estruturem seus aplicativos da maneira que desejarem.<\/span><\/li>\n<\/ul>\n

    \u00a0<\/p>\n

    Exemplos de uso do Vue.js<\/strong><\/h2>\n

    Como comentado anteriormente, o Vue.js \u00e9 um framework JavaScript progressivo que pode ser usado de v\u00e1rias maneiras para criar aplicativos da web. Vejamos algumas abordagens.<\/span><\/p>\n

      \n
    • Script aut\u00f4nomo<\/b>: O Vue.js pode ser usado como um arquivo de script aut\u00f4nomo, sem a necessidade de uma etapa de constru\u00e7\u00e3o. Isso geralmente \u00e9 \u00fatil se voc\u00ea j\u00e1 tiver um framework de backend renderizando a maior parte do HTML ou se a l\u00f3gica do frontend n\u00e3o for complexa o suficiente para que seja necess\u00e1ria uma etapa de constru\u00e7\u00e3o.<\/span><\/li>\n
    • Web Components incorporados<\/b>: <\/span><\/span>\u00c9 poss\u00edvel usar o Vue.js para criar Web Components padr\u00e3o que podem ser incorporados em qualquer p\u00e1gina HTML, independentemente de como eles s\u00e3o renderizados. Os Web Components resultantes podem ser incorporados em aplicativos legados, HTML est\u00e1tico ou at\u00e9 mesmo aplicativos constru\u00eddos com outros frameworks. Isso oferece flexibilidade e permite que voc\u00ea aproveite os recursos em qualquer contexto.<\/li>\n
    • Aplica\u00e7\u00e3o de p\u00e1gina \u00fanica (SPA)<\/b>: Algumas aplica\u00e7\u00f5es requerem interatividade rica e profundidade no frontend. A melhor maneira de construir essas aplica\u00e7\u00f5es \u00e9 usar uma arquitetura onde o Vue.js n\u00e3o apenas controla toda a p\u00e1gina, mas tamb\u00e9m lida com atualiza\u00e7\u00f5es de dados e navega\u00e7\u00e3o sem ter que recarregar a p\u00e1gina. Esse tipo de aplica\u00e7\u00e3o \u00e9 geralmente chamado de Aplica\u00e7\u00e3o de P\u00e1gina \u00danica (SPA). O Vue.js fornece bibliotecas principais e suporte abrangente a ferramentas com uma experi\u00eancia incr\u00edvel para desenvolvedores para construir SPAs.<\/span><\/li>\n<\/ul>\n

      \u00a0<\/p>\n

      Como come\u00e7ar a usar o Vue.js<\/strong><\/h2>\n

      Para come\u00e7ar a usar o Vue.js, voc\u00ea pode seguir os seguintes passos:<\/span><\/p>\n

        \n
      1. Instale o Node.js:<\/b> Certifique-se de ter uma vers\u00e3o atualizada do Node.js instalada em seu computador.<\/span><\/li>\n
      2. Instale o Vue CLI:<\/b> O Vue CLI \u00e9 uma ferramenta de linha de comando que ajuda a criar e gerenciar projetos Vue.js. Para instal\u00e1-lo, abra um terminal e execute o comando npm install -g @vue\/cli2<\/code>.<\/span><\/li>\n
      3. Crie um novo projeto:<\/b> Com o Vue CLI instalado, voc\u00ea pode criar um novo projeto Vue.js executando o comando vue create nome-do-projeto<\/code>, onde nome-do-projeto \u00e9 o nome do seu projeto.<\/span><\/li>\n
      4. Execute o projeto:<\/b> Depois de criar o projeto, navegue at\u00e9 a pasta do projeto e execute o comando npm run serve<\/code> para iniciar o servidor de desenvolvimento local.<\/span><\/li>\n<\/ol>\n

        \u00a0<\/p>\n

        Al\u00e9m disso, existem muitos recursos dispon\u00edveis para ajud\u00e1-lo a come\u00e7ar a usar o Vue.js na pr\u00f3pria documenta\u00e7\u00e3o do framework, podendo ser acessada em \u201chttps:\/\/vuejs.org\/guide\/introduction.html\u201d<\/span><\/p>\n

        \u00a0<\/p>\n

        Veja um exemplo de \u2018Hello World\u2019 utilizando vue:<\/span><\/p>\n

        <template><\/span><\/code><\/p>\n

        \u00a0\u00a0<h1>{{ message }}<\/h1><\/span><\/code><\/p>\n

        <\/template><\/span><\/code><\/p>\n

        <script setup><\/span><\/code><\/p>\n

        import { ref } from 'vue'<\/span><\/code><\/p>\n

        const message = ref('Hello World!')<\/span><\/code><\/p>\n

        <\/script><\/span><\/code><\/p>\n

        \u00a0<\/p>\n

        Dados reativos:<\/strong><\/h2>\n

        O Vue.js possui um sistema de dados reativos. Isso significa que quando voc\u00ea muda o estado do seu aplicativo (por exemplo, atualizando uma vari\u00e1vel), o Vue automaticamente atualiza a interface do usu\u00e1rio para refletir essa mudan\u00e7a. Aqui est\u00e1 um exemplo:<\/span><\/p>\n

        var app = new Vue({
        \u00a0 \u00a0el: '#app',
        \u00a0 \u00a0data: {
        \u00a0 \u00a0 \u00a0 mensagem: 'Ol\u00e1 Vue!'
        \u00a0 \u00a0}
        })<\/code><\/p>\n

        Neste exemplo, mensagem \u00e9 uma propriedade reativa. Se voc\u00ea alterar o valor de mensagem, qualquer parte da interface do usu\u00e1rio que esteja exibindo mensagem ser\u00e1 automaticamente atualizada.<\/span><\/p>\n

        \u00a0<\/p>\n

        Diretivas<\/strong><\/h2>\n

        As diretivas s\u00e3o instru\u00e7\u00f5es especiais que voc\u00ea pode usar em seu HTML para controlar o comportamento do DOM. No Vue.js, as diretivas s\u00e3o prefixadas com v- para indicar que s\u00e3o atributos especiais fornecidos pelo Vue. Por exemplo, a diretiva v-if \u00e9 usada para renderizar condicionalmente um bloco:<\/span><\/p>\n

        <div id=\"app\">
        \u00a0 \u00a0<p v-if=\"visivel\">Agora voc\u00ea me v\u00ea<\/p>
        <\/div><\/code><\/p>\n

        Neste exemplo, o par\u00e1grafo ser\u00e1 renderizado apenas se a propriedade vis\u00edvel for verdadeira.<\/span><\/p>\n

        \u00a0<\/p>\n

        Manipula\u00e7\u00e3o de eventos<\/strong><\/h2>\n

        O Vue.js facilita a resposta aos eventos do usu\u00e1rio, como cliques ou pressionamentos de teclas. Voc\u00ea pode usar a diretiva v-on para ouvir eventos DOM e executar algum c\u00f3digo JavaScript quando eles ocorrem. Aqui est\u00e1 um exemplo:<\/span><\/p>\n

        <div id=\"app\">
        \u00a0 \u00a0<button v-on:click=\"contador++\">Clique em mim<\/button>
        \u00a0 \u00a0<p>Voc\u00ea clicou {{ contador }} vezes.<\/p>
        <\/div><\/code><\/p>\n

        Neste exemplo, estamos ouvindo o evento de clique no bot\u00e3o e incrementando o valor do contador cada vez que o bot\u00e3o \u00e9 clicado.<\/span><\/p>\n

        \u00a0<\/p>\n

        Conclus\u00e3o<\/strong><\/h2>\n

        Em resumo, o Vue.js \u00e9 um framework JavaScript progressivo para construir interfaces de usu\u00e1rio. Ele oferece uma abordagem flex\u00edvel, permitindo que os desenvolvedores usem o framework de v\u00e1rias maneiras, dependendo do caso de uso. Com uma API intuitiva e documenta\u00e7\u00e3o robusta, o Vue.js \u00e9 f\u00e1cil de aprender e usar. Al\u00e9m disso, ele oferece desempenho otimizado e recursos avan\u00e7ados, como renderiza\u00e7\u00e3o declarativa e reatividade, tornando-o uma excelente escolha para construir aplica\u00e7\u00f5es complexas.<\/span><\/p>\n

        \u00a0<\/p>\n

        Autor: <\/strong>Guilherme Rodrigues Garcia<\/p>\n

        \u00a0<\/p>\n

        \u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"

        Ol\u00e1 Pessoal! Nesta edi\u00e7\u00e3o do PET Reda\u00e7\u00e3o, vamos entender mais sobre um framework muito utilizado no mercado de desenvolvimento web, o Vue.js. \u00a0 O que \u00e9 e como funciona Atualmente em sua terceira vers\u00e3o, o Vue.js \u00e9 um framework JavaScript para construir interfaces de usu\u00e1rio. Ele utiliza HTML, CSS e JavaScript padr\u00e3o e oferece um […]<\/p>\n","protected":false},"author":6950,"featured_media":3443,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[203,149,192],"class_list":["post-3441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-frameworks","tag-redacao","tag-web-e-front-end"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/6950"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3441"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3441\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3443"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}