¡Hola Vue!

comencé mi carrera profesional gracias a Platzi, hoy vuelvo a las canchas donde me hicieron crecer como persona, hoy trabajo en una de las empresas de telecomunicaciones mas grande de mi país y vuelvo a forjarme con el Framework que utilizamos en mi equipo. nunca pensé que seria tan divertido aprender, no cambiaría por nada lo que estoy viviendo ni las personas que me rodean, y si les tengo que decir algo…
valió la pena cada día que me quede estudiando hasta tarde…
éxito a todos en sus estudios !! y nunca paren de aprender.

el: Es un pseudo-selector de CSS que nos permite con un selector obtener un elemento dentro del dom.
data: una function que devuelve un objeto, dentro del el vamos a definir todas las propiedades que usaremos dentro de nuestro template, si queremos usar una variable title dentro de nuestra vista tenemos que definirla acá.

Mi primer app en Vue

Tenemos que envolver nuestro html en un selector que luego vamos a utilizar

<div id="app">
  <h2>{{ title }}</h2>
</div>

Para crear una app la inicalizamos creando una new Vue teniendo como argumento un objeto con el elemento el que es el elemento html al que hace referencia y la data que es la información que puede utilizar.

const app = new Vue({
  el:'#app',
  data () {
      return {title:'Hola Vue'}
  },
})

Para este caso nuestra aplicación regresará un:

Hola Vue

Pero resulta que creamos una variable con nuestra app, y le podemos cambiar el valor:

app.title = "Adios Vue"

Si hacemos ésto nos cambiaría el contenido html al valor Adios Vue

Adiós Vue

• Codepen: https://codepen.io/

¿Alguien me podría dar el concepto de REACTIVIDAD, así como para dummies?

es increiblemente facil crear una aplicacion con vue y el profesor explica muy bien como hacerlo.

Esto pinta muy bien

Hola Devs:
-Aqui les comparto mi codepen por si quieren toquetear un poco de lo que hizo el profesor: Click Aqui.
-Tambien les comparto una lectura que habla sobre las expresiones en Vue y un poco mas: Click Aqui
-Para los que deseen, pueden ver el documental de VueJS: Click Aqui

Recuerda, #NuncaParesDeAprender 💚

ESTA BIEN SHINGON!!! ❤️

Por aquí un diseñador que llega a aprender este framework con la esperanza de no morir en el intento

{{}} se comprende como interpolación de datos. Tomará todo lo incluido dentro de data().

Si no quieres usar un sandbox y prefieres probar Vue en un entorno local siempre puedes recurrir a npm para descargar la última versión más estable

npm i vue

3.-¡Hola Vue!

Para crear una app en Vue.js primero tenemos que definir su instancia con new Vue, es importante porque representa nuestra aplicación, recibe un objeto y dentro de el escribimos las propiedades y configuraciones que la app puede tomar.

“el:” es un pseudo selector de CSS para tomar un elemento del DOM.

Todas las apps de vue tienen un único elemento padre y todos los elementos hijos pertenecen a la app de vue, todo lo que este fuera estará fuera de la app.

“data” función que devuelve objeto, dentro de este vamos a definir todas las propiedades.

Las expresiones son la manera que nos da vue de crear templates de manera dinámica dentro de nuestro HTML

Me parece más práctico utilizar un editor online como codepen que utilizar algún IDE para cuando vamos empezando a practicar

Muy clara esta clase 10/10

Hola Vue

Ejemplo sencillo en Vue.js:

<div id="app">
  <!--Nuestra app de vue se monta en el div-->
  <!--Todas las apps de Vue tienen 1 único elemento padre--->
  <h1>{{ title }}</h1>
</div>

const app = new Vue({
  el: '#app', // Selector de css, aquí diremos en qué nodo montamos la app de Vue
  data () { //Función donde definimos las propiedades del template
    return {
      title: '¡Hola Vue!'
    }
  }
})

Código en codepen

Aquí empieza mi vida en la programación, estoy muy emocionado de los desafíos que yo mismo me estoy proponiendo en mi vida y espero llegar a cumplirlos con cada minuto invertidos en esta nueva etapa, les deseo a cada uno de uds, que tmb busquen y se propongan grandes cosas para poder explotarnos y dar todo de nosotros para poder alcanzar esos sueños que tanto anhelamos. Éxitos y a seguir aprendiendo

poco a poco voy entendiendo y me hace mucho sentido para crear excelentes interfaces

a darle Vue!

Muy buena clase, interesante lo de CodePen, lo usé muy pocas veces y tengo que aprovecharlo más!

buen curso hasta ahora!

Excelente solución

En caso no les salga la parte de consola intenten creando un html y pongan los recursos de vue js

Interesante, y por ahora simple de entender y aprender. Además CodePen parece una herramienta muy útil

Si lo haces con Vue 3 no te funciona, debes usar vue 2. esto cuando haces la busqueda en codepen > setting

si desean hacerlo directamente sobre vsc a mi me sirvio lo siguiente:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <h1> {{title}} </h1>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--inicializa vue-->
<script src="/vue.js"></script><!--vinculamos js-->
</body>
</html>

JS:

const app = new Vue({
    el: "#app", //elemento padre o global

//metodo data
    data(){
        return{
            title: "Hola Vue"
        }
    }

})

is really good

good

is really

very good

thanks teacher

Javascript no es reactivo por si solo, necesitamos un Framework para eso
Cuando escribimos New Vue() hacemos referencia a la función constructora Vue que es importante porque representa a nuestra app.

• La función constructora recibe un objeto y dentro de este objeto vamos a escribir las propiedades o configuraciones que nuestra aplicación podrá tomar.
• De las más importantes es la propiedad el que básicamente es un selector de CSS que nos permite tomar el poder de un elemento.
• También tenemos la propiedad data y esta es una función que devuelve un objeto, dentro de este objeto vamos a definir todas las propiedades que vamos a utilizar en nuestro template.

data() {
    return {
      title: 'Hola vue'
    }

Dentro de la función devolvemos la propiedad title.

Hasta el momento esta genial todo el tema de Vue JS interesante como puede actualizarse el DOM de manera automática

Explorando este Frameworks, se ve muy interesante, espero no haber llegado tan tarde, salu2

Comenzando la aventura con VueJs. Vamos que vamos

Trasladando el ejemplo a Vue.js (2)

Para hacer este ejemplo vamos añadir Vue.js como dependencia de codepen:

Vamos a la configuración de nuestro JS

Seleccionamos Vue.js en la lista

y Guardamos.

Para comenzar con la aplicación de Vue.js es definir su instancia, pero veamos esto dentro del código y resolvamos el problema:

<div id="app">
  <h1>title</h1>
</div>

Ahora si vemos en el HTML el id lo llevara el Div padre, ya que es donde montaremos toda nuestra aplicación.

/** Definimos la instancia de Vue.js con la función constructora **/	
new Vue({
  el: '#app',
	data(){
    return {
      'title': 'Hola, Vue.js 🍕'
    }
  }
}
})

La función Vue representa a nuestra aplicación, recibe un objeto el cual por dentro lleva las diferentes propiedades y configuraciones que nuestra aplicación puede tomar.

Propiedades de la función vue

• Propiedad el: ’ ’ que es un pseudo selector de CSS que le dice a que elemento del DOM se va adjuntar nuestra aplicación. (Todas las aplicaciones de Vue tienen un único elemento padre).
• Propiedad Data( ) { return{ } } esta recibe un objeto, dentro de este objeto vamos a definir todas las propiedades que podemos utilizar dentro de nuestro template.
• Expresiones es la manera en la que Vue.js nos da la posibilidad de crear templates de manera dinámica dentro de nuestro HTML, así que usemos las expresiones para remplazar la propiedad del H1 con el valor de la propiedad title.

<div id="app">
  <h1>{{ title }}</h1>
</div>

Para definir una expresión, es tan simple como encerrar en llaves y colocar el nombre de la propiedad que hemos definido en Data.

new Vue({
  el: '#app',
	data(){
    return {
      'title': 'Hola, Vue.js 🍕'
    }
  }
}
})

y obtenemos el siguiente resultado:

new Vue({
  el : '#app',
  data () {
    return {
      title : 'Hola Vuejs'
    }
  }
})

Aquí vamos con vue.

Van mis notas:

Es necesario conectar nuestra vista con nuestro código a medida que los datos vayan cambiando de acuerdo con nuestro aplicación.

Lo 1ero que hay que hacer para c crear una aplicación en VueJS es definir la instancia, para ello utilizamos la función constructora, recibe un objeto y dentro de él escribimos las diferentes propiedades y configuraciones que nuestra configuración puede tomar.

new Vue({

})

La 1era es un pseudo selector de CSS:

new Vue({
el: ‘#app’
})

Todas las aplicaciones de Vue tienen un único elemento padre y todos los elementos hijos voy a poder tener control sobre esos elementos.

Otra propiedad importante es Data, es una función que devuelve un objeto, dentro de éste objeto vamos a definir todas las propiedades que vamos a utilizar dentro de nuestro template:

new Vue({
el: ‘#app’,

data() {
return {
title: ‘Hola Vue!’
}
}
})

Las expresiones son la manera que nos da Vue de crear template de manera dinámica dentro del HTML, utilizando expresiones puedo remplazar el contenido por valores de propiedades o por cualquier tipo de sintaxis JS válida. Para utilizar expresiones dentro del HTML utilizamos {{ que abren y }} que cierran:

<div id=“app”>
<h1>{{ title }}</h1>
</div>

vulnerabilidad?

Muy util esa herramienta de codepen!

Vue me enacanta.
Creo que le faltaría que explique un poco mejor el tema de " el: ‘#app’ ", lo que esté adentro de ese tag Vue lo va a utilizar para él mismo, los otros tags que no estén dentro del marcado no lo reconoce y no los utilizará, esto esta bueno porque podes utilizar Vue en una parte de aplicación o página y el resto dejarlo con lo que ya estaba, eso también es parte de lo incremental que es Vue

woou ea muy interesante vue, vamos por buen camino

Si estan usando un text editor probablemente se pregunten si <div id=“app”> debe de ir dentro de <head> o en <body>, este debe de ir dentro de <body>. Les comparto un link con la respuesta: https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/

no puedo lograr que la consola me muestres los cambios con vue
alguien me puede ayudar?

Mi aporte al curso

//Inicializador de Vue.js
const app = new Vue({
  el: '#app', //Donde quiero que arranque
  data(){
    return {
      title: 'Hola mundo Vue!' //Cambie esto en mi DOM
    }
  }
});

Excelente clase!!!

Hola, cuando el profesor dice “Elemento del Dome”. A qué hace referencia?

Parece sencillo por ahora, sigamos!

no me compilo nada alguien me puede decir cual es mi error?

Por si a alguien le sirve y necesitan practicar usando django + vue encontré una opción para integrarlos.
Comparto el link:
https://medium.com/@mauronavaluevanos/django-y-vuejs-89e1987f2203

Básicamente lo que hace Vue por lo que entiendo es enlazar los elementos del DOM con una variable JS que al cambiar su valor automáticamente cambia el texto en el DOM, esta es una de las cosas que más me llama la atención de Vue

JavaScript, por sí solo, no es un lenguaje reactivo. Se necesita la ayuda de algún framework o librería para darle esta característica.

Lo que hace Vue es resolver esto mediante una conexión entre la vista y el código para poder realizar cambios al DOM a medida que los datos van cambiando dentro de la aplicación.

<div id="app">
	<!-- las expresiones son la forma en la que se crean templates
	de manera dinamica en vue, aceptan cualquier sintaxis JS -->
	<h1>{{ title }}</h1>
</div>

// función constructora de Vue
// representa la aplicación, recibe un objeto con la configuración
// que tendrá la aplicación
new Vue({
	// la propiedad el es un pseudo selector de css que permite 
	// determinar en qué elemento del dom se va a montar la app
	el: '#app' 

	// data es una función que devuelve un objeto
	// dentro de este objeto se definen todas las propiedades que
	// se pueden utilizar dentro del template
	data () {
		return{
			title: 'Hola Vue'
		}
	}
})

El problema que intentamos resolver con VUE.JS

El problema que intentamos resolver es poder actualizar o linkear nuestra parte de la vista (html), con nuestra parte de javascript, poder hacer que un elemento html, tome tu texto o su valor en base a una propiedad que tenemos definida en nuestro código.

me estoy enamorando de vue pienso que es mucho mas fácil que react o no se si es por que vengo de la escuela de react con algunos conocimientos

Realmente me parece mucho más práctico y entendible el uso de vue.js(vengo de angular) y cada vez me gusta mas

hola mundo!```

Mis primeros acercamientos con Vue (vengo de React), y ya me encanta.

f

Uno de los problemas que vamos a “solucionar”, es el poder actualizar un de la vista, en este caso html con algún valor que nosotros tengamos en nuestro código, en este caso seria el h2

Esto seria de la manera manual, la mayoría conocemos desde la propia manipulación del dom.

<div id="app">
  <h1 id="h1">title</h1>
</div>

let title = "Hola!"

const h1 = document.getElementById("h1")
h1.innerText = title

Pero en vue la declaramos de esa manera, tenemos que envolver los elementos con el contenedor padre donde are todo lo que nosotros queramos manipular.

<div id="app">
  <h1>{{ title }}</h1>
</div>

En el archivo .js lo definimos de esta manera, el es el elemento que tomará para iniciar todo,
en data es donde vivirán nuestros valores.

const app = new Vue({
  el:'#app',
  data () {
      return {title:'Hola Vue'}
  },
})

{{variable}} imprimir variables en vue

{{ variable }} imprimir variables en vue