Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»
De WikiEducator
| Línea 45: | Línea 45: | ||
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''''' | 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= | + | <source lang=javascript> |
import {createApp} from "vue"; | import {createApp} from "vue"; | ||
| Línea 54: | Línea 54: | ||
</source> | </source> | ||
| − | *Ahora debemos instalar nuestro | + | *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 | *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> | ||
Revisión de 04:56 5 may 2021
- Cargar la librería en el fichero html y declarando variables reactivas
//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-->
|
- 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>
