Princípios de Vitrúvio
-
Firmitas (Durabilidade)
Deve se manter de maneira robusta e permanecer em boas condições. -
Utilitas (Utilidade)
Deve ser útil e funcionar bem para as pessoas que o utilizam. -
Venustatis (Beleza)
Deve encantar as pessoas e elevar seus espíritos.
29/06/2007
Jquery approach
<div id="app">
<input id="form_name_input" type="text" />
<p>Hello <span class="form_name"></span>!!</p>
</div>
<script>
$(function() {
$('#app').keyup(function() {
var $formName = $(this).find('.form_name');
var $input = $(this).find('#form_name_input');
var inputValue = $input.val();
$formName.empty();
$formName.append(inputValue);
});
});
</script>
"The Front End Wars is not over,
perhaps never will..." - Interliche, Rodrigo
+
- Não opinativo
- Encapsulamento
- Sintaxe responsável
- Toolbox de responsa
- Two way data binding
=
- Menor curva de aprendizado
- Melhor desempenho
- Aplicação progressiva
VueJS approach: Declarative Rendering
<div id="app">
<input id="name" type="text" v-model="name" />
<p>Hello {{ name }}!!</p>
</div>
<script>
new Vue({
el: '#app',
data: {
name: ''
}
})
</script>VueJS approach: conditional Rendering
<div id="app">
<span v-if="seen">Você consegue me ver!</span>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>VueJS approach: loops
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Lorem' },
{ text: 'Ipslum' },
{ text: 'Dolor' }
]
}
})
</script>VUEJS + Webpack
<template lang="pug">
td.client-cell
.truncate-text {{ shipment.customer.name | toTitleCase }}
</template>
<script>
import applicationHelper from '@/helpers/application_helper'
export default {
props: ['shipment'],
filters: {
toTitleCase: applicationHelper.toTitleCase
}
}
</script>
<style lang="sass" scoped>
@import "./src/styles/foundation/variables"
.truncate-text
width: 120px
font-weight: $font-semi-bold
</style>
gimme some more
- Router
- State management pattern
- Saga controll
- Animations helpers
Wanna play?
VueJS
By Rodrigo Interliche
