Maison >interface Web >Voir.js >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.
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
的组件,并使用模板来定义其结构和布局。其中,4a249f0d628e2318394fd9b75b4636b1
标签中使用了 Vue.js 的插值表达式 {{ name }}
,用于动态地显示组件中的文本,该表达式会和组件中的数据进行绑定,以确保数据发生改变时,文本也相应地更新。我们还在模板中使用了 v-model
指令来绑定 name
数据,从而实现了一个动态双向绑定的输入框。
在 Vue.js 的模板中,有很多语法可以帮助我们更好地编写组件。下面是一些常用的模板语法:
插值表达式可以将组件中的数据渲染到指定的位置。在模板中,我们使用两个花括号 {{ }}
包裹需要绑定的数据,如下所示:
<template> <div> {{ message }} </div> </template>
在上述例子中,message
数据被插入到了 dc6dce4a544fdca2df29d5ac0ea9906b
元素中。当 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
hello
, et utilisons des modèles pour définir sa structure et son agencement. Parmi eux, la balise 4a249f0d628e2318394fd9b75b4636b1
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èleDans 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 : 🎜{{ }}
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 dc6dce4a544fdca2df29d5ac0ea9906b
. Lorsque le message
change, la zone d'affichage sera automatiquement mise à jour. 🎜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. 🎜reversedMessage
est calculée en fonction des données message
, uniquement si le messagereversedMessage
ne sera recalculée que lorsque /code> change. 🎜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. 🎜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!