Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»
De WikiEducator
| Línea 3: | Línea 3: | ||
;app.js | ;app.js | ||
<source lang=javascript> | <source lang=javascript> | ||
| + | //Declaro una clase que será una instancia de Vue | ||
const app={ | 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"); | + | Vue.createApp(app).mount("#app1"); //Monto el objeto como una app de vue con el id app1 |
</source> | </source> | ||
;html | ;html | ||
<source lang=html5> | <source lang=html5> | ||
| − | + | <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}} | {{mensaje}} | ||
{{mensaje1}} | {{mensaje1}} | ||
</div> | </div> | ||
| − | <script src=app.js></ | + | <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--> | ||
</source> | </source> | ||
}} | }} | ||
Revisión de 03:23 10 oct 2020
- Cargar la librería en el fichero html
//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
<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-->
|
