El lema és:
Reactive Components for Modern Web Interfaces
Amb el que ja deixa clar 3 dels conceptes importants:
http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/
IMPORTANT: Vue.js és una llibreria per a crear/construir web interfaces/Interficies web utilitzant reactive components
Vue no és pròpiament un framework Javascript (tot i que conjuntament amb altres eines pot ser un framework). Realment és més com una sèrie d'eines opcionals que juntes treballen realment bé.
Característiques (http://vuejs.org/)
I per que no Angular, Ember o React?
You should try it out if you like:
Teniu diverses possibilitats.
Simple javascript include
El podeu trobar a:
http://vuejs.org/guide/installation.html
Es recomanable utilitzar CDNs com:
http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js
IMPORTANT: La versió development conté warnings molt interessant al desenvolupar però en explotació es recomanable posar la versió minificada i sense els comentaris
també està disponible a npm i a bower
NPM
NPM: es la instal·lació recomanada amb large scale apps. Es relaciona molt bé amb sistemes CommonJS i module bundlers com Webpack o Browserify (vegeu eines com vueify i vue-loader).
# latest stable $ npm install vue # latest stable + CSP-compliant $ npm install [email protected] # dev build (directly from GitHub): $ npm install vuejs/vue#dev
# latest stable $ bower install vue
Tingueu en compte la possibilitat d'utilitzar eines com laravel Elixir i/o Browserify per treballar amb vue (ho recomano)
Resources
Keeping the state and the view in sync is hard. Or is it?
Esquema:
image
Reactive o Reactivity i que significa?
Expressions & computed properties with transparent dependency tracking.
Vegem-ho amb el típic Hello World vue:
Ummm és només un altre sistema de plantilles? De fet similar a Blade de Laravel utilitzant Moustaches...
Però oco que la cosa va més enllà! Per què cal fer per que la vista s'actualitzi si canviem l'objecte (l'estat) ?
No res!
Vue ha convertit l'objecte i la fet reactiu, és a dir que si es modifica el seu estat (a l'exemple si modifiquem message ) és modifica automàticament la vista. Com ho podeu comprovar? Doncs modificant l'estat per la consola javascript:
https://jsbin.com/zixuhu/4/edit?html,js,console,output
Escriviu a l'apartat consola:
object.message = "HEY you!"
Exemple computed properties:
Les computed properties poden definir dependencies entre variables/estat de forma que si una variable (un estat) de la qual depen un altre variable (un altre estat) es modificat l'estat de totes dues es modifica:
https://jsbin.com/rutabo/6/edit?html,js,console,output
La propietat computada té una dependència i aquesta dependència és automàticament gestionada per vue sense necessitat de definir la dependència entre les variables!
Resources:
A l'apartat anterior fem ús de la consola per modificar l'estat. Anem a a veure un exemple de Two-way data binding
https://jsbin.com/racezo/3/edit?html,js,output
Esquema:
En aquest exemple lliguem un item de formulari amb un missatge dins d'un paràgraf. Podeu trobar més exemples a Laracasts:
https://laracasts.com/series/learning-vue-step-by-step/episodes/1
Resources:
El sistema de components després del reactive data binding és segurament el concepte més important de Vue. Els components són una abstracció que permet crear aplicacions web de gran escala ja que permet que una aplicació estigui formada de petits components reutilitzables i autocontinguts. Vegeu:
Esquema
NOTA: Personalment comentar que els components poder ser útils també en aplicacions a petita escala. De fet per exemple per tal de poder reutilitzar un tros de codi vue en una mateixa pàgina és necessari tenir components
Un exemple de component tree:
Acacha Wiki
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
És a dir qualsevol aplicació per complexa que sigui es pot representar com un conjunt de components en forma d'arbre.
NOTA: Fixeu-vos la relació entre components Vue els Web components de HTML5. Hi ha similaritats però tingueu en compte que els web components no són encara àmpliament suportats pels navegadors
http://caniuse.com/#search=web%20components
Cal tenir en compte a més les interessants "features" dels components Vue:
Resources:
Exemple
var apiURLVue = $("#tree_table").attr('data-url-vue');
var vm = new Vue({
el: '#tree_table_box',
data: {
loading: true,
rows: []
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest();
var self = this;
xhr.open('GET', apiURLVue);
xhr.onload = function () {
self.loading = false;
self.rows = JSON.parse(xhr.responseText);
self.$nextTick(function () {
$("#tree_table").treetable({expandable: true});
});
};
xhr.send()
}
}
});
nextTick de Vue
NOTA: La comparació és respecte Angular 1. Curiosament és interessant veure com Vue i Angular 2 solucionen de forma similar els problemes d'Angular 1
Resources:
https://auth0.com/blog/2015/11/13/build-an-app-with-vuejs/
Recursos:
Vegeu Vueify i laravel Elixir
Vegeu Vueify i laravel Elixir
Vegeu Vue.js i webpack
Vue no té controladors a l'estil d'Angular però podem fer amb Browserify/webpack un require:
//Browserify/webpack
var posts= require('./postsMethods.js');
//Assuming there is a send method on the posts you can do :
posts.send(data);
//ES6
import {send} from "postMethods"
send(data);
Resources
Amb PHP tenim els Traits. Amb vue podem utilitzar els mixins ([1]) de forma similar:
// PostMethods.js
var PostMethods = {
send: function()
{
console.log('string');
}
}
module.exports = PostMethods;
and then
var PostMethods = require('./PostMethods.js');
var MyVueComponent = {
mixins: [PostMethods],
methods: {
doSomething: function(){
this.send();
}
}
}
module.exports = MyVueComponent;
or do it like this if you want:
var MyVueComponent = {
mixins: [require('./PostMethods.js')],
methods: {
doSomething: function(){
this.send();
}
}
}
module.exports = MyVueComponent;
https://github.com/vuejs
Vegeu Vue-cli
Vegeu Vue-resource
Vegeu vue-router
Vegeu vue-validator
http://vuejsexamples.com/ https://github.com/vuejs/awesome-vue
Serveix per mirar si no es troba una pàgina mostre una indicant que la pàgina no existeix, són com unes guardies (es com els Middlewares de Laravel), que et poden bloquejar, o reenviar a una altra pàgina.