Soumettre la recherche
Mettre en ligne
Criando aplicações com vuejs
•
1 j'aime
•
314 vues
Felipe César
Suivre
Slides usados na apresentação do meetup JavaScript Fortaleza.
Lire moins
Lire la suite
Internet
Signaler
Partager
Signaler
Partager
1 sur 55
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Vuejs(1.0.26)
Vuejs(1.0.26)
ChangJoo Park
用 Javascript 實現你的想像
用 Javascript 實現你的想像
Anna Su
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
Applitools
Copea y pega el código html en tu web 4
Copea y pega el código html en tu web 4
Daniel Atencio
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Workshop Teknis Javascript SMK Telkom Sandhy Putra Malang
Workshop Teknis Javascript SMK Telkom Sandhy Putra Malang
Edi Santoso
Django user permissions in your templates
Django user permissions in your templates
Anton Pirker
Paginas web
Paginas web
Lupiz Esquivel Garcia
Recommandé
Vuejs(1.0.26)
Vuejs(1.0.26)
ChangJoo Park
用 Javascript 實現你的想像
用 Javascript 實現你的想像
Anna Su
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
PayPal's NemoJS and Applitools Eyes - Visual Testing with Node.js
Applitools
Copea y pega el código html en tu web 4
Copea y pega el código html en tu web 4
Daniel Atencio
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Workshop Teknis Javascript SMK Telkom Sandhy Putra Malang
Workshop Teknis Javascript SMK Telkom Sandhy Putra Malang
Edi Santoso
Django user permissions in your templates
Django user permissions in your templates
Anton Pirker
Paginas web
Paginas web
Lupiz Esquivel Garcia
Vue.js 배프개발팀 발표
Vue.js 배프개발팀 발표
Jeonghwan Kim
10. add in Symfony 4
10. add in Symfony 4
Razvan Raducanu, PhD
Tugas uts
Tugas uts
iswan_di
Como poner un buscador en el blog
Como poner un buscador en el blog
Saitt
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
Rodrigo Branas
Nearby Messages API
Nearby Messages API
akkuma
Contenu connexe
Tendances
Vue.js 배프개발팀 발표
Vue.js 배프개발팀 발표
Jeonghwan Kim
10. add in Symfony 4
10. add in Symfony 4
Razvan Raducanu, PhD
Tugas uts
Tugas uts
iswan_di
Como poner un buscador en el blog
Como poner un buscador en el blog
Saitt
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
Rodrigo Branas
Nearby Messages API
Nearby Messages API
akkuma
Tendances
(6)
Vue.js 배프개발팀 발표
Vue.js 배프개발팀 발표
10. add in Symfony 4
10. add in Symfony 4
Tugas uts
Tugas uts
Como poner un buscador en el blog
Como poner un buscador en el blog
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
Nearby Messages API
Nearby Messages API
Criando aplicações com vuejs
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<script src="https://unpkg.com/vue"></script>
22.
23.
24.
25.
26.
<div id="app"> {{ message
}} </div> Olá Vue! const app = new Vue({ el: '#app', data() { return { message: 'Olá Vue!' }; } });
27.
28.
<div id="app"> <p v-if="seen">Agora
você me viu</p> </div> Agora você me viu const app = new Vue({ el: '#app', data() { return { seen: true }; } });
29.
30.
<ol> <li v-for="todo in
todos"> {{ todo.text }} </li> </ol> 1. Aprender JavaScript 2. Aprender Vue data() { return { todos: [ { text: ‘Aprender JavaScript’}, { text: ‘Aprender Vue’} ] }; }
31.
32.
<div> <p>{{ message }}</p> <p>{{
reversedMessage }}</p> </div> Olá Vue euV álO data() { return { message: ‘Olá Vue’ }; }, computed: { reversedMessage() { return this.message .split('').reverse().join('') } }
33.
34.
<div> <p>{{ reversedMessage() }}</p> </div> euV
álO data() { return { message: ‘Olá Vue’ }; }, methods: { reversedMessage() { return this.message .split('').reverse().join('') } }
35.
36.
<div id="example"></div> new Vue({ el:
'#example', template: '<div>Um elemento personalizado!</div>' }); Um elemento personalizado!
37.
38.
<div id="example"></div> new Vue({ el:
'#example', render(createElement) { return createElement('div', 'Um elemento personalizado!'); } }); Um elemento personalizado!
39.
40.
import AnchoredHeading from
'./AnchoredHeading.vue'; new Vue({ el: '#example', render(h) { return ( <AnchoredHeading nivel={1}> <span>Alô</span> Mundo! </AnchoredHeading> ); } });
41.
42.
<div id="example"> <my-component></my-component> <my-component></my-component> </div> // registro Vue.component('my-component',
{ template: '<div>Elemento</div>' }); // cria a instância raiz new Vue({ el: '#example' }); Elemento Elemento
43.
<div id="example"> <my-component></my-component> </div> const Child
= { template: '<div>Elemento</div>' }; Vue.component('my-component', { template: '<my-child></my-child>', components: { 'my-child': Child } }); Elemento
44.
45.
<template> <p>{{ greeting }}
World!</p> </template> <script> export default { data() { return { greeting: 'Hello!' }; } }); </script> <style scoped> p { font-size: 2em; } </style>
46.
47.
<template lang="jade"> div p {{
greeting }} World! </template> <script> export default { data() { return { greeting: 'Hello!' }; } }); </script> <style lang="stylus" scoped> p font-size 2em </style>
Télécharger maintenant