Cursos Empresas Blog Live Conf Precios

Hola mundo con Vue.js

Clase 3 de 17 • Curso Básico de Vue.js 2016

Clase anteriorSiguiente clase

Resumen

En este vídeo vamos a comenzar a escribir código para saber cómo interactúa la librería de Vuej.js

Hola mundo con Vue.js

Enova Desarrollo

student•

Dentro del objeto Vue que significa el:?

let app = new Vue({ el: '#app' })

Yeison Daza

student•

El el elemento donde se va a montar el componentes de vue, en este caso un elemento con id #app

Enova Desarrollo

student•

entonces el nombre del selector, siempre se llama el?

Noe Mikhael Huaccharaque Ruiz

student•

Esto definiria a vuejs: la simplicidad es la máxima sofisticación

Rogelio García Valenzuela

student•

Shorthand = una manera más corta de escribir algo.
semicolon= son caracteres " ; "
colon= son caracteres " : "

Joaquin Araujo

student•

Para los que no vienen de React pero tienen curiosidad sobre esa librería, esta clase básicamente se traduce en React así:

HTML: Dentro del <body></body> la etiqueta raíz

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

JavaScript con JSX:

class AppContainer extends React.Component {
  render () {
    <div>
      Hola {this.props.nombre}
      <a href=`${this.props.url}` target=_blank>
        Ir a {this.props.pagina}
      </a>
    </div>
  }
}

ReactDOM.render(
  <AppContainer
    nombre='Joaquin'
    pagina='Google'
    url='https://www.google.co.ve/'
  />,
  getElementById('#app')
)

Vengo de React y lo que puedo decir sobre Vue es que se ve muy bueno de momento.

Toni

student•

Cuando refresco la página me aparece por 1 segundo
Hola {{ nombre }} Ir a {{ pagina }}

Y luego ya cambia a los valores de nombre y página. Simplemente utilizando el mismo código del archivo descargado de aquí. ¿Hay modo de solucionar esto?

Juan C Felizzola

student•

Lo que pasa es lo que comentaba Sacha: Se están borrando el caché al recargar. Primero se carga el HTML y luego se ejecuta el javascript y se estaría descargando la librería de Vue

CarlosHP

student•

Debes incluir el script de vueJS en el Head.

<head>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

David Daniel Castillo Nava

student•

Código usado en el curso

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		Hola {{ nombre }}
		<a :href="url" target="_blank">{{ pagina }}</a>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				nombre: 'David',
				url: 'https://google.com',
				pagina: 'Google'
			}
		})
	</script>
</body>

Christian David Sánchez

student•

{{ variable }} => se conoce como interpolacion

Adrian Quishpe

student•

Me descargue le sublime tex escribí “html” le doy a tab pero no se carga las demás lineas. Me pueden ayudar

Montserrat Palacios

student•

guarda tu archivo con la extension .html así el editor sabrá que lenguaje estas utilizando y podrá completarte la sintáxis 😃

Maikol Pedroza

student•

También para el auto completado sí es html necesitas abrir la etiqueta ,y luego si te aparece la opción. Por ejemplo escribe <htm… y así lo verás

Javier Leal Jose Hurtado

student•

Hola Sacha me pareció buena acotación los descrito por Ivan_aqn obviamente son detalles que quizá se van a puntos mas de detalle y avanzados del curso pero importantes aclarar una vez llegan a estar sobre la mesa. Valide todos los comentarios y son correctos lo que me gustaría saber es según tu experiencia que seria lo mejor usar claro entiendo perfectamente que muchas cosas dependen del caso en el que este trabajando en ese momento. Gracias.

Edward Steven Ramos Palacios

teacher•

Podrias ser mas especifico con tu pregunta para poderte ayudar?

Yorman Urdaneta

student•

ojala no se salga del camino como lo hizo angular, porque si asi fuera jquery seguirá reinando por los siglos.

Pablo Elias Mercado Moreno

student•

el significaria en el contexto: elemento, cierto? habría algun problema si coloco element, elemento u otra cosa? es decir, es regla que vaya el o solo es un estandar, buena practica?

Evert Escalante

student•

Lo acabo de probar, no funciono si pongo element, creo que es un estandar

Juan Sanchez

student•

todo el codigo de vue

Toni

student•

¿Qué significa el v-bind? Este profesor da muchas cosas por sabidas, y tira millas escribiendo código dejando muchas cosas sin explicar. Me desespera.

Diego Forero

Team Platzi•

v-bind sirve para pasar propiedades o atributos a un elemento html, como lo muestra sacha dentro de la etiqueta a no se permite la interpolación de variables dentro de los atributos de una etiqueta por lo tanto se usa v-bind o se puede usar el shorthand :

En lugar de hacer

<div id="{{ var }}"></div>

se usa

<div v-bind:id="var"></div>

o

<div :id="var"></div>

Este es el primer ejemplo del curso no te desesperes que a medida que el curso va avanzando explica todo las directivas, ademas siempre tienes a mano la documentación de la librería

Aaron Núñez Quispe

student•

En verdad el profesor si lo dijo, en esencia “bind” representa un vínculo/relación entre el template y el modelo de datos que tienes creado en con VueJS.

Antonio Aldrin Miranda Peñaranda

student•

Seria: capitalize: function(str){ return str.charAt(0).toUpperCase() + str.slice(1) }

Antonio Aldrin Miranda Peñaranda

student•

Se ve interesante....

Mario Menjívar

student•

¿Por qué al final del <body>?

Rodolfo Ugalde Ochoa

student•

Mi pregunta es sobre seguridad. Cuando mi proyecto en Vue.js crece demasiado, como es posible para que un(@s) usuari(@s) vivales vean las variables que estoy mandando a la vista. ¿Hay alguna forma de evitar esto? Espero que se entienda mi pregunta.
Saludos y gracias.

Daniel Esteves

student•

Lo que debes hacer es mandar las variables desde el backend a el frontend para que los usuarios solo lo vean desde el front y no viendo las variables que le pasas

Bayron Mendoza

student•

Es conveniente seleccionar la version de vue que vamos a utilizar?
Algo leí en la documentación oficial

Omar Gutiérrez Condori

student•

Quizás se refiere a si vas a usar la versión 1 de Vue o la actual versión que es la 2, es mejor trabajar con Vue 2 en su última versión que es la 2.5.17 ya que la 2.5.18 todavía sigue en beta, lo bueno de Vue es que cuando se actualiza la versión no tienes que hacer casi ningún cambio en tu código y funcionará todo normal.

German Luis Guillermo Fica

student•

Hello World example

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

Javier Leal Jose Hurtado

student•

<code>Capitalize : function (str) {
            return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
        }

Me parece mejor asegurar la funcionalidad del filtro de esta manera.