Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

隆Hola Vue!

3/38
Recursos

Aportes 63

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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谩.

Si por alguna raz贸n codePen no identifica Vue, lo debemos de configurar > Settings

Pesta帽a JavaScript y copiar la siguiente URL (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js) o en la lupa escribir Vue , Save y Close

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

驴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.

鈥渆l:鈥 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.

鈥渄ata鈥 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: 鈥楬ola 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=鈥渁pp鈥>
<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=鈥渁pp鈥> 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 鈥淓lemento 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

<h3>Hola vue!!</h3>

Uno de los problemas que vamos a 鈥渟olucionar鈥, 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

<h4>Manual</h4>

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
<h4>Vue</h4>

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