Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»
De WikiEducator
| Línea 71: | Línea 71: | ||
</body> | </body> | ||
</html> | </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> | </source> | ||
Revisión de 05:01 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>
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");
