{"id":2500,"date":"2016-06-20T00:55:12","date_gmt":"2016-06-20T03:55:12","guid":{"rendered":"https:\/\/devkico.itexto.com.br\/?p=2500"},"modified":"2016-06-20T00:55:12","modified_gmt":"2016-06-20T03:55:12","slug":"exprimentando-vue-js-aplicando-no-devall","status":"publish","type":"post","link":"https:\/\/devkico.itexto.com.br\/?p=2500","title":{"rendered":"Exprimentando Vue.js &#8211; aplicando no \/dev\/All"},"content":{"rendered":"<p>Recentemente comecei a buscar frameworks JavaScript para serem aplicados em nossos projetos na itexto. Publiquei algum tempo atr\u00e1s <a href=\"https:\/\/devkico.itexto.com.br\/?p=2469\">minha experi\u00eancia de aprendizado envolvendo o Angular.js<\/a>: chegou a hora de falar sobre o Vue.js.<\/p>\n<h2>Como fui parar\u00a0no Angular.js<\/h2>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2470\" src=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/04\/angular-js_600x400-300x208.png\" alt=\"angular-js_600x400\" width=\"300\" height=\"208\" srcset=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/04\/angular-js_600x400-300x208.png 300w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/04\/angular-js_600x400.png 400w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Aprender Angular foi uma experi\u00eancia muito enriquecedora para mim\u00a0pois me pos em\u00a0contato mais profundo com diversas ferramentas usadas no ambiente JavaScript, tais como o Gulp e o NPM.<\/p>\n<p>O que mais gosto no Angular\u00a0\u00e9 a ideia de templates renderizados do lado cliente. Apesar de na\u00a0esmagadora maioria dos nossos projetos boa parte da renderiza\u00e7\u00e3o ser\u00a0realizada\u00a0do lado servidor (diversas raz\u00f5es para isto, o que, por si s\u00f3, j\u00e1 daria um post),\u00a0em alguns casos a renderiza\u00e7\u00e3o do lado cliente nos parece a solu\u00e7\u00e3o ideal.<\/p>\n<p>Um dos nossos projetos em que os templates do Angular cairam como uma luva foi o <a href=\"http:\/\/www.devall.com.br\">\/dev\/All<\/a> que, at\u00e9 a vers\u00e3o 1.8 usava este framework do lado cliente. \u00a0N\u00e3o conhece o site? Abaixo voc\u00ea pode ver um print do mesmo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2502\" src=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/devall_vue-175x300.png\" alt=\"devall_vue\" width=\"175\" height=\"300\" srcset=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/devall_vue-175x300.png 175w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/devall_vue.png 387w\" sizes=\"(max-width: 175px) 100vw, 175px\" \/><\/p>\n<p>Com o passar do tempo a arquitetura do \/dev\/All foi sofrendo algumas modifica\u00e7\u00f5es, dentre elas a cria\u00e7\u00e3o de uma API na qual estamos trabalhando aos poucos. Entre\u00a0as chamadas desta API est\u00e1 a nossa busca, que \u00e9 usada atualmente na interface do site com o usu\u00e1rio final.<\/p>\n<p>A primeira vers\u00e3o do \/dev\/All era 100% renderizada do lado servidor. Com isto, sempre que o usu\u00e1rio paginava os posts ou realizava uma busca, todo o conte\u00fado da p\u00e1gina era carregado novamente (ignorando os cacheamentos de JavaScript e CSS).<\/p>\n<p>Este problema foi a raz\u00e3o pela qual na vers\u00e3o 1.8 do \/dev\/All passamos a usar o Angular na confec\u00e7\u00e3o da nossa interface gr\u00e1fica. O resultado foi muito bom: os usu\u00e1rios agora baixavam uma \u00fanica vez o c\u00f3digo da p\u00e1gina e em todas as chamadas subsequentes o Angular fazia o trabalho de atualiza\u00e7\u00e3o da interface.<\/p>\n<h2>Como encontrei o Vue.js<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-2501\" src=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs-300x300.png\" alt=\"vuejs\" width=\"179\" height=\"179\" srcset=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs-300x300.png 300w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs-150x150.png 150w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png 400w\" sizes=\"(max-width: 179px) 100vw, 179px\" \/><\/p>\n<p>Tivemos esta experi\u00eancia bem sucedida com o Angular mas fiquei\u00a0com a impress\u00e3o de que ele era uma solu\u00e7\u00e3o muito complicada para as nossas necessidades. A curva de aprendizado do Angular \u00e9 muito \u00edngreme:\u00a0s\u00e3o muitos conceitos para que voc\u00ea comece a se tornar produtivo:\u00a0<strong>controladores, m\u00f3dulos, inje\u00e7\u00e3o de depend\u00eancias, invers\u00e3o de controle, diretrizes<\/strong>. Minha <strong>\u00fanica preocupa\u00e7\u00e3o era a view<\/strong>: eu s\u00f3 queria um template que fosse renderizado do lado cliente e que tirasse proveito da nossa API.<\/p>\n<p>Eu tamb\u00e9m queria algo com o qual pudesse reaproveitar conhecimentos\u00a0que j\u00e1 dominava, como o jQuery: misturar Angular e jQuery \u00e9 complicado para dizer o m\u00ednimo (sei que \u00e9 poss\u00edvel, mas mesmo assim \u00e9 mais complexo que o necess\u00e1rio).<\/p>\n<p>Nisto passei por algumas solu\u00e7\u00f5es interessantes: <a href=\"https:\/\/mustache.github.io\/\">Mustache<\/a>, <a href=\"http:\/\/rivetsjs.com\/\">Rivets<\/a>, <a href=\"https:\/\/github.com\/petersirka\/Tangular\">Tangular<\/a> (apenas 2Kb!) e mais algumas alternativas, dentre as quais estava o Vue.js, cujo primeiro contato foi feito totalmente por acaso atrav\u00e9s de <a href=\"https:\/\/www.youtube.com\/watch?v=JERbwwjQjrY\">um v\u00eddeo do Vedovelli<\/a>.<\/p>\n<p>Resolvi\u00a0experimentar o Vue.js: o primeiro passo foi ler o seu <a href=\"http:\/\/vuejs.org\/guide\/\">guia para desenvolvedores<\/a>.\u00a0<strong>A\u00a0leitura do guia me fez esquecer o Angular.\u00a0<\/strong>Achei a documenta\u00e7\u00e3o do Vue.js uma das melhores que j\u00e1 li: r\u00e1pida, direta e\u00a0<strong>curta.<\/strong> Terminada sua leitura voc\u00ea j\u00e1 consegue criar coisas interessantes com o framework.<\/p>\n<p>(o guia do Vue.js devia ser usado como exemplo de documenta\u00e7\u00e3o\u00a0bem feita: virei f\u00e3)<\/p>\n<p>A impress\u00e3o que tive do Vue.js foi a de se tratar de um &#8220;<strong>Angular&#8221; f\u00e1cil de aprender<\/strong>. Em <strong>aproximadamente tr\u00eas\u00a0horas<\/strong> de estudo voc\u00ea j\u00e1 consegue criar aplica\u00e7\u00f5es com o Vue.js: no caso do Angular levou <strong>pelo menos uma semana para come\u00e7ar<\/strong>. \u00a0Vi esta experi\u00eancia de aprendizado se repetir com Lucas, nosso estagi\u00e1rio na itexto.<\/p>\n<p>A vers\u00e3o 1.9 do \/dev\/All, publicada no dia 19\/6\/2016 substituiu o Angular pelo Vue.js (usamos a vers\u00e3o 1.0). Quantas linhas de c\u00f3digo JavaScript precisamos escrever para criar\u00a0<strong>toda<\/strong> a interface do site? <strong>30 (!)<\/strong>, incluindo o boiler plate padr\u00e3o do jQuery ($(document).ready).<\/p>\n<p>O jQuery faz as chamadas ao servidor e o Vue.js renderiza o resultado para n\u00f3s. \u00c9 simples assim. :)<\/p>\n<h2>Outras coisas que gostei no Vue.js<\/h2>\n<p>Al\u00e9m da excelente documenta\u00e7\u00e3o e facilidade de ser usado com outras bibliotecas (jQuery), houve outras raz\u00f5es pelas quais este framework me ganhou.<\/p>\n<h3>API f\u00e1cil<\/h3>\n<p>A API do Vue.js \u00e9 muito simples: essencialmente voc\u00ea s\u00f3 precisa conhecer o construtor\u00a0<strong>Vue<\/strong>. E n\u00e3o s\u00f3 o guia \u00e9 f\u00e1cil de ler: a <a href=\"https:\/\/vuejs.org\/api\/\">documenta\u00e7\u00e3o da API<\/a> tamb\u00e9m \u00e9 excelente!<\/p>\n<p>Levou um tempo at\u00e9 que eu me habituasse com o modo como a inje\u00e7\u00e3o de depend\u00eancias \u00e9 realizada no Angular (especialmente os problemas que podem surgir durante a minifica\u00e7\u00e3o e &#8220;uglyfica\u00e7\u00e3o&#8221; do c\u00f3digo). No caso do Vue, como \u00e9 focado apenas na view e n\u00e3o h\u00e1 controladores, tudo fica muito mais f\u00e1cil.<\/p>\n<h3>Tem o que gostei no\u00a0Angular<\/h3>\n<p>A sintaxe dos templates do Vue \u00e9\u00a0<strong>muito<\/strong> parecida com a do Angular. Tanto \u00e9 que n\u00e3o precisei reescrev\u00ea-los ao migrar para o Vue.js: a grosso modo bastou trocar as diretrizes &#8220;ng-*&#8221; por &#8220;v-*&#8221;. \u00a0A mesma sintaxe &#8220;mustache&#8221; se mant\u00e9m.<\/p>\n<p>Tamb\u00e9m h\u00e1 diretrizes, como o Angular, assim como filtros. A diferen\u00e7a est\u00e1 na facilidade de aprendizado.<\/p>\n<p>Outra similaridade importante: tamb\u00e9m implementa o <strong>data binding bidirecional<\/strong>. Este recurso \u00e9 muito interessante, especialmente quando se quer construir interfaces de cadastro mais complexas como, por exemplo, formul\u00e1rios do tipo mestre-detalhe ou mesmo simula\u00e7\u00e3o de planilhas (para estes dois casos j\u00e1 estamos projetando solu\u00e7\u00f5es baseadas no Vue.js na itexto).<\/p>\n<p>Por falar em data binding, o modo como lida com formul\u00e1rios \u00e9 tamb\u00e9m essencialmente o mesmo que temos no Angular.<\/p>\n<h3>Cria\u00e7\u00e3o f\u00e1cil de componentes<\/h3>\n<p>Assim como o Angular, o Vue.js tamb\u00e9m te permite <a href=\"http:\/\/vuejs.org\/guide\/components.html\">criar componentes<\/a>. No caso, o Vue \u00e9 muito inspirado na spec <a href=\"https:\/\/github.com\/w3c\/webcomponents\/blob\/gh-pages\/proposals\/Slots-Proposal.md\">Web Components do W3C<\/a>. Note que \u00e9\u00a0<strong>inspirado<\/strong> e n\u00e3o\u00a0<strong>uma implementa\u00e7\u00e3o<\/strong> desta spec.<\/p>\n<p>A vantagem \u00e9 que voc\u00ea pode escrever sua biblioteca de componentes reaproveit\u00e1veis com o Vue e, caso deseje abandon\u00e1-lo no futuro, o trabalho de reescrita (em teoria) deve ser bem menor.<\/p>\n<h2>Concluindo<\/h2>\n<p>Para situa\u00e7\u00f5es nas quais s\u00f3 me interessa a renderiza\u00e7\u00e3o do lado cliente e a aplica\u00e7\u00e3o n\u00e3o \u00e9 muito complexa (como o \/dev\/All), creio que Vue.js seja uma solu\u00e7\u00e3o mais interessante que o Angular.<\/p>\n<p>Se voc\u00ea ainda n\u00e3o o conhece, sugiro que leia seu guia e brinque um pouco com ele: \u00e9 uma experi\u00eancia\u00a0<strong>muito<\/strong> interessante. \u00a0Na excelente documenta\u00e7\u00e3o oficial h\u00e1 uma se\u00e7\u00e3o interessante na qual o <a href=\"http:\/\/vuejs.org\/guide\/comparison.html\">comparam com outros frameworks<\/a>, recomendo sua leitura, apesar de naturalmente se tratar de um texto tendencioso.<\/p>\n<p>Creio que, apesar de ter\u00a0preferindo o Vue,\u00a0<strong>estudar Angular \u00e9 essencial<\/strong>: tenho certeza de que boa parte da facilidade que tivemos em aprend\u00ea-lo (Vue) se deve aos conceitos que precisamos aprender em nosso estudo do Angular.<\/p>\n<p>Se voc\u00ea gosta de v\u00eddeos, o Fabio Vedovelli tem <a href=\"http:\/\/www.vedcasts.com.br\/series\/vuejs\">uma s\u00e9rie a respeito<\/a> que vale muito \u00e0 pena assistir (como tudo o que ele faz).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Minha experi\u00eancia com Vue.js: por que o prefiro em rela\u00e7\u00e3o ao Angular.js e como o aplicamos no \/dev\/All<\/p>\n","protected":false},"author":1,"featured_media":2501,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[61],"tags":[],"class_list":["post-2500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Exprimentando Vue.js - aplicando no \/dev\/All - \/dev\/Kico<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devkico.itexto.com.br\/?p=2500\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exprimentando Vue.js - aplicando no \/dev\/All - \/dev\/Kico\" \/>\n<meta property=\"og:description\" content=\"Minha experi\u00eancia com Vue.js: por que o prefiro em rela\u00e7\u00e3o ao Angular.js e como o aplicamos no \/dev\/All\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devkico.itexto.com.br\/?p=2500\" \/>\n<meta property=\"og:site_name\" content=\"\/dev\/Kico\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-20T03:55:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loboweissmann\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=2500\",\"url\":\"https:\/\/devkico.itexto.com.br\/?p=2500\",\"name\":\"Exprimentando Vue.js - aplicando no \/dev\/All - \/dev\/Kico\",\"isPartOf\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=2500#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=2500#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png\",\"datePublished\":\"2016-06-20T03:55:12+00:00\",\"dateModified\":\"2016-06-20T03:55:12+00:00\",\"author\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\"},\"breadcrumb\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=2500#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devkico.itexto.com.br\/?p=2500\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=2500#primaryimage\",\"url\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png\",\"contentUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png\",\"width\":400,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=2500#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devkico.itexto.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Exprimentando Vue.js &#8211; aplicando no \/dev\/All\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\",\"url\":\"https:\/\/devkico.itexto.com.br\/\",\"name\":\"\/dev\/Kico\",\"description\":\"Desenvolvendo software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devkico.itexto.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\",\"name\":\"Kico (Henrique Lobo Weissmann)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"caption\":\"Kico (Henrique Lobo Weissmann)\"},\"sameAs\":[\"https:\/\/x.com\/loboweissmann\"],\"url\":\"https:\/\/devkico.itexto.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Exprimentando Vue.js - aplicando no \/dev\/All - \/dev\/Kico","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devkico.itexto.com.br\/?p=2500","og_locale":"pt_BR","og_type":"article","og_title":"Exprimentando Vue.js - aplicando no \/dev\/All - \/dev\/Kico","og_description":"Minha experi\u00eancia com Vue.js: por que o prefiro em rela\u00e7\u00e3o ao Angular.js e como o aplicamos no \/dev\/All","og_url":"https:\/\/devkico.itexto.com.br\/?p=2500","og_site_name":"\/dev\/Kico","article_published_time":"2016-06-20T03:55:12+00:00","og_image":[{"width":400,"height":400,"url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png","type":"image\/png"}],"author":"Kico (Henrique Lobo Weissmann)","twitter_card":"summary_large_image","twitter_creator":"@loboweissmann","twitter_misc":{"Escrito por":"Kico (Henrique Lobo Weissmann)","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devkico.itexto.com.br\/?p=2500","url":"https:\/\/devkico.itexto.com.br\/?p=2500","name":"Exprimentando Vue.js - aplicando no \/dev\/All - \/dev\/Kico","isPartOf":{"@id":"https:\/\/devkico.itexto.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devkico.itexto.com.br\/?p=2500#primaryimage"},"image":{"@id":"https:\/\/devkico.itexto.com.br\/?p=2500#primaryimage"},"thumbnailUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png","datePublished":"2016-06-20T03:55:12+00:00","dateModified":"2016-06-20T03:55:12+00:00","author":{"@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7"},"breadcrumb":{"@id":"https:\/\/devkico.itexto.com.br\/?p=2500#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devkico.itexto.com.br\/?p=2500"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/?p=2500#primaryimage","url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png","contentUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png","width":400,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/devkico.itexto.com.br\/?p=2500#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devkico.itexto.com.br\/"},{"@type":"ListItem","position":2,"name":"Exprimentando Vue.js &#8211; aplicando no \/dev\/All"}]},{"@type":"WebSite","@id":"https:\/\/devkico.itexto.com.br\/#website","url":"https:\/\/devkico.itexto.com.br\/","name":"\/dev\/Kico","description":"Desenvolvendo software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devkico.itexto.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7","name":"Kico (Henrique Lobo Weissmann)","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","caption":"Kico (Henrique Lobo Weissmann)"},"sameAs":["https:\/\/x.com\/loboweissmann"],"url":"https:\/\/devkico.itexto.com.br\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2016\/06\/vuejs.png","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2500"}],"collection":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2500"}],"version-history":[{"count":2,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2500\/revisions"}],"predecessor-version":[{"id":3364,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2500\/revisions\/3364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/media\/2501"}],"wp:attachment":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}