Parlons de quelques instructions intégrées couramment utilisées dans vue

<p>Vue est un framework JavaScript populaire qui fournit de nombreuses instructions intégrées pour le fonctionnement du DOM et le rendu des données.

<p>Les commandes intégrées de Vue seront expliquées ci-dessous :

v-bind

<p>La commande v-bind est utilisée pour lier la valeur d'attribut de l'élément DOM aux données de l'instance Vue. Cette directive peut être utilisée avec divers attributs des éléments DOM, notamment class, style, src, href, title, etc.

<p>Par exemple, le code suivant montre comment utiliser v-bind pour lier le style de classe d'une liste d'actualités :

<template>
  <div :class="{ &#39;news-active&#39;: isActive }">
    <ul>
      <li v-for="item in news">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>Dans cet exemple, <div :class="{ 'news-active': isActive } ">Utilisez la directive v-bind pour lier un style de classe dynamique. Un changement dans l'état isActive mettra à jour class="news-active" ou supprimera la classe. <div :class="{ &#39;news-active&#39;: isActive }">用v-bind指令绑定了一个动态的class样式。isActive状态的改变将会更新class="news-active"或者移除该class。

v-if / v-else

<p>v-if和v-else指令被用来在渲染中使用条件语句。

<p>例如，下面的代码将会根据isEnabled的值来决定是否展示一段文本：

<template>
  <div>
    <p v-if="isEnabled">这段文本会在isEnabled为真时渲染</p>
    <p v-else>这段文本会在isEnabled为假时渲染</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEnabled: true
    }
  }
}
</script>

<p>当isEnabled为真时，第一个<p>元素将会显示；然而，当isEnabled为假时，第二个<p>元素将会显示。这形成了一个很强大的条件语句。

v-show

<p>v-show指令和v-if指令很类似。它们都是用来展示或者隐藏DOM元素的。

<p>然而，v-show不同于v-if，因为它不会摧毁不需要显示的DOM元素。相反，v-show只是通过display:none来隐藏需要隐藏的DOM元素。

<p>例如，下面的代码展示了使用v-show指令的例子：

<template>
  <div>
    <p v-show="isVisible">这段文本会根据isVisible的值显示或者隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

<p>这个例子中，当isVisible为真时，<p>元素将会显示。当isVisible为假时，<p>元素仍然存在于DOM中，但是不可见。

v-for

<p>v-for指令被用来渲染列表数据。它会遍历数据源的每一项，然后生成相应的DOM元素。

<p>例如，下面的代码将会生成一个新闻列表，并将news数组中的每一项映射为一个DOM元素：

<template>
  <ul>
    <li v-for="item in news">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>在这个例子中，每个<li>元素都通过v-for指令获取了一个新闻标题。

v-model

<p>v-model指令绑定Vue实例数据到表单输入、复选框、单选按钮等输入组件。

<p>例如，下面的代码展示了v-model如何绑定一个输入框的内容到Vue实例的message属性上：

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<p>在这个例子中，message属性的初始值被渲染到一个<p>元素中。然而，当在输入框中输入任何内容时，message属性也会被更新。

v-on

<p>v-on指令用于绑定DOM事件到Vue实例上的方法，以便于在事件发生时执行这些方法。

<p>例如，下面的代码展示了v-on指令如何绑定一个click事件到一个按钮上：

<template>
  <div>
    <button v-on:click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

<p>在这个例子中，onClick方法会在按钮被点击时执行。

<p>除了click事件，其他常见的DOM事件比如keydown、submit、mousemove等都可以用v-on绑定。

v-bind:key

<p>v-bind:key指令用于帮助Vue识别列表数据的渲染顺序和元素更新，从而提高渲染性能。

<p>例如，下面的代码将会使用v-for指令渲染一个新闻列表，使用v-bind:key指令将动态的绑定列表项的id：

<template>
  <ul>
    <li v-for="item in news" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { id: 1, title: 'Vue.js 3.0 发布了' },
        { id: 2, title: 'Vue 2.x 开发指南' },
        { id: 3, title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>在这个例子中，列表项的id

v-if/v-else<p>

Les directives v-if et v-else sont utilisées pour utiliser des instructions conditionnelles dans le rendu. <p>

Par exemple, le code suivant décidera d'afficher ou non un morceau de texte en fonction de la valeur de isEnabled : 🎜rrreee🎜Lorsque isEnabled est vrai, le premier &lt L'élément ;p> sera affiché ; cependant, lorsque isEnabled est faux, le deuxième élément <p> sera affiché. Cela forme une déclaration conditionnelle très puissante. 🎜🎜v-show🎜🎜La commande v-show est très similaire à la commande v-if. Ils sont tous utilisés pour afficher ou masquer des éléments DOM. 🎜🎜Cependant, v-show est différent de v-if dans le sens où il ne détruit pas les éléments DOM qui n'ont pas besoin d'être affichés. Au contraire, v-show masque simplement les éléments DOM qui doivent être masqués via display:none. 🎜🎜Par exemple, le code suivant montre un exemple d'utilisation de la directive v-show : 🎜rrreee🎜Dans cet exemple, lorsque isVisible est vrai, le <p> l’élément sera affiché. Lorsque isVisible est faux, l'élément <p> existe toujours dans le DOM, mais est invisible. La directive 🎜🎜v-for🎜🎜v-for est utilisée pour restituer les données de la liste. Il parcourra chaque élément de la source de données puis générera l'élément DOM correspondant. 🎜🎜Par exemple, le code suivant générera une liste d'actualités et mappera chaque élément du tableau news à un élément DOM : 🎜rrreee🎜Dans cet exemple, chaque &lt The ;li> obtiennent tous un titre d'actualité via la directive v-for. 🎜🎜v-model🎜🎜 La directive v-model lie les données d'instance de Vue aux composants d'entrée tels que les entrées de formulaire, les cases à cocher et les boutons radio. 🎜🎜Par exemple, le code suivant montre comment v-model lie le contenu d'une zone de saisie à la propriété <code>message d'une instance de Vue : 🎜rrreee🎜Dans cet exemple, messageLa valeur initiale de l'attribut est restituée dans un élément <p>. Cependant, lorsque quelque chose est saisi dans la zone de saisie, l'attribut message est également mis à jour. 🎜🎜v-on🎜🎜La directive v-on est utilisée pour lier les événements DOM aux méthodes de l'instance Vue afin que ces méthodes puissent être exécutées lorsque l'événement se produit. 🎜🎜Par exemple, le code suivant montre comment la directive v-on lie un événement click à un bouton : 🎜rrreee🎜Dans cet exemple, la méthode onClick sera exécutée lorsque le bouton est cliqué. 🎜🎜En plus de l'événement click, d'autres événements DOM courants tels que keydown, submit, mousemove, etc. . peut être utilisé avec la liaison v -on. La directive 🎜🎜v-bind:key🎜🎜v-bind:key est utilisée pour aider Vue à identifier l'ordre de rendu et les mises à jour des éléments des données de la liste, améliorant ainsi les performances de rendu. 🎜🎜Par exemple, le code suivant utilisera la directive v-for pour afficher une liste d'actualités, et utilisera la directive v-bind:key pour lier dynamiquement l'identifiant de l'élément de liste : 🎜rrreee🎜Dans cet exemple, le de l'élément de liste L'attribut id est lié à la directive v-bind:key pour garantir que chaque élément de liste a un identifiant unique. 🎜🎜Résumé : 🎜🎜Les instructions intégrées de Vue fournissent aux développeurs une série d'opérations DOM et d'opérations de rendu de données pratiques. La maîtrise de ces instructions permettra aux développeurs de développer plus facilement des applications Vue de haute qualité. 🎜

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!