Como usar o JSFiddle com Vue e Vue Resource

Existem vários “editores” html/javascript no mercado. Temos o codepen, jsfiddle, jsbin, Codenvy…

Neste artigo iremos usar o JSFiddle, não porque é o melhor ou pior, é apenas uma escolha.

O JSFiddle divide-se em 3 partes: Html, Javascript e Css, onde pode-se escrever em cada uma delas, de acordo com a linguagem:

A quarta parte é o resultado, ou seja, o código html+javascript+css juntos. Pode-se ver o resultado clicando no botão RUN, na barra superior:

Adicionando o Vue

Para a adicionar a biblioteca Vue ao JSFiddle, clique na engrenagem do código Javscript e escolha Vue 1.0.XX (ou a última versão), veja:

A partir deste momento, pode-se escrever código javascript usando oVue! Veja:

Você pode inclusive misturar a classe Vue com outros códigos javascript:

E até mesmo usar as novas funcionalidades do ES6:

Adicionando outras libs

Além do vue podemos adicionar outras libs, como o vue-resource e o bootstrap. Primeiro, é preciso saber o endereço CDN de cada uma delas. Copie estes endereços e adicione, uma a uma, na aba External Resources:

Por exemplo, o CDN do bootstrap é: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

O CDN do Vue Resource é: https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.9.3/vue-resource.min.js

Adicione estas 2 urls no External Resource, ficando semelhante a figura a seguir:

Assim pode-se usar o bootstrap sem alterar muito o código html, veja:

Vue+Vue Resource

Assim que colocamos o cdn do Vue Resource no External Resources, podemos usar o this.$http para realizar chamadas ajax ao servidor, conforme o exemplo a seguir:

Divulgando o seu código:

Após criar um código, basta clicar no botão Save, ou Update, e copiar a URL !