Como criar um aplicativo com vue.js

O Ecossistema JavaScript tem mudado por mais de uma década, significando que os desenvolvedores frontign tiveram que rastrear novas tecnologias. Depois de testar Frameworks de javascript. e bibliotecas por mais de cinco anos, encontrei aquele que funciona para mim: vue.js.

Neste tutorial, explicarei a estrutura básica de um aplicativo vue. Além disso, vou definir componentes em detalhes e toque em recursos mais avançados, como mixins para demonstrar Como começar um blog Correndo no seu próprio aplicativo simples.

Quer mais conselhos? Nós temos guias em tudo, desde hospedagem na web. serviços para armazenamento na núvem opções e o melhor Construtor de sites por aí.

• As melhores plataformas de blogs grátis

As vantagens de vue.js

O principal ponto de venda do Vue.js é o quão fácil é aprender, pois é escrito em HTML simples, CSS e JavaScript. A biblioteca é apoiada por um conjunto de documentação isso é constantemente atualizado. O tamanho da biblioteca é pequeno em comparação com os concorrentes. Além disso, seu CLI 3.0 foi reescrito para ser à prova de futuro.

• Acelerar o desempenho com vue.js

iniciar

Para seguir este tutorial, você só precisa de uma conexão com a Internet, já que todo o desenvolvimento será realizado no Codesandbox, um editor de código da Web de recursos completos. O link para o código pode ser encontrado aqui .

Nosso aplicativo incluirá arquivos de configuração, como Package.json. , a index.html. página que é o arquivo de entrada do nosso aplicativo e um Src. pasta que é o núcleo do nosso aplicativo. O conteúdo desta pasta será explicado em todo o tutorial.

Componentes em vue.

Vue oferece a capacidade de criar componentes. Estes são elementos personalizados usados ​​para encapsular o código reutilizável e podem variar de um botão simples para uma página completa. Um componente consiste em três seções principais, & lt; modelo & gt; , & lt; script & gt; e & lt; estilo & gt; , que será explorado mais adiante.

Criar app.vue.

Vamos começar nosso aplicativo criando um App.vue. arquivo que é a nossa raiz. Este componente incluirá todos os nossos componentes futuros. O primeiro componente será muito simples, pois não tem dados dinâmicos, mas simplesmente inclui as três seções mencionadas anteriormente (modelo, script, estilo).

 & lt; modelo & gt;
& lt; div id = "app" & gt;
& lt; img class = "logotipo" src = "./ ativo / logotipo.png" alt = "vue js logotipo oficial" / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
exportar default {
Nome: "App",
Componentes: {}
};
& lt; / script & gt;
& lt; estilo & gt;
#app {// norma norma css aqui}
& lt; / estilo & gt; 

Criar artigo

Para criar nosso aplicativo de blog, precisamos de artigos. Isso envolve a criação de um arquivo chamado Article.Vue. e armazenando-o dentro de uma pasta de componentes. Este componente será mais complexo, pois incluirá alguns recursos básicos de Vue que permitirão que seja dinâmico.

O primeiro recurso que vamos introduzir é chamado de diretiva, as chaves encaracoladas duplas, que substituirá o valor do título por uma propriedade dinâmica passada para o componente. Este é um token específico que é adicionado dentro do HTML e usado pela Biblioteca VUE para modificar o DOM para produzir HTML.

 & lt; modelo & gt;
& lt; div classe = "artigo" & gt;
& lt; img src = "./../ ativos / logotipo.png" / & gt;
& lt; h1 & gt; {{{title}} & lt; / h1 & gt;
& lt; p & gt; {{{valor}} & lt; / p & gt;
& lt; / div & gt;
& lt; / modelo & gt; 

Para o componente ser dinâmico, precisamos ser capazes de passar dados para ele. Isso pode ser alcançado declarando propriedades. Um componente também tem acesso à sua própria variável de instância privada chamada dados.

 & lt; script & gt;
exportar default {
adereços: {
Título: String,
Valor: {Type: String, obrigatório: TRUE}
},
dados() {
return {likes: 0, mostradoresNippets: true};
}};
& lt; / script & gt; 

Este componente só precisa de algum estilo básico para exibir corretamente.

Para exibir nosso primeiro artigo, precisamos levar três etapas: incluir o arquivo em App.vue. , adicione-o na instância vue e consulte-o como parte da seção de modelo:

& lt; modelo & gt;
& lt; div id = "app" & gt;
& lt; img class = "logotipo" src = "./ ativo / logotipo.png" alt = "vue js logotipo oficial" / & gt;
& lt; articlecontainer / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Importar Articlecontainer de "./Components/article";
exportar default {
Nome: "App",
Componentes: {Articlecontainer}};
& lt; / script & gt; 

Infelizmente, a execução deste código irá produzir um erro, devido ao fato de não fornecer todas as propriedades definidas conforme necessário no componente do artigo. Para corrigir o problema, precisamos declarar um objeto de dados e usar uma nova diretiva chamada v-liga-se para passar o objeto para o componente do artigo.

 & lt; modelo & gt;
...
& lt; articleconteiner v-bind = "post" / & gt; ...
& lt; / template & gt;
& lt; script & gt;
...
Nome: "App",
Dados: função () {
  return {post: {
    Título: "Meu primeiro post",
    Valor: "Lorem Ipsum Dolor Sit Amet, ...",
    img: "./asset/logo.png"}
  };
}, ...
& lt; / script & gt; 

Propriedades calculadas

Para tornar nosso componente mais complexo, introduziremos uma nova característica da API do Vue chamado computado . Isso geralmente é chamado de "propriedades computadas", já que seu valor é convertido em uma propriedade real. Para mostrar como as propriedades computadas funcionam, vamos aprimorar nosso componente para apoiar uma visualização de um snippets e a exibição do artigo completo.

 & lt; modelo & gt;
& lt; div classe = "artigo" & gt;
& lt; img src = "./../ ativos / logotipo.png" / & gt;
& lt; h1 & gt; {{{title}} & lt; / h1 & gt;
& lt; p v-if = "showingsnippets" & gt; {{snippets}} & lt; / p & gt;
& lt; p v-else & gt; {{valor}} & lt; / p & gt;
& lt; botão v-on: clique = "toggglearticle" & gt; {{buttontext}} & lt; / Button & gt;
Botão V-On: Clique = "Likes ++;" & gt; likes: {{likes}} & lt; / Button & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
exportar default {
adereços: {
Título: String,
Valor: {Type: String, obrigatório: True},
SnippetsLength: {Type: Number, Obrigatório: Falso, padrão: 20}
},
dados() {
return {likes: 0, mostradoresNippets: true};
},
computado: {
trechos() {
const fulleticle = isto.value;
Const Articips = Fullarticle.substring (0, isto. comprimento de snippets);
return `$ {artigos nippets} ...`;},
botão de texto() {
Retornar este.Showingsnippets? "Mostrar artigo completo": "show snippets";}
},
métodos: {
toggglearticle () {
este.showingsnippets =! este.showingsnippets; }
}};
& lt; / script & gt; 

Este exemplo está fornecendo uma nova diretiva v-se. e v-on. , que mostrará ou ocultará automaticamente componentes, usando uma variável privada chamada Showingsnippets. . O valor dos trechos é computado na mosca e mudará se alguma das propriedades que ele usa ( SnippetsLength , Fullarticle. ) alterar.

Maincomponent.vue.

O próximo passo envolve um novo componente que vai ser o corpo de nossa aplicação, usado para emular uma chamada de API e nos apresentar a uma nova diretiva v-for. . A API do VUE fornece acesso a uma lista abrangente de ganchos para carregar e acionar eventos no momento certo (no nosso caso montado). Estes estão fora do escopo para este tutorial, mas os detalhes podem ser encontrados aqui .

 & lt; modelo & gt;
& lt; div id = "maincontent" & gt;
& lt; articlecontainer v-for = "(item, índice) em posts": key = "index" v-bind = "item" / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
importar articleconteiner de "./article.vue";
Importar Fakeposts de "../data/posts.js";
exportar default {
Dados: função () {
return {posts: []};
},
métodos: {
fakeapicall () {
// aqui estamos emulando a possibilidade de carregar o valor com uma API
este.posts = fakeposts;}
},
Componentes: {Articlecontainer},
montado () {
este.Fakeapicall ();}
};
& lt; / script & gt; 

Construir uma mistura

Outra poderosa característica de Vue.js são as mixinas. Estes são métodos JS reutilizáveis ​​que expandem os recursos de um componente específico. As mixinas têm acesso à maior parte da API vue (propriedades, dados, métodos). Eles são geralmente armazenados em um mixins. pasta, criada dentro do diretório SRC e, como mixins são puramente JS, salvos com um .js. extensão.

No início, o poder desse recurso pode não ser óbvio. No entanto, à medida que você se familiariza com o VUE e sua API, as mixinas começarão a tomar forma e suportarão sua inscrição. Eu vi esse recurso usado para definir validação de entrada, internacionalização e fornecer funcionalidade do produto, como o uploader de arquivos.

A principal diferença entre um componente normal e uma mistura é que esta última pode ser incluída e aplicada a qualquer componente. Por exemplo, você pode adicionar um upload de arquivo mixin a um botão ou uma imagem e todos terão acesso ao novo recurso.

Vamos construir uma acessibilidade mixin. Isso fornecerá um togglecontrast. método que pode ser aplicado a qualquer um dos nossos componentes.

 Exportar default {
adereços: {
LightTextColour: {Type: String, padrão: "# 252525"},
lightbackgroundcolour: {Type: string, padrão: "#fff"},
DarkTextColour: {Type: String, padrão: "#fff"},
Darkbackgroundcolour: {Type: String, padrão: "# 252525"}
},
dados() {
return {islight: true};
},
métodos: {
togglehighcontrast () {
isso élight =! isso.
if (esta.Cright) {
isso. $ el.style.backgroundColor = this.lightbackgroundcolour;
isso. $ el.style.color = this.lightTextColour;
} outro {
isso. $ el.style.BackgroundColor = This.DarkBackgroundColour;
isso. $ el.style.color = este.DarkTextColour; }
}}
}; 

Agora, nosso código é definido, podemos incluí-lo em qualquer componente e usar seus métodos e propriedades como se fossem definidos no componente real. As mixinas podem ser orientadas para propriedades, permitindo-lhes oferecer assim que forem incluídas no componente, ou podem precisar de alguma ação para entrar em vigor (por exemplo, ter que chamar um método específico).

Para aproveitar ao máximo esse recurso, precisamos fazer a seguinte modificação dentro do nosso código:

 & lt; modelo & gt;
& lt; div classe = "artigo" & gt;
...
Botão V-On: Clique = "ToggleHighcontrast" & GT; Alternar Alto Contraste & LT; / Button & GT;
& lt; / div & gt;
& lt; / template & gt;

& lt; script & gt;
Importar acessibilidade de "../mixins/accessibility.js";
...
Mixinas: [Acessibilidade]
};
& lt; / script & gt; 

Agora podemos alternar o contraste no componente individual usando o novo botão definido. É importante entender que, mesmo que nenhuma propriedade extra tenha sido definida, nosso componente do artigo é realmente capaz de aceitar LightTextColour. , DarkTextColour. , lightbackgroundcolour. e darkbackgroundcolour. . Estes são definidos dentro da mistura de acessibilidade.

Nosso pequeno protótipo está agora trabalhando e pode ser usado como referência para projetos futuros.

Este artigo foi originalmente publicado em questão 316 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 316 aqui ou Inscreva-se aqui .

Artigos relacionados:

• 9 dos melhores frameworks de JavaScript
• Revelado: as últimas tendências de JavaScript
• Como construir um site de blog com Gatsby