Slides usados na apresentação do meetup JavaScript Fortaleza.

21. <script src="https://unpkg.com/vue"></script>

26. <div id="app">
{{ message }}
</div>
Olá Vue!
const app = new Vue({
el: '#app',
data() {
return {
message: 'Olá Vue!'
};
}
});

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
};
}
});

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’}
]
};
}

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('')
}
}

34. <div>
<p>{{ reversedMessage() }}</p>
</div>
euV álO
data() {
return {
message: ‘Olá Vue’
};
},
methods: {
reversedMessage() {
return this.message
.split('').reverse().join('')
}
}

36. <div id="example"></div>
new Vue({
el: '#example',
template: '<div>Um elemento
personalizado!</div>'
});
Um elemento
personalizado!

38. <div id="example"></div>
new Vue({
el: '#example',
render(createElement) {
return createElement('div', 'Um
elemento personalizado!');
}
});
Um elemento
personalizado!

40. import AnchoredHeading from './AnchoredHeading.vue';
new Vue({
el: '#example',
render(h) {
return (
<AnchoredHeading nivel={1}>
<span>Alô</span> Mundo!
</AnchoredHeading>
);
}
});

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

45. <template>
<p>{{ greeting }} World!</p>
</template>
<script>
export default {
data() {
return {
greeting: 'Hello!'
};
}
});
</script>
<style scoped>
p {
font-size: 2em;
}
</style>

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>