Usuario:ManuelRomero/Vue
De WikiEducator
< Usuario:ManuelRomero
Revisión a fecha de 03:56 5 may 2021; ManuelRomero (Discusión | contribuciones)
- 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>
