


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 !
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'attributpour 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 ? 'YES' : 'NO'}} //三元运算 {{ message.split('').reverse().join('') }} //字符串的反转
<div :id="'list-' + 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 = 'red'; else event.target.style.color = ''; } } }) </script>
Modificateurs d'événement
Modificateurs qui peuvent être utilisés tant qu'il s'agit d'un événement. En voici 5 couramment. usedDescription | |
---|---|
Empêcher le comportement par défaut (par exemple : empêcher un lien de sauter, empêcher la soumission d'un formulaire) | |
Empêcher le bouillonnement d'un événement | |
Déclenchez le gestionnaire d'événements actuel en mode capture | |
L'événement lié n'est déclenché qu'une seule fois | |
Le gestionnaire d'événements n'est déclenché que lorsque event.target est le l'élément actuel lui-même |
Les modificateurs de touches
ne peuvent être utilisés que lorsque des événements de clavier sont déclenchés. Voici 2Description | |
---|---|
appuyez sur Lorsque vous appuyez sur la touche esc du clavier | |
Lorsque vous appuyez sur la touche entrée du clavier |
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-modelDescription | |
---|---|
Convertissez automatiquement la valeur saisie par l'utilisateur en un type numérique | |
Filtre automatiquement les caractères vides de début et de fin saisis par l'utilisateur | |
Les données sont automatiquement mises à jour lorsque le focus est perdu (généralement, elles sont mises à jour en temps réel) |
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!

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft

SublimeText3 Linux nouvelle version
Dernière version de SublimeText3 Linux

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
