Tutoriel de base VUE3 : utilisation du modèle de framework réactif Vue.js

Vue.js est un framework front-end basé sur des systèmes réactifs et est très populaire dans l'industrie front-end. Vue.js 3 est la dernière version de Vue.js, ajoutant de nombreuses nouvelles fonctionnalités, telles qu'une vitesse de rendu plus rapide, une meilleure prise en charge de TypeScript et une meilleure expérience de développement. Cet article se concentrera sur l'un des didacticiels de base de Vue.js 3 - le modèle.

Qu'est-ce qu'un modèle ?

Dans Vue.js, les modèles sont un moyen d'écrire du code HTML. Vous pouvez les utiliser pour décrire la structure et la disposition des composants, et utiliser les instructions et expressions fournies par Vue.js pour déclarer le comportement et le traitement des données du composant. La syntaxe des modèles de Vue.js vous aide à créer plus facilement des composants dynamiques et réutilisables.

Voici un exemple de modèle simple où nous utilisons un composant nommé hello : hello 的组件：

<!-- 模板示例 -->
<template>
  <div>
    <h1>Hello {{ name }}!</h1>
    <input v-model="name" type="text">
  </div>
</template>

<!-- 定义一个名为 hello 的组件 -->
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      name: 'Vue',
    };
  },
});
</script>

上述代码中，我们定义了一个名为 hello 的组件，并使用模板来定义其结构和布局。其中，<h1> 标签中使用了 Vue.js 的插值表达式 {{ name }}，用于动态地显示组件中的文本，该表达式会和组件中的数据进行绑定，以确保数据发生改变时，文本也相应地更新。我们还在模板中使用了 v-model 指令来绑定 name 数据，从而实现了一个动态双向绑定的输入框。

模板语法

在 Vue.js 的模板中，有很多语法可以帮助我们更好地编写组件。下面是一些常用的模板语法：

插值表达式

插值表达式可以将组件中的数据渲染到指定的位置。在模板中，我们使用两个花括号 {{ }} 包裹需要绑定的数据，如下所示：

<template>
  <div>
    {{ message }}
  </div>
</template>

在上述例子中，message 数据被插入到了 <div> 元素中。当 message 发生变化时，该显示区域也会自动更新。

指令

Vue.js 中的指令是一种特殊的属性，用于给模板添加更多的功能。指令以 v- 前缀开头，如下所示：

<input v-model="message">

其中，v-model 指令用于实现数据的双向绑定。指令的工作方式是将指定的数据和元素属性绑定到一起，从而实现动态更新的效果。

计算属性

Vue.js 中的计算属性是一种能够动态计算数据的属性。计算属性的值根据它所依赖的数据动态计算，只在它所依赖的数据发生变化时才会重新计算。下面是一个简单的计算属性定义：

<template>
  <div>
    {{ reversedMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js 3!',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
};
</script>

在这个例子中，reversedMessage 计算属性的值是根据 message 数据计算的，只有当 message 发生变化时，reversedMessage 的值才会重新计算。

条件渲染

有时候我们需要根据条件来决定是否渲染某个元素或者组件。在 Vue.js 中，可以使用 v-if 或者 v-show 指令来实现条件渲染，如下所示：

<template>
  <div>
    <div v-if="show">Hello Vue.js 3!</div>
    <div v-show="!show">Sorry, no message to show.</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

在上述代码中，我们使用 v-if 和 v-show 指令根据条件来判断是否显示指定的元素。

循环渲染

Vue.js 中的循环渲染是一种循环输出指定区域的功能，可以动态地展示组件中的数据。Vue.js 支持多种循环渲染的方式，其中最常用的方式是使用 v-for 指令，如下所示：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item 1', 'item 2', 'item 3'],
    };
  },
};
</script>

在上述代码中，我们使用 v-for 指令将数据循环输出到页面中。每次循环中，我们可以使用插值表达式 {{ item }}rrreee

Dans le code ci-dessus, nous définissons un composant nommé hello, et utilisons des modèles pour définir sa structure et son agencement. Parmi eux, la balise <h1> utilise l'expression d'interpolation Vue.js {{ name }} pour afficher dynamiquement le texte dans le composant. Cette expression sera liée. aux données du composant pour garantir que lorsque les données changent, le texte est mis à jour en conséquence. Nous avons également utilisé la directive v-model dans le modèle pour lier les données name, implémentant ainsi une zone de saisie de liaison bidirectionnelle dynamique.

Syntaxe du modèle

Dans le modèle de Vue.js, il existe de nombreuses syntaxes qui peuvent nous aider à mieux écrire des composants. Voici quelques syntaxes de modèles couramment utilisées : 🎜

Expression d'interpolation

🎜L'expression d'interpolation peut restituer les données du composant à l'emplacement spécifié. Dans le modèle, nous utilisons deux accolades {{ }} pour envelopper les données qui doivent être liées, comme indiqué ci-dessous : 🎜rrreee🎜Dans l'exemple ci-dessus, le message les données sont insérées dans l'élément <div>. Lorsque le message change, la zone d'affichage sera automatiquement mise à jour. 🎜

Directives

🎜Les directives dans Vue.js sont un attribut spécial utilisé pour ajouter plus de fonctionnalités aux modèles. La directive commence par le préfixe v-, comme indiqué ci-dessous : 🎜rrreee🎜Parmi eux, la directive v-model est utilisée pour implémenter la liaison bidirectionnelle des données. La façon dont la directive fonctionne est de lier les données spécifiées et les attributs d'élément pour obtenir des effets de mise à jour dynamiques. 🎜

Propriété calculée

🎜La propriété calculée dans Vue.js est une propriété qui peut calculer dynamiquement des données. La valeur d'une propriété calculée est calculée dynamiquement en fonction des données dont elle dépend et n'est recalculée que lorsque les données dont elle dépend changent. Voici une définition simple d'une propriété calculée : 🎜rrreee🎜Dans cet exemple, la valeur de la propriété calculée reversedMessage est calculée en fonction des données message, uniquement si le messagereversedMessage ne sera recalculée que lorsque /code> change. 🎜

Rendu conditionnel

🎜Parfois, nous devons décider s'il faut restituer un élément ou un composant en fonction de conditions. Dans Vue.js, vous pouvez utiliser la directive v-if ou v-show pour implémenter le rendu conditionnel, comme indiqué ci-dessous : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons v-if et v-show déterminent s'il faut afficher les éléments spécifiés en fonction des conditions. 🎜

Rendu en boucle

🎜Le rendu en boucle dans Vue.js est une fonction qui boucle une zone spécifiée et peut afficher dynamiquement les données dans le composant. Vue.js prend en charge plusieurs méthodes de rendu en boucle, dont la plus courante consiste à utiliser la directive v-for, comme indiqué ci-dessous : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons v-for La directive boucle les données vers la page. Dans chaque boucle, nous pouvons utiliser l'expression d'interpolation {{ item }} pour restituer l'élément de données correspondant. 🎜🎜Résumé🎜🎜Les modèles Vue.js sont un moyen simple et puissant de nous aider à créer des composants dynamiques et réutilisables. Grâce à la syntaxe des modèles, nous pouvons mieux écrire du code HTML et découpler les données et le comportement des vues, améliorant ainsi la lisibilité et la maintenabilité du code. Dans Vue.js 3, la syntaxe des modèles a été encore améliorée et optimisée pour mieux répondre aux besoins des développeurs. 🎜

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!