Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»

De WikiEducator
Saltar a: navegación, buscar
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>
 
}}
 
}}
 +
;Incluir métodos en la instancia de vue

Revisión de 04:25 10 oct 2020

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



Incluir métodos en la instancia de vue