Maison  >  Article  >  interface Web  >  Résumé des connaissances de base de Vue : développement de composants Vue

Résumé des connaissances de base de Vue : développement de composants Vue

WBOY
WBOYavant
2022-08-10 09:56:111858parcourir

Cet article vous présente vueIl présente principalement les problèmes liés au développement de composants vue. Le développement de composants fournit une abstraction. Nous pouvons développer un petit composant indépendant et réutilisable pour construire notre Jetons un coup d'œil aux composants d'application ci-dessous. sera utile à tout le monde.

Résumé des connaissances de base de Vue : développement de composants Vue

【Recommandations associées : Tutoriel vidéo javascript, front-end web

1 Programmation fonctionnelle

1 Introduction à la programmation fonctionnelle

La programmation fonctionnelle est une méthode de programmation qui intègre les opérations informatiques. sont traités comme des calculs de fonctions. Le fondement le plus important du langage de programmation fonctionnel est le calcul lambda, et les fonctions de calcul lambda peuvent accepter des fonctions en entrée (paramètres) et en sortie (valeurs de retour).

Par rapport à la programmation impérative, la programmation fonctionnelle souligne que le calcul des fonctions est plus important que l'exécution des instructions.

Par rapport à la programmation procédurale, le calcul des fonctions en programmation fonctionnelle peut être appelé à tout moment.

La fonction de filtre filtre automatiquement tous les éléments de l'objet et renvoie vrai avant qu'il ne soit stocké dans l'objet spécifié ;

La fonction Réduire résume tous les éléments à l'intérieur du tableau

2. Exemple de code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{totalPrice()}}
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    methods :{
      totalPrice(){
        const nums = [10,9,21,16,7]
        let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
        console.log(total)
        return total
      }
    }
  })
</script>
</body>
</html>

2. -model

Vue utilise souvent des éléments de formulaire tels que et