Vue.js
Andrés Bedoya (A.K.A Angelfire)
(pronounce like view)
Vue.js
Progressive JavaScript Framework that focuses on building user interfaces
- Works in the "view layer only"
- Incrementally adoptable
- Easily integrated into other projects/libraries
- Capable of powering advanced SPAs
Vue.js
- Reactive Interfaces
- Declarative rendering
- Data binding
- Directives
- Template logic
- Components & nesting
- Event handling
- Computed properties
- CSS Transitions & Animation
- Custom filters
Sample code
<div id="app">
{{mensaje}}
</div>
new Vue({
el: '#app',
data: {
mensaje: 'MedellinJS'
}
})Special attribute with the v- prefix that does something to the DOM. Reactively applies side effects to the DOM when the value of its expression changes
<p>{{mensaje}}</p>
<p v-text="mensaje"></p>
<p v-html="mensaje"></p>
<p v-once>{{mensaje}}</p>Dynamically bind one or more attributes, or a component prop to an expression.
<img v-bind:src="imageSrc" v-bind:alt="imageAlt">
// shorthand
<img :src="imageSrc" :alt="imageAlt">
// binding an object of attributes
<img v-bind="{ src: imageSrc, alt: imageAlt }">
<div :style="{ fontSize: size + 'px' }"></div>
<my-component :prop="something"></my-component>
Are simply functions that you can pass data into which gets processed and a filtered version of this data is returned. Vue conveniently has a number of built in filters. The pipe symbol (|) is used to denote a filter like so:
<p>{{'simple message' | uppercase}}</p>
// SIMPLE MESSAGE
<p>{{'simple message' | capitalize}}</p>
// Simple message
<p>{{12345 | currency}}</p>
$12,345.00Conditionals & loops
<p v-if="show">Esto se muestra</p>
<p v-else>Esto no</p>
<p v-show="show">Esto se muestra</p>
<ul>
<li v-for="user in users">{{user.name}}</li>
</ul>
<div v-bind:class="{active: isActive}"></div>
new Vue({
data: {
show: true,
users: [
{ name: 'Sergio' },
{ name: 'Andres' }
],
isActive: true
}
})Events
Events are things like Hover, Click, Change, etc, that happen when your application is running.
<button v-on:click="counter">Count me in</button>
// shorthand
<button @click="counter">Count me in</button>
new Vue({
data: {
count: 0
},
methods: {
counter: function() {
this.count += 1
}
}
})Components
<div id="app">
<my-component></my-component>
</div>
Vue.component('my-component', {
template: 'This is my component'
})
Let's code
$ npm install -g vue-cli
$ vue init webpack vuesetup
$ cd vuesetup
$ yarn // npm install
$ yarn run dev // npm run dev