miércoles, 29 de noviembre de 2023

Vue Basic

Cómo crear un componente nuevo

1. Por ejemplo este componente lo crearía dentro de src/components/ con el nombre MiComponente.vue:


<template>
    <div>
        <p>{{ title }}</p>
    </div>
</template>
 
<script>
export default {
    props: {
        // Props para recibir parámetros desde otro componente
        code: {
            type: String,
            default: "0", // Valor por defecto para la propiedad 'code'
        },
        // Puedes agregar más props aquí, cada una con su comentario
    },
    data() {
        return {
            title: "Hello, World!!!",
        };
    },
    computed: {
        computedTitle() {
            // Ejemplo de propiedad computada
            return this.title.toUpperCase();
        },
    },
    methods: {
        getTitle() {
            return this.title;
        },
        // Puedes agregar más métodos aquí
    },
    created() {
        // Primera función al iniciar el componente
    },
    mounted() {
        // Lógica después de que el componente se ha montado en el DOM
    },
/* computed: {
    ...mapState(["languaje", "vinculateAccount"])
  }*/
};
</script>
 
<style lang="scss" scoped>
/* Puedes agregar estilos aquí si es necesario */
</style>
 


USAR OTROS COMPONENTES

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
      <HelloWorld msg="Welcome to Your Vue.js App" />
    </div>
</template>

<script>
  // @ es un alias a /src
  import HelloWorld from "@/components/HelloWorld.vue";

  export default {
    name: "home",
      components: {
        HelloWorld
    }
  };
</script>