Quelles fonctions a vuejs ?

Fonctions Vuejs : 1. Utilisez une syntaxe de modèle concise pour restituer les données de manière déclarative dans le DOM ; 2. Utilisez les instructions "v-if" et "v-for" pour implémenter des structures conditionnelles et en boucle ; pour réaliser une liaison bidirectionnelle des données ; 4. Utiliser des écouteurs d'événements pour réaliser une interaction d'interface ; 5. Développement basé sur des composants, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Découvrez les fonctions de base de Vue.js~

1. Rendu des données

Le cœur de Vue.js est d'utiliser une syntaxe de modèle concise pour restituer les données de manière déclarative dans le DOM !

　Exemple 1 :

ab509c080ec9f7ec77efedb1cdcd4bed{{ message }}16b28748ea4df4d9c2150843fecfba68

<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>

Cela a généré une application vue. Maintenant, les données et le DOM ont été liés ensemble. Tant que app.message est modifié, le DOM sera mis à jour en conséquence !

Exemple 2 :

    8ee39084f353b8cd4554f1e862f090af
        5440a9a6580508c1df68d3f056adcfc7
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68

<script type="text/javascript">
        var app_2=new Vue({
            el:&#39;#app_2&#39;,
            data:{
                message:&#39;You loaded this page on &#39;+new Date()
            }
        })
    </script>

　 L'exemple 2 implique les attributs spéciaux de Vue la directive v-bind, qui sera également rendue sur l'élément DOM correspondant !

2. Conditions et boucles

　 Vue peut non seulement lier le texte DOM aux données, mais également lier la structure DOM aux données !

　1. Condition

　　Nous pouvons utiliser l'instruction v-if pour réaliser le réglage des conditions, et il est également très simple de contrôler l'affichage d'un élément dans des applications réelles.

　　Exemple 3 :

7b9e7549f8274d6577302a05a9a959fa
  14c94224c52d5f3c96b83a32bf0ae031Now you see me94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

<script>
        var app_3=new Vue({
            el:&#39;#app_3&#39;,
            data:{
                flags:true
            }
        })
    </script>

　　L'attribut data peut également être modifié pour obtenir la réponse.

　2. Loop

　　　Chaque instruction a une fonction spéciale. L'instruction v-for peut lier les données du tableau pour restituer une liste !

　　Exemple 4 :

<div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

var app_3_2=new Vue({
            el:'#app_3_2',
            data:{
                todos:[
                    { text:'Learn JavaScript' },
                    { text:'Learn Vue' },
                    { text:'Learn Other ' }
                ]
            }
        })

　Ouvrez la console et entrez app_3_2 .todos.push({ text: 'New item' }), vous constaterez qu'un nouvel élément est ajouté à la liste. .todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

3、双向绑定

　　Vue 提供了一个  v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

　　例5：

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>

var app5 = new Vue({
        el: '#app5',
        data: {
        　　msg2: '# hello '
     　　}
    })

4、界面交互

　　为了让用户和你的应用进行互动，我们可以用  v-on

3. Liaison bidirectionnelle

　 Vue fournit une directive

v-model

, qui peut facilement réaliser une liaison bidirectionnelle entre l'entrée du formulaire et l'état de l'application. 　Exemple 5 :

     <div id="app6">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

var app6=new Vue({
            el:'#app6',
            data:{
                message:'Hello Vue.js!'
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })

4. Interaction avec l'interface

　Afin de permettre aux utilisateurs d'interagir avec votre application, nous pouvons utiliser la commande v-on pour lier un écouteur d'événement, through Il appelle la méthode définie dans notre instance Vue !

　Exemple 6 :

     359b90552b49455a72fd011a2d73b952
         c34106e0b4e09414b63b2ea253ff83d6
            6b7aaeae674c2cc163cd7dde12a69fd5e353ee0ad68c807be61e217b71df5f91
        f6f112ef45f603be226bc581f9dd5e90
    16b28748ea4df4d9c2150843fecfba68

Vue.component('todo-item',{
            props:['todo'],
            template:&#39;<li>{{todo.text}}</li>&#39;
        });
        var app_7=new Vue({
            el:&#39;#app_7&#39;,
            data:{
                itemsList:[
                    {text:&#39;Vegetables&#39;},
                    {text:&#39;Cheese&#39;},
                    {text:&#39;Whatever else humans are supposed to eat&#39;}
                ]
            }
        })

　Remarque : Dans la méthode méthodes, seul le statut est mis à jour et le DOM n'est pas touché !

5.

　

Assurez-vous d'abord d'enregistrer le composant, puis de l'instancier !

　

Assurez-vous d'enregistrer le composant avant d'initialiser l'instance racine !

　

Sinon, si vous l'utilisez sans vous inscrire, vous obtiendrez une erreur !

　

🎜　 Le composant est relativement puissant, peut être étendu et encapsule du code réutilisable, mais c'est assez ennuyeux (*@ο@*) Wow ~ vous devez le connaître ! 🎜🎜Exemple 7 : 🎜rrreeerrreee🎜Les composants sont une partie très importante. Une fois que vous êtes familiarisé avec le contenu ci-dessus, vous devez étudier attentivement le système de composants. Il implique de nombreux contenus qui doivent être maîtrisés plus en détail. 🎜🎜🎜Lorsqu'elles sont utilisées dans des projets réels, plusieurs pages ont la même pièce et le même composant 🎜reuse🎜C'est tellement génial~O(∩_∩)O~~🎜🎜Recommandations associées : "🎜Tutoriel vue.js🎜 》🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!