recherche
Maisoninterface WebVoir.jsPremiers pas avec les instructions Vue : parlons des six instructions intégrées couramment utilisées

Cet article vous présentera les commandes Vue et présentera les six commandes intégrées couramment utilisées dans Vue. J'espère qu'il vous sera utile !

Premiers pas avec les instructions Vue : parlons des six instructions intégrées couramment utilisées

Classification des instructions

Les directives sont une syntaxe de modèle fournie par vue pour les développeurs, qui est utilisée pour aider les développeurs à restituer la structure de base de la page. (Partage vidéo d'apprentissage : tutoriel vidéo vuejs) Les données utilisées dans

sont définies dans les données de l'instance, et l'événement est défini dans les méthodes de l'instance

  • Instructions de rendu de contenu : aide les développeurs à restituer le contenu textuel des éléments DOM
  • Instructions de liaison d'attribut : Aider les développeurs à lier dynamiquement les valeurs d'attribut​​pour les attributs des éléments
  • Instructions de liaison d'événement : Aider les développeurs à lier des événements pour les éléments
  • Instructions de liaison bidirectionnelle : aidez les développeurs à obtenir rapidement les données du formulaire sans utiliser le DOM (les modifications dans la source de données seront synchronisées avec la page, et les modifications sur la page seront également synchronisées avec la source de données)
  • Rendu conditionnel instructions : Aider les développeurs à appuyer sur Besoin de contrôler l'affichage et le masquage du DOM
  • Commande de rendu de liste : Aider les développeurs à boucler et à restituer une structure de liste basée sur un tableau

1. Commande de rendu de contenu

v-text

ne peut restituer que du contenu en texte brut, écrasera le contenu original à l'intérieur de la balise

<p v-text="gender">性别</p>

{{ }} Expression d'interpolation

ne peut restituer que du contenu en texte brut, ne le fera pas écraser le contenu original à l'intérieur de la balise

<p>性别:{{ gender }}</p>

v-html

peut restituer les chaînes balisées en contenu html, écrasera le contenu original à l'intérieur de la balise

<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->

2. Instructions de liaison d'attribut

v-bind : ou :

est l'attribut de l'élément dynamique valeur de l'attribut de liaison

<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->

Remarque : expression d'interpolation et v-bind prennent également en charge le fonctionnement de l'expression javascript

{{ 1 + 2 }}  //一元运算
{{ ok ? &#39;YES&#39; : &#39;NO&#39;}}  //三元运算
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}  //字符串的反转
<div :id="&#39;list-&#39; + id"></div>  <!--字符串和变量的拼接-->

3. Instructions de liaison d'événement

v-on : ou @

pour lier les événements aux éléments

<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{
            add(){
                this.count ++; //相当于vm.count ++;
            }
        }
    })
</script>

passer les paramètres

  • Aucun paramètre passé : il y aura un paramètre formel par défaut event , qui est un objet, et l'attribut target à l'intérieur pointe vers l'élément DOM de l'événement actuellement lié : passer un paramètre : l'événement sera écrasé afin d'utiliser les paramètres passés par vous-même et de conserver l'événement. vous pouvez transmettre manuellement un paramètre réel $event, les paramètres formels sont facultatifsevent,它是一个对象,里面的target属性指向的是当前绑定事件的DOM元素
  • 传一个参:event则会被覆盖,为了能用自己传的参又能保留event,则可以手动再传一个实参$event
  • <button @click="add(1, $event)">+N</button>
    ------------------------------------------------------------
    <script>
        //创建vue的实例对象
        const vm = new Vue({
            methods:{                    
                add(n,event){
                    //修改
                    this.count +=n;
    
                    //判断
                    if(this.count % 2 === 0)
                        event.target.style.color = &#39;red&#39;;
                    else
                        event.target.style.color = &#39;&#39;;
                }                    
            }
        })
    </script>

Modificateurs d'événement

Modificateurs qui peuvent être utilisés tant qu'il s'agit d'un événement. En voici 5 couramment. used

Modificateurs d'événementDescription.preventEmpêcher le comportement par défaut (par exemple : empêcher un lien de sauter, empêcher la soumission d'un formulaire).stopEmpêcher le bouillonnement d'un événement .capture Déclenchez le gestionnaire d'événements actuel en mode capture.onceL'événement lié n'est déclenché qu'une seule fois.selfLe gestionnaire d'événements n'est déclenché que lorsque event.target est le l'élément actuel lui-même
<!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>

Les modificateurs de touches

ne peuvent être utilisés que lorsque des événements de clavier sont déclenchés. Voici 2

Modificateurs de touches Description.esc. appuyez sur Lorsque vous appuyez sur la touche esc du clavier.enterLorsque vous appuyez sur la touche entrée du clavier
<!--举个例子-->
<!--keyup是事件名称     .esc是按键修饰符     clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">

Commande de liaison bidirectionnelle

v-model.

Obtenez rapidement les données du formulaire (s'applique uniquement aux éléments du formulaire, tels que : entrée, zone de texte, sélection)

<input type="text" v-model="username">
<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

Modificateur exclusif

Modificateur qui ne peut être utilisé que pour le v-model

Modificateur exclusifDescription .number Convertissez automatiquement la valeur saisie par l'utilisateur en un type numérique.trimFiltre automatiquement les caractères vides de début et de fin saisis par l'utilisateur.lazy Les données sont automatiquement mises à jour lorsque le focus est perdu (généralement, elles sont mises à jour en temps réel)
<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

五、条件渲染指令

v-show

控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态添加/移除display:none样式 ,一般用于需频繁切换

<p v-show="flag">这是被 v-show 控制的元素</p>

v-if

控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态创建/移除元素 ,一般用于默认不展示且展示较少

<p v-if="flag">这是被 v-if 控制的元素</p>

v-else-if

配合 v-if 指令一起使用,否则将不会被识别

<div v-if="type === &#39;A&#39;">优秀</div>
<div v-else-if="type === &#39;B&#39;">良好</div>
<div v-else-if="type === &#39;C&#39;">一般</div>
<div v-else>差</div>

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构,它有特定的语法结构 v-for="item in items"

  • item是 被循环的每一项 ,名字随意
  • items是 待循环的数组 ,名字随意
<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>

    <tbody>
        <!-- v-for还支持一个可选的第二个参数,即当前项的索引。语法格式为(item,index)in items -->
        <!-- 注意:item和index都是形参,可以根据需要进行重命名,如:(user,i)in userlist -->
        <!-- 注意:item和index除了可以被自己的子元素访问外,自身也可以使用 -->
        <!-- 注意:只有在需要用到索引时,才写这第二个参数 -->
        <tr v-for="(item,index) in list">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
       </tr>
    </tbody>
</table>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:&#39;张三&#39;, gender:&#39;男&#39; },
                { id: 2, name:&#39;李四&#39;, gender:&#39;女&#39; },
                { id: 3, name:&#39;王五&#39;, gender:&#39;男&#39; }
            ]
        }
    })
</script>

注意:在.vue文件中,只要用到 v-for指令 ,一定要绑定一个 :key 属性

  • key 的属性值尽量为 id,为 index 则无意义(因为index不和内容有一个强制的绑定关系)
  • key 的属性值只能是 字符串/数字 类型,否则报错
  • key 的属性值必须具有唯一性(不重复内容和值有一个强制的绑定关系
<tr v-for="(item,index) in list" :key="item.id">

(学习视频分享:web前端开发编程基础视频

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
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
React et Netflix: Explorer la relationReact et Netflix: Explorer la relationApr 26, 2025 am 12:11 AM

Netflix utilise React pour améliorer l'expérience utilisateur. 1) Les fonctionnalités composantes de React aident Netflix à diviser l'interface utilisateur complexe en modules gérables. 2) Virtual DOM optimise les mises à jour de l'interface utilisateur et améliore les performances. 3) La combinaison de Redux et GraphQL, Netflix gère efficacement l'état de l'application et le flux de données.

Vue.js vs frameworks backend: clarifier la distinctionVue.js vs frameworks backend: clarifier la distinctionApr 25, 2025 am 12:05 AM

Vue.js est un cadre frontal, et le cadre back-end est utilisé pour gérer la logique côté serveur. 1) Vue.js se concentre sur la création d'interfaces utilisateur et simplifie le développement par la liaison des données composante et réactive. 2) Les cadres arrière tels que Express et Django gèrent les demandes HTTP, les opérations de base de données et la logique métier, et exécutent sur le serveur.

Vue.js et la pile frontale: comprendre les connexionsVue.js et la pile frontale: comprendre les connexionsApr 24, 2025 am 12:19 AM

Vue.js est étroitement intégré à la pile de technologies frontales pour améliorer l'efficacité du développement et l'expérience utilisateur. 1) Outils de construction: intégrer avec WebPack et Rollup pour réaliser un développement modulaire. 2) Gestion de l'État: intégrer à Vuex pour gérer l'état de l'application complexe. 3) Routage: intégrer à VUerouter pour réaliser le routage des applications à une seule page. 4) Prérocesseur CSS: prend en charge le SASS et moins pour améliorer l'efficacité de développement du style.

Netflix: Exploration de l'utilisation de React (ou d'autres cadres)Netflix: Exploration de l'utilisation de React (ou d'autres cadres)Apr 23, 2025 am 12:02 AM

Netflix a choisi React pour construire son interface utilisateur car la conception des composants de React et le mécanisme DOM virtuel peuvent gérer efficacement les interfaces complexes et les mises à jour fréquentes. 1) La conception basée sur les composants permet à Netflix de décomposer l'interface en widgets gérables, améliorant l'efficacité de développement et la maintenabilité du code. 2) Le mécanisme DOM virtuel assure la douceur et les performances élevées de l'interface utilisateur Netflix en minimisant les opérations DOM.

Vue.js et le frontend: une plongée profonde dans le cadreVue.js et le frontend: une plongée profonde dans le cadreApr 22, 2025 am 12:04 AM

Vue.js est aimé des développeurs car il est facile à utiliser et puissant. 1) Son système de liaison de données réactif met automatiquement à jour la vue. 2) Le système des composants améliore la réutilisabilité et la maintenabilité du code. 3) Les propriétés informatiques et les auditeurs améliorent la lisibilité et les performances du code. 4) L'utilisation de Vuedevtools et la vérification des erreurs de console sont des techniques de débogage courantes. 5) L'optimisation des performances comprend l'utilisation d'attributs clés, d'attributs calculés et de composants de conservation. 6) Les meilleures pratiques incluent la dénomination claire des composants, l'utilisation de composants de fichiers uniques et l'utilisation rationnelle des crochets du cycle de vie.

La puissance de Vue.js sur le frontend: caractéristiques et avantages clésLa puissance de Vue.js sur le frontend: caractéristiques et avantages clésApr 21, 2025 am 12:07 AM

Vue.js est un cadre JavaScript progressif adapté à la construction d'applications frontales efficaces et maintenables. Ses caractéristiques clés incluent: 1. Responsive Data Binding, 2. Component Development, 3. Virtual Dom. Grâce à ces fonctionnalités, Vue.js simplifie le processus de développement, améliore les performances et la maintenabilité des applications, ce qui le rend très populaire dans le développement Web moderne.

Vue.js est-il meilleur que réagir?Vue.js est-il meilleur que réagir?Apr 20, 2025 am 12:05 AM

Vue.js et réagir ont chacun leurs propres avantages et inconvénients, et le choix dépend des exigences du projet et des conditions d'équipe. 1) Vue.js convient aux petits projets et aux débutants en raison de sa simplicité et de sa facile à utiliser; 2) React convient aux grands projets et aux UIS complexes en raison de son riche écosystème et de sa conception de composants.

Fonction de Vue.js: améliorer l'expérience utilisateur sur le frontendFonction de Vue.js: améliorer l'expérience utilisateur sur le frontendApr 19, 2025 am 12:13 AM

Vue.js améliore l'expérience utilisateur via plusieurs fonctions: 1. Le système réactif réalise les commentaires des données en temps réel; 2. Le développement des composants améliore la réutilisabilité du code; 3. Vuerouter fournit une navigation fluide; 4. L'animation dynamique des données et l'animation de transition améliorent l'effet d'interaction; 5. Le mécanisme de traitement des erreurs garantit les commentaires des utilisateurs; 6. L'optimisation des performances et les meilleures pratiques améliorent les performances des applications.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

MinGW - GNU minimaliste pour Windows

MinGW - GNU minimaliste pour Windows

Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)