Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»

De WikiEducator
Saltar a: navegación, buscar
(Lo básico)
(25 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
;Cargar la librería en el fichero html
+
;Cargar la librería en el fichero html y declarando variables reactivas
 
{{MRM_Actividad|Title=Hola Mundo|
 
{{MRM_Actividad|Title=Hola Mundo|
 
;app.js
 
;app.js
Línea 29: Línea 29:
 
</source>
 
</source>
 
}}
 
}}
 +
<br />
 +
;Notas
 +
{{Nota|
 +
*El objeto se declara constante <source lang=php>const app</source>: '''''No se puede reasignar, pero si modificar su contenido.'''''
 +
{{MRM_Puntos clave|
 +
;https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/const
 +
La declaración de una constante crea una referencia de sólo lectura. No significa que el
 +
valor que tiene sea inmutable, sino que el identificador de variable no puede ser
 +
reasignado, por lo tanto, en el caso de que la asignación a la constante sea un objeto,
 +
el objeto sí que puede ser alterado.
 +
}}
 +
 +
}}
 +
===Lo básico===
 +
*Entendemos dos partes: '''''La vista (html)''''', y '''''el controlador (Javascript, una instancia de un objeto Vue)'''''.
 +
*para relacionar ambas partes en la vista vamos a utilizar o bien especificar una variable con {{}}, o bien una directiva de vue '''''v-xxxx'''''
 +
*Como relacionar estas partes, en lo básico:
 +
#Desde la vista visualizar variables que asignamos en el controlador:'''''<nowiki>{{nombre_variable}}</nowiki>'''''
 +
#Desde el controlador ver valores de la vista (p.e. contenidos de inputs):'''''v-model'''''
 +
#ligar (bind) valores desde el controlador, a propiedades de las etiquetas en html:'''''v-bind'''''
 +
#Eventos que ocurren en la vista, ejecutan métodos en el controlador:'''''v-on'''''
 +
#controlar con selección parte del html desde el controlador:'''''v-if'''''
 +
#Iterar en la vista arrays creados en el controlador:'''''v-look'''''
 +
*A continuación se especifica un ejemplo de cada parte.
 +
{{Plegable|hide|Variables del controlador visibles en la vista|
 +
[[archivo:variables_controlador_vista.png|700px]]
 +
;Que genera la siguiente salida
 +
[[archivo:salida_variables1.png|400px]]
 +
}}
 +
 +
;Puedes ver/probar el código en [https://codepen.io/pen/?template=LYzBeRy este enlace a codepen]
 +
 +
 +
<br />
 +
{{Plegable|hide|Acceder a valores de la vista en el controlador|
 +
[[archivo:salida_variables1.png|400px]]
 +
}}
 +
;Puedes ver/probar el código en [https://codepen.io/pen/?template=LYzBeRy este enlace a codepen]
 +
<br />
 +
 +
;Incluir métodos en la instancia de vue
 +
 +
===Vue con Laravel===
 +
;Para instalarlo, una vez creado el proyecto de laravel, instalamos la última versión de vue (mayo-2021, Vue 3)
 +
<source lang=bash>
 +
npm install vue@next
 +
</source>
 +
*A continuación modificamos el fichero '''''webpack.mix.js''''' haciendo que '''''mix''''' cargue '''''vue'''''
 +
<source lang=bash>
 +
mix.js('resources/js/app.js', 'public/js').vue()
 +
</source>
 +
*Puede ser que queramos instalar la última versión de Laravel Mix
 +
<source lang=bash>
 +
npm install laravel-mix@next
 +
</source>
 +
 +
Ahora debemos cargar una instancia de vue en un fichero js que carguemos en nuestra página html. Para ello primero cargamos una instacia de vue en '''''resources/js/app.js'''''
 +
<source lang=javascript>
 +
import {createApp} from "vue";
 +
 +
.createApp({
 +
 +
  }).mount("#app");
 +
 +
</source>
 +
 +
*Ahora debemos instalar nuestro elemen to con id '''''app''''' que hemos indicado en el método o evento '''''mount''''' en nuestra página html, y en ella incluir este script
 +
*En nuestra página '''''layout''''' que vamos a usar en todas las páginas de nuestro proyecto escribimos
 +
 +
 +
<source lang=html5>
 +
<!--.....-->
 +
<body>
 +
  <div id="app">
 +
 +
<!--.....-->
 +
 +
    <script src = {{asset('js/app.js')}}>
 +
       
 +
    </script>
 +
  </div>
 +
</body>
 +
</html>
 +
</source>
 +
====Probando la instalación====
 +
*Vamos a declarar una variable en nuestra instancia de vue y la vamos a visualizar en la página
 +
*Agregamos
 +
<source lang=javascript>
 +
import {createApp} from "vue";
 +
 +
.createApp({
 +
 +
  }).mount("#app");
 +
 +
</source>

Revisión de 07:52 9 ene 2022

Cargar la librería en el fichero html y declarando variables reactivas


Icon activity.jpg
Hola Mundo
app.js
//Declaro una clase que será una instancia de Vue
const app={
    data(){//Aquí declaramos las variables que quiero hacer reactivas en la vista
        return{
            mensaje :"Hola persona con mensaje 1",
            mensaje1 :"Otro Hola persona con mensaje 2",
        }
    }
}
Vue.createApp(app).mount("#app1"); //Monto el objeto como una app de vue con el id app1
html
<script src="https://unpkg.com/vue@next"></script>
 
<!--En el id tengo que especificar el componente vue que he cargado-->
<div id=app1>
 <!-- Aquí puedo referenciar las variables creadas en la funcińo data del objeto que instancia Vue -->
 {{mensaje}}
 {{mensaje1}}
 </div>
 <script src='app.js'></script>
<!-- cargo el script debo hacerlo aquí,
 ya que el id y las variables han de estar disponibles en el DOM-->




Notas

(Comment.gif:

  • El objeto se declara constante
    const app
    : No se puede reasignar, pero si modificar su contenido.


Icon key points.gif

Puntos clave

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/const
La declaración de una constante crea una referencia de sólo lectura. No significa que el 
valor que tiene sea inmutable, sino que el identificador de variable no puede ser 
reasignado, por lo tanto, en el caso de que la asignación a la constante sea un objeto, 
el objeto sí que puede ser alterado.



)


Lo básico

  • Entendemos dos partes: La vista (html), y el controlador (Javascript, una instancia de un objeto Vue).
  • para relacionar ambas partes en la vista vamos a utilizar o bien especificar una variable con {{}}, o bien una directiva de vue v-xxxx
  • Como relacionar estas partes, en lo básico:
  1. Desde la vista visualizar variables que asignamos en el controlador:{{nombre_variable}}
  2. Desde el controlador ver valores de la vista (p.e. contenidos de inputs):v-model
  3. ligar (bind) valores desde el controlador, a propiedades de las etiquetas en html:v-bind
  4. Eventos que ocurren en la vista, ejecutan métodos en el controlador:v-on
  5. controlar con selección parte del html desde el controlador:v-if
  6. Iterar en la vista arrays creados en el controlador:v-look
  • A continuación se especifica un ejemplo de cada parte.
Puedes ver/probar el código en este enlace a codepen



Puedes ver/probar el código en este enlace a codepen


Incluir métodos en la instancia de vue

Vue con Laravel

Para instalarlo, una vez creado el proyecto de laravel, instalamos la última versión de vue (mayo-2021, Vue 3)
 npm install vue@next
  • A continuación modificamos el fichero webpack.mix.js haciendo que mix cargue vue
mix.js('resources/js/app.js', 'public/js').vue()
  • Puede ser que queramos instalar la última versión de Laravel Mix
npm install laravel-mix@next

Ahora debemos cargar una instancia de vue en un fichero js que carguemos en nuestra página html. Para ello primero cargamos una instacia de vue en resources/js/app.js

import {createApp} from "vue";
 
.createApp({
 
  }).mount("#app");
  • Ahora debemos instalar nuestro elemen to con id app que hemos indicado en el método o evento mount en nuestra página html, y en ella incluir este script
  • En nuestra página layout que vamos a usar en todas las páginas de nuestro proyecto escribimos


<!--.....-->
 <body>
  <div id="app">
 
 <!--.....-->
 
    <script src = {{asset('js/app.js')}}>
 
    </script>
  </div>
 </body>
</html>

Probando la instalación

  • Vamos a declarar una variable en nuestra instancia de vue y la vamos a visualizar en la página
  • Agregamos
import {createApp} from "vue";
 
.createApp({
 
  }).mount("#app");