Composants - vue.js

Composants

Composants basique - formulaire

Création d’un composant basique sous forme de formulaire avec l’utilisation d’un template et d’une variable

HTML

<login-form />
<!-- login-form est le composant que j'ai créé -->

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
app.component('login-form', { //nom de mon composant "login-form"
  template:` //structure html interne
  <div>
    <h1>Composants - vue.js</h1>
    <input type="email" />
    <input type="password" />
  </div>
  `,
  data() {
    return {
      title: 'Login form' //Variable interne du composant
    }
  }
})

Composants basique - formulaire méthode

Création d’un composant basique - avec une méthode

HTML

<login-form />

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
app.component('login-form', {
  template:`
  <form @submit.prevent="handleSubmit"> // @submit envoie le formulaire
  // .prevent empêche l'actualisation de la page
  //handleSubmit est ma méthode
    <h1>Composants - vue.js</h1>
    <input type="email" />
    <input type="password" />
    <button>Log in</button>
  </form>
  `,
  data() {
    return {
      title: 'Login form'
    }
  },
  methods: {
    handleSubmit(){
        console.log('Submitted') //affiche Submitted quand la méthode est appelée
    }
  }
})

Composants basique - formulaire affichage

Création d’un composant basique - avec affichage à l’envoie

HTML

<login-form />

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
app.component('login-form', {
  template:`
  <form @submit.prevent="handleSubmit">
    <h1>Composants - vue.js</h1>
    <input type="email" v-model="email" /> //change la valeur de la variable email
    <input type="password" v-model="password" /> //change la valeur de la variable password
    <button>Log in</button>
  </form>
  `,
  data() {
    return {
      title: 'Login form',
      email: '',
      password: ''
    }
  },
  methods: {
    handleSubmit(){
        console.log(this.email, this.password) //affiche les valeurs contenues dans email et password
    }
  }
})