JavaScript - Problema al instalar Vue.js

 
Vista:
sin imagen de perfil
Val: 19
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por Laura (10 intervenciones) el 01/11/2017 14:30:38
Saludos, compañeros

Estoy siguiendo un tutorial para iniciarme en Vue.js, el framework de Javascript, y la prueba inicial no funciona. La variable name no es sustituida por Laurita.... ¿Alguien podría decirme qué se me está pasando por encima?


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
 
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE-edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
		<title>Vue application</title>
 
		<script src="vue.js"></script>
	</head>
	<body>
 
		<h1 id="title">Bienvenido, {{ name }}</h1>
 
		<input type="text" id="name"/>
 
		<script type="text/javascript">
 
			new Vue({
				el: "body",
				data: {name: "Laurita"}
 
			});
 
		</script>
	</body>
</html>


¡Gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por kip (107 intervenciones) el 01/11/2017 15:13:15
Hola, cambia la propiedad el que envias al constructor Vue, asi:

1
2
3
4
new Vue({
    el: '#title',
    data: { name: 'Laurita' }
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por Laura (10 intervenciones) el 01/11/2017 16:28:23
¡Así era! ¿Cómo es posible que a él sí se le ejecutase bien en el tutorial?

Quiero decir, teniendo en cuenta que tú le mandas el objeto (elemento) en el que se encuentra name, y body lo acoge, ¿por qué no funcionaba inicialmente?

Muchísimas gracias kip!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por Laura (10 intervenciones) el 01/11/2017 17:10:56
Aprovecho para exponer otra cosilla básica que debería de funcionar... ¿Por qué no funciona v-model?


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
 
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE-edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
		<title>Vue application</title>
 
		<script src="js/vue.js"></script>
	</head>
	<body>
 
		<h1 id="title">Bienvenido/a, {{ name }}</h1>
		<input type="text" v-model="name">
 
		<script type="text/javascript">
 
			new Vue({
				el: "#title",
				data: {name: "Laurita"}
 
			});
 
 
		</script>
	</body>
</html>

Gracias de nuevo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por kip (107 intervenciones) el 01/11/2017 17:11:46
Parece ser porque usa la version 1.0 de Vuejs, en la version 2 esto se considera mala practica, es decir colocar como elemento el 'body', fijate en este link https://vuejs.org/v2/api/#el

The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to <html> or <body>.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por Laura (10 intervenciones) el 01/11/2017 17:17:44
Gracias kit, buscaré entonces un tutorial que explique el framework en su versión 2. Pero en el caso de v-model, cómo puede ser que salga el input vacío? Me estoy volviendo loca...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por kip (107 intervenciones) el 01/11/2017 17:27:45
Es simple, no encuentra el modelo porque no se encuentra dentro del scope del elemento, intentalo asi:

1
2
3
4
5
6
7
8
9
10
11
<div id="title">
  <h1>Bienvenido/a, {{ name }}</h1>
  <input type="text" v-model="name">
</div>
 
<script>
new Vue({
  el: "#title",
  data: {name: "Laurita"}
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema al instalar Vue.js

Publicado por Laura (10 intervenciones) el 01/11/2017 17:35:30
Qué vergüenza torera tengo, kit
Voy a tener que buscar tutoriales adaptados a más dudas de las comunes. Muchísimas gracias...!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar