qu'est-ce qu'un composant

Les composants sont des instances Vue réutilisables. Pour le dire franchement, ils sont un ensemble de modèles réutilisables. Ils sont similaires à des frameworks tels que les balises personnalisées de JSTL et le th:fragment de Thymeleaf. Généralement, une application est organisée sous la forme d'une arborescence de composants imbriquée.
insérez la description de l'image ici
Par exemple, vous pouvez avoir des composants tels que des en-têtes de page, des barres latérales, des zones de contenu, etc., et chaque composant contient d'autres composants tels que des liens de navigation, des articles de blog, etc.

Composants Vue

Remarque : dans le développement réel, nous ne développons pas les composants de la manière suivante, mais utilisons vue-cli pour créer des fichiers de modèle .vue. Les méthodes suivantes sont juste pour que tout le monde comprenne ce qu'est un composant

Enregistrer les composants à l'aide de la méthode Vue.component()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模板-->
<div id = "app">
    <!--组件：传递给组件的值：props-->
    <lai v-for="item in items" v-bind:l="item"></lai>
</div>


<!--1. 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<script>
    <!--定义一个Vue组件的component-->
    Vue.component("lai",{
      
      
            props: ['l'],
            template: "<li>{
      
      {l}}</li>"
        });
    var vm = new Vue({
      
      
        el: "#app",
        data: {
      
      
            items: ["Java","Linux","前端"]
        }
    });
</script>
</body>
</html>

Vue.component() : composant enregistré
lai :
modèle de nom de composant personnalisé :
les données du modèle de modèle du composant sont extraites de l'attribut props, et l'attribut props est lié à l'élément via v-bind

Télécommunication

Communication asynchrone Axios

Qu'est-ce qu'Axios

Axios est un framework open source de communication asynchrone utilisable côté navigateur et NodeJS. Sa fonction principale est de mettre en œuvre la communication asynchrone AJAX. Ses caractéristiques fonctionnelles sont les suivantes :

Créer à partir du navigateurXMLHttpRequests
Créer une requête http à partir de node.js
Prise en charge de l'API Promise [programmation en chaîne en JS]
Intercepter les demandes et répondre en conséquence
Convertir les données de la demande et les données correspondantes
annuler la demande
Convertir automatiquement les données JSON
Le client prend en charge la défense XSRF (cross-site request forgery)

Pourquoi utiliser Axios

Étant donné que vue.js est un cadre de couche de vue et que l'auteur respecte strictement le SOC (séparation des préoccupations), tout vue.js ne contient pas la fonction de communication d'AJAX.Afin de résoudre le problème de communication, l'auteur a développé un plug-in séparé vue-resourcenommé, mais Après être entré dans la version 2.0, la maintenance du plugin a été arrêtée et le Axiosframework a été recommandé. Utilisez jQuery avec parcimonie car il manipule trop souvent le DOM

Le premier programme Axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-clock：解决闪烁问题-->
    <style>
        [v-clock]{
      
      
            display: none;
        }
    </style>
</head>
<body>
<div id = "vue" v-clock>
    {
   
   {info.name}}
    <a v-bind:href="info.url">点我</a>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
      
      
        el: '#vue',
        //与data不一样，data是一个属性，而data()不是
        data(){
      
      
            return {
      
      
                //请求的返回参数格式，必须和json字符串一样
                info: {
      
      
                    name: null,
                    address: {
      
      
                        country: null,
                        city: null,
                        street: null
                    },
                    url: null
                }
            }
        },

        mounted(){
      
       //钩子函数,链式编程,ES6的新特性
            axios.get('../data.json').then(response=>(this.info = response.data));
        }
    });
</script>


</body>
</html>

Cycle de vie de la vue

Une instance de Vue a un cycle de vie complet, c'est-à-dire une série de processus allant du démarrage à la création, l'initialisation des données, la compilation des modèles, la suspension dans le DOM, le rendu -> la mise à jour -> le rendu, le déchargement, etc. Nous l'appelons la vie cycle de Vue. D'une manière générale, c'est le processus de l'instance Vue de la création à la destruction, qui est le cycle de vie.

Dans l'ensemble du cycle de vie de Vue, il fournit une série d'événements qui nous permettent d'enregistrer des méthodes JS lorsque des événements sont déclenchés, et nous permettent de contrôler la situation globale avec nos méthodes JS enregistrées.Ceci dans ces méthodes de réponse aux événements pointe directement vers est une instance de Vue
insérez la description de l'image ici

propriété calculée

Qu'est-ce qu'une propriété calculée

La propriété calculée se concentre sur 属性deux mots (la propriété est un nom), premièrement c'est un 属性, deuxièmement, la 计算propriété a la capacité (computation est un verbe), voici 计算une fonction; up properties (transformer le comportement en propriétés statiques) , rien de plus ; pensez-y comme une cache

Le résultat calculé est placé dans un attribut et placé en mémoire

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-clock：解决闪烁问题-->
    <style>
        [v-clock]{
      
      
            display: none;
        }
    </style>
</head>
<body>
<div id = "app">
    <p>{
   
   {currentTime1()}}</p>
    <p>{
   
   {currentTime2}}</p>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
      
      
        el: '#app',
        data: {
      
      
            message: "hello"
        },
        methods: {
      
      
            currentTime1: function (){
      
      
                return Date.now();//返回一个时间戳
            }
        },
        computed: {
      
       //计算属性，methods，computed的方法名不能重名，重名之后只会调用methods中的方法
            currentTime2: function (){
      
      
                this.message;
                return Date.now();//返回一个时间戳
            }
        }

    });
</script>


</body>
</html>

illustrer:

méthodes : définir une méthode, utiliser currentTime1() pour appeler la méthode, besoin de parenthèses
computed : définissez la propriété computed, appelez la propriété en utilisant currentTime2 sans parenthèses ; this.message change afin de permettre à currentTime2 d'observer les changements de données
Si la valeur de la méthode change, le cache sera actualisé, vous pouvez l'utiliser dans la console vm.message="lai", modifier la valeur des données et observer à nouveau le résultat du test

Conclusion :
lors de l'appel d'une méthode, un calcul doit être effectué à chaque fois. Puisqu'il existe un processus de calcul, il y aura une surcharge du système. Que se passe-t-il si le résultat ne change pas fréquemment ? À ce stade, vous pouvez envisager de mettre en cache le résultat, ce qui peut être facilement réalisé à l'aide de propriétés calculées. La principale caractéristique des propriétés calculées est de mettre en cache les résultats de calcul rarement modifiés pour économiser la surcharge du système.

Mad God Vue Learning 03 : composants Vue, communication réseau, cycle de vie Vue, propriétés calculées