recherche

Maison >interface Web >js tutoriel >Résumé des instructions couramment utilisées dans Vue

Résumé des instructions couramment utilisées dans Vue

不言
不言original
2018-07-26 12:53:231478parcourir

Le contenu partagé avec vous dans cet article est un résumé des instructions couramment utilisées dans Vue. Le contenu est très détaillé. Examinons ensuite le contenu spécifique, dans l'espoir d'aider les amis dans le besoin.

1 Commandes communes

  • Commande v-if

  • Commande v-show

  • Commande v-else

  • Commande v-for

  • Commande v-bind

  • v-model

  • commande v-on

  • commande v-text

1.1 v-if est une instruction de rendu conditionnel, qui supprime et insère des éléments en fonction de l'expression vraie ou fausse. Sa syntaxe de base est la suivante : 

v-if="expression"

expression est une expression qui renvoie une valeur booléenne. be a L'attribut bool peut également être une expression d'opération qui renvoie bool. Par exemple : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                yes: true,
                no: false,
                age: 28,
                name: &#39;keepfool&#39;
            }
        })
    </script>
</html>

Le résultat affiché est le suivant,

Remarque : L'instruction v-if est basée sur la valeur de l'expression conditionnelle Effectuer l'insertion ou la suppression d'éléments .

1.2 directive v-for

v-for rend une liste basée sur un tableau Elle est similaire à la syntaxe de parcours de JavaScript : 

v-for="item in items"

items est un tableau, item est l'élément du tableau actuellement parcouru.

Exemple de code : 


    

        

            
                

                    name
                    age
                


            
            
                

                     {{item.name}}
                     {{item.age}}

1.3 La directive v-bind peut prendre un paramètre après son nom, séparé par deux points. Ce paramètre est généralement un attribut de l'élément HTML, pour. exemple : v-bind:class

v-bind:argument="expression"

1.4 v-model

v-model (la valeur, cochée et sélectionnée sera ignorée une fois l'élément de formulaire défini), couramment utilisée dans les formulaires < ;input> ; et4750256ae76b6b9d804861d8f69e79d3

Laisser les éléments de formulaire et les données réaliser une liaison bidirectionnelle (relation de mappage)

Exemple de code

<p id="app">
    <p v-text="message"> </p>
    <input type="text" v-model="message">
</p>

</body>

<script type="text/javascript">    var app = new Vue({
        el:"#app",
        data:{
            message:"nice to meet you"
        }
    })</script>

1.5 v La directive -on est utilisée pour surveiller les événements DOM. Sa syntaxe est similaire à v-bind. Par exemple, pour surveiller l'événement click de l'élément 3499910bf9dac5ae3c52d5ede7383485 façons d'appeler la méthode :

Lier une méthode (laisser l'événement pointer vers une référence à la méthode) ou utiliser une instruction en ligne. 
<a v-on:click="doSomething">

Le bouton Greet lie son événement click directement à la méthode greet(), tandis que le bouton Hi appelle la méthode say().
Il est très courant d'appeler ou

dans un gestionnaire d'événements. Vue.js fournit des modificateurs d'événements pour

. Comme mentionné précédemment, les modificateurs sont représentés par des suffixes d'instruction commençant par un point. event.preventDefault()event.stopPropagation()v-on

  • .stop

  • .prevent

  • .capture

  • .self

  • .once

  • .passive

Vue.js fournit des abréviations pour les deux instructions les plus couramment utilisées, v-bind et v-on. L'instruction v-bind peut être abrégée en deux points et l'instruction v-on peut être abrégée en symbole @. 
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<p v-on:click.self="doThat">...</p>

1.6 La directive v-text vise principalement à empêcher {{}} d'apparaître sur la page lors du premier chargement de la page 

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

Recommandations associées : 

v-text="expresstion"

Exemples d'utilisation de typeof dans ECMAScript

Comment vue.js implémente-t-il l'encapsulation de table arborescente ? Comment implémenter une table arborescente dans 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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemples d'utilisation de typeof dans ECMAScriptArticle suivant：Exemples d'utilisation de typeof dans ECMAScript

Articles Liés

Voir plus