├── bootstrap.html ├── example1.html ├── example2.html ├── example3.html ├── example4.html ├── example5.html ├── example6.html ├── example7.html ├── example8.html ├── lesson10 ├── index.html ├── main.js └── vue.js ├── lesson6.html ├── lesson9 ├── index.html ├── main.js └── vue.js ├── logo.png ├── readme.md └── vue.js /bootstrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 |

Hello, Vue!

14 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /example1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 |

Bienvenido, {{ name }}

20 | 21 | 22 | 23 |

24 | 25 |

{{ $data | json }}

26 |

27 |

28 | 29 | 37 | 38 | -------------------------------------------------------------------------------- /example2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 27 |

Por favor escribe tu nombre:

28 | 29 | 30 | 31 |

32 | Este campo es obligatorio 33 |

34 |

35 | El nombre no es válido 36 |

37 | 38 |

39 | 40 |

{{ $data | json }}

41 |

42 |

43 | 44 | 53 | 54 | -------------------------------------------------------------------------------- /example3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 27 |

Por favor escribe tu nombre:

28 | 29 |

30 | 31 | 32 |

33 | Este campo es obligatorio 34 |

35 | 36 | 37 | Hombre: 38 | 39 | 40 | 41 | Mujer: 42 | 43 | 44 |

¿Cuántos años de experiencia tienes con PHP?

45 | 46 |

47 | Respuesta: {{ years_php }} 48 | 49 | 50 | 51 |

52 | 53 |

54 | 55 |

56 | 59 | 60 | 63 |

64 |

65 | 66 |

67 | 68 |

{{ $data | json }}

69 |

70 |

71 | 72 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /example4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 27 |

Por favor escribe tu nombre:

28 | 29 |

30 | 31 | 32 |

33 | Este campo es obligatorio 34 |

35 | 36 | 37 | Hombre: 38 | 39 | 40 | 41 | Mujer: 42 | 43 | 44 |

¿Cuántos años de experiencia tienes con PHP?

45 | 46 |

47 | Respuesta: {{ years_php }} 48 | 49 | 53 | 54 | 58 |

59 | 60 |

61 | 62 |

63 | 66 | 67 | 70 |

71 |

72 | 73 |

74 | 75 |

{{ $data | json }}

76 |

77 |

78 | 79 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /example5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 26 |

Por favor escribe tu nombre:

27 | 28 | 58 | 59 | 60 | 61 |

62 | 63 |

{{ $data | json }}

64 |

65 |

66 | 67 | 70 | 71 | 87 | 88 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /example6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 28 |

Por favor escribe tu nombre:

29 | 30 | 61 | 62 |

63 | 64 |

{{ $data | json }}

65 |

66 |

67 | 68 | 84 | 85 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /example7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 28 |

Por favor escribe tu nombre:

29 | 30 |

31 | Primer nombre: 32 | 33 | Apellido: 34 | 35 | 36 |

37 | Este campo es obligatorio 38 |

39 | 40 | 41 | Hombre: 42 | 43 | 44 | 45 | Mujer: 46 | 47 | 48 | 49 | ¿Hablas español? 50 | 51 | 52 | 53 | 56 | 57 |

58 | 59 |

60 | 63 | 64 | 67 |

68 |

69 | 70 |

71 | 72 |

{{ $data | json }}

73 |

74 |

75 | 76 | 92 | 93 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /example8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 28 |

Por favor escribe tu nombre:

29 | 30 |

31 | Primer nombre: 32 | 33 | Apellido: 34 | 35 | 36 |

37 | Este campo es obligatorio 38 |

39 | 40 | 41 | Hombre: 42 | 43 | 44 | 45 | Mujer: 46 | 47 | 48 | 49 | ¿Hablas español? 50 | 51 | 52 | 53 | 56 | 57 |

58 | 59 |

60 | 63 | 64 | 67 |

68 |

69 | 70 |

Tienes experiencia en:

71 |

{{ tech.name }}

74 |

75 | 76 |

{{ $data | json }}

77 |

78 |

79 | 80 | 96 | 97 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /lesson10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net / Curso de VueJS / Lección 10 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 |

Styde.net / Curso de VueJS / Lección 10

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 33 | 34 |

Categoría	Nota
		29 \| 30 \| 31 \| 32 \|

35 |

36 |

37 | 38 |

{{ $data | json }}

39 | 40 | 48 | 49 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /lesson10/main.js: -------------------------------------------------------------------------------- 1 | function findById(items, id) { 2 | for (var i in items) { 3 | if (items[i].id == id) { 4 | return items[i]; 5 | } 6 | } 7 | 8 | return null; 9 | } 10 | 11 | Vue.filter('category', function (id) { 12 | var category = findById(this.categories, id); 13 | 14 | return category != null ? category.name : ''; 15 | }); 16 | 17 | Vue.component('select-category', { 18 | template: "#select_category_tpl", 19 | props: ['categories', 'id'] 20 | }); 21 | 22 | Vue.component('note-row', { 23 | template: "#note_row_tpl", 24 | props: ['note', 'categories'], 25 | data: function() { 26 | return { 27 | editing: false 28 | }; 29 | }, 30 | methods: { 31 | remove: function () { 32 | this.$parent.notes.$remove(this.note); 33 | }, 34 | edit: function () { 35 | this.editing = true; 36 | }, 37 | update: function () { 38 | this.editing = false; 39 | } 40 | } 41 | }); 42 | 43 | var vm = new Vue({ 44 | el: 'body', 45 | data: { 46 | new_note: { 47 | note: '', 48 | category_id: '' 49 | }, 50 | notes: [ 51 | { 52 | note: 'Laravel 5.1 es LTS', 53 | category_id: 1 54 | }, 55 | { 56 | note: 'v-for es la directiva que utilizamos para iterar una lista', 57 | category_id: 2 58 | }, 59 | { 60 | note: '@click se utiliza como un alias de v-on:click', 61 | category_id: 2 62 | }, 63 | { 64 | note: 'Regístrate hoy en styde.net y obtén acceso a todos nuestros cursos', 65 | category_id: 3 66 | } 67 | ], 68 | categories: [ 69 | { 70 | id: 1, 71 | name: 'Laravel' 72 | }, 73 | { 74 | id: 2, 75 | name: 'Vue.js' 76 | }, 77 | { 78 | id: 3, 79 | name: 'Publicidad' 80 | } 81 | ] 82 | }, 83 | methods: { 84 | createNote: function () { 85 | this.notes.push(this.new_note); 86 | 87 | this.new_note = {note: '', category_id: ''}; 88 | } 89 | }, 90 | filters: { 91 | } 92 | }); 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /lesson6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net | Curso de VueJS 9 | 10 | 11 | 12 | 13 | 14 | 15 |

Hello, Vue!

16 | 17 |

{{ $index + 1 }}: {{ note.text }} por {{ note.author }}

20 | 21 |

22 | 23 | 28 | 29 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /lesson9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Styde.net / Curso de VueJS / Lección 9 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 |

Styde.net / Curso de VueJS / Lección 9

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 35 | 40 | 41 |

Categoría	Nota

42 |

43 |

44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /lesson9/main.js: -------------------------------------------------------------------------------- 1 | function findById(items, id) { 2 | for (var i in items) { 3 | if (items[i].id == id) { 4 | return items[i]; 5 | } 6 | } 7 | 8 | return null; 9 | } 10 | 11 | var vm = new Vue({ 12 | el: 'body', 13 | data: { 14 | notes: [ 15 | { 16 | note: 'Laravel 5.1 es LTS', 17 | category_id: 1 18 | }, 19 | { 20 | note: 'v-for es la directiva que utilizamos para iterar una lista', 21 | category_id: 2 22 | }, 23 | { 24 | note: '@click se utiliza como un alias de v-on:click', 25 | category_id: 2 26 | }, 27 | { 28 | note: 'Regístrate hoy en styde.net y obtén acceso a todos nuestros cursos', 29 | category_id: 3 30 | } 31 | ], 32 | categories: [ 33 | { 34 | id: 1, 35 | name: 'Laravel' 36 | }, 37 | { 38 | id: 2, 39 | name: 'Vue.js' 40 | }, 41 | { 42 | id: 3, 43 | name: 'Publicidad' 44 | } 45 | ] 46 | }, 47 | methods: { 48 | deleteNote: function (note) { 49 | this.notes.$remove(note); 50 | }, 51 | editNote: function (note) { 52 | Vue.set(note, 'editing', true); 53 | }, 54 | updateNote: function (note) { 55 | note.editing = false; 56 | } 57 | }, 58 | filters: { 59 | category: function (id) { 60 | var category = findById(this.categories, id); 61 | 62 | return category != null ? category.name : ''; 63 | } 64 | } 65 | }); 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StydeNet/curso-vuejs/cb813ebfc9e9f5680a8ac6c0109ebeaa8e79964e/logo.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### [Styde](https://styde.net/) 2 | 3 | Styde es una nueva comunidad de desarrollo web en español. Con nosotros podrás aprender Laravel, PHP y otras tecnologías, desde tutoriales básicos gratuitos hasta cursos avanzados a bajo costo, de la mano de profesionales con años de experiencia. 4 | 5 | # Curso de Vue.js 6 | 7 | Comenzar a aprender y usar Vue.js resulta tan sencillo y divertido como desarrollar con Laravel. Es por ello que la comunidad de nuestro framework favorito de PHP, ha recibido con los brazos abiertos a Vue; de hecho, actualmente Laracasts tiene 2 cursos de Vue, Taylor Otwell lo está utilizando para desarrollar Spark, y cada vez hay más noticias, tutoriales y artículos de este framework de JavaScript. 8 | 9 | ## Parte 1: Fundamentos de Vue.js 10 | 11 | En esta primera parte, aprenderás a utilizar Vue.js desde un ejemplo de hola mundo, hasta la creación de tus propios componentes. 12 | 13 | * [Instalación y primeros pasos con Vue.js](https://styde.net/introduccion-a-vue-js/#more-9792) - 14:26 14 | 15 | * [Introducción a las directivas de Vue.js con v-if, v-show y v-else](https://styde.net/introduccion-a-las-directivas-de-vue-js-con-v-if-v-show-y-v-else/) - 14:11 16 | 17 | * [Clases, estilos y otros atributos dinámicos usando la directiva v-bind de Vue.js](https://styde.net/metodos-y-manejo-de-eventos-con-v-onclick-y-submit/) - 14:45 18 | 19 | * [Atributos HTML, clases y estilos de CSS dinámicos con v-bind](https://styde.net/clases-estilos-y-otros-atributos-dinamicos-usando-la-directiva-v-bind-de-vue-js/) - 11:53 20 | 21 | * [Introducción a los componentes con Vue.js](https://styde.net/introduccion-a-los-componente-en-vue-js/) - 17:47 22 | 23 | * [Crear listas con la directiva v-for](https://styde.net/crear-listas-con-la-directiva-v-for-de-vue-js/) - 11:18 24 | 25 | * [Computed properties](https://styde.net/computed-properties-en-vue-js/) - 13:05 26 | 27 | * [Uso y creación de filtros](https://styde.net/filtros-en-vue-js/) - 9:20 28 | 29 | * [Repaso de interpolaciones, filtros y directivas](https://styde.net/:interpolaciones-v-for-v-if-metodos-y-filtros-con-vue-js/) - 18:49 30 | 31 | * [Repaso de componentes](https://styde.net/repaso-de-creacion-y-uso-de-componentes-en-vue-js/) - 20:28 32 | 33 | ## Parte 2: Crea un API con Laravel 5.2 34 | 35 | En esta segunda parte desarrollaremos el API para el módulo de notas, que en la tercera parte implementaremos en nuestro proyecto en Vue.js. 36 | 37 | * [Configuración del proyecto](https://styde.net/desarrollo-del-api-con-laravel-5-2-configuracion-del-proyecto/) - 7:07 38 | 39 | * [API para listar notas](https://styde.net/desarrollo-del-api-con-laravel-5-2-listar-notas/) - 16:10 40 | 41 | * [Creación de registros a través de un API](https://styde.net/creacion-de-registros-a-traves-de-un-api-con-laravel-5-2/) - 20:26 42 | 43 | * [Actualizar y eliminar registros de un API](https://styde.net/actualizar-y-eliminar-registros-a-traves-de-un-api-con-laravel-5-2/) - 17:31 44 | 45 | ## Parte 3: Laravel + AJAX + Vue.js 46 | 47 | En esta tercera parte del curso, vamos a consumir una API con Vue.js para finalizar el desarrollo de nuestro módulo CRUD de notas totalmente en AJAX. 48 | 49 | * [Laravel + Vue.js = ♥](https://styde.net/listar-registros-con-laravel-y-vue-js/) - 13:45 50 | * [Crear registros con Vue.js y Laravel](https://styde.net/crear-registros-con-vue-js-y-laravel-5-2/) - 11:01 51 | * [Actualizar notas con Laravel y Vue.js](https://styde.net/actualizar-notas-con-ajax-laravel-y-vue-js/) - 19:50 52 | * [Eliminar notas con Laravel y Vue.js](https://styde.net/eliminar-registros-con-vue-js-y-laravel-a-traves-de-ajax/) - 13:14 53 | 54 | ## Parte 4: Refactorización y nuevos features 55 | 56 | En esta parte 4 refactorizaremos el código AJAX para utilizar Vue Resource, realizaremos también animaciones con Vue.js, aprenderemos cómo podemos trabajar con componentes sin depender del “two way binding”, y más. 57 | 58 | * [Uso del componente Vue Resource](https://styde.net/uso-del-componente-vue-resource/) - 25:35 59 | * [Animaciones (transitions)](https://styde.net/animaciones-transiciones-en-vue-js/) - 16:55 60 | * [Eventos personalizados en Vue.js](https://styde.net/eventos-personalizados-en-vue-js/) - 10:04 61 | * [Browserify y Vueify con Gulp y Laravel Elixir](https://styde.net/vue-js-browserify-vueify-gulp-y-laravel-elixir/) - 19:35 62 | * [Componente App](https://styde.net/creacion-del-componente-app/) - 12:19 63 | * [Medidas de seguridad con Laravel y Vue.js](https://styde.net/medidas-de-seguridad-con-laravel-y-vue-js/) - 12:06 64 | 65 | ## Parte 5: Vue.js 2.0 66 | 67 | En esta parte 5, vamos a migrar nuestro módulo de notas a la nueva versión de Vue.js. 68 | 69 | * [Migrando de Vue 1.x a Vue 2.0](https://styde.net/como-migrar-un-proyecto-de-vue-1-x-a-vue-2-0/) - 18:08 70 | 71 | #### Otros cursos 72 | 73 | **Laravel desde cero** 74 | - [Primeros pasos con Laravel 5.*](https://styde.net/curso-primeros-pasos-con-laravel-5/) 75 | - [Curso de Laravel 5.1](https://styde.net/curso-introductorio-laravel-5-1/) 76 | - [Crea una aplicación con Laravel 5](https://styde.net/curso-crea-aplicaciones-con-laravel-5/) 77 | - [Curso básico de Eloquent ORM](https://styde.net/curso-basico-de-eloquent-orm-con-laravel-5-1/) 78 | 79 | 80 | **Laravel y PHP avanzado** 81 | - [Curso de administración de servidores para PHP y Laravel](https://styde.net/curso-configuracion-administracion-de-servidores-php-laravel/) 82 | - [Curso avanzado de Eloquent ORM](https://styde.net/curso-avanzado-de-eloquent-orm/) 83 | - [Crea componentes para PHP](https://styde.net/curso-crea-componentes-para-php-y-laravel/) 84 | - [Interfaces dinámicas con Laravel y jQuery](https://styde.net/curso-de-interfaces-dinamicas-con-laravel-y-jquery/) 85 | 86 | **Otras tecnologías** 87 | - [Curso de Gulp](https://styde.net/curso-gulp-y-herramientas-de-automatizacion/) 88 | - [Curso de Vue.js](https://styde.net/curso-de-vue-js/) 89 | - [Curso de Sass](https://styde.net/curso-de-sass/) 90 | - [Curso básico de Swift](https://styde.net/curso-basico-de-swift/) 91 | 92 | © 2016 [Styde.net](https://styde.net/) 93 | --------------------------------------------------------------------------------

Hello, Vue!

Bienvenido, {{ name }}

22 | {{ gender == 'm' ? 'Bienvenido' : 'Bienvenida' }}, {{ name }} 23 |

22 | {{ gender == 'm' ? 'Bienvenido' : 'Bienvenida' }}, {{ name }} 23 |

22 | {{ gender == 'm' ? 'Bienvenido' : 'Bienvenida' }}, {{ name }} 23 |

22 | {{ gender == 'm' ? 'Bienvenido' : 'Bienvenida' }}, {{ name }} 23 |

22 | {{ welcome_message }}, {{ name }} 23 |

22 | {{ welcome_message }}, {{ name | ucwords }} 23 |

Tienes experiencia en:

Styde.net / Curso de VueJS / Lección 10

Hello, Vue!

Styde.net / Curso de VueJS / Lección 9