L'utilisation de frameworks progressifs a un faible coût, ce qui facilite l'adoption et la migration des projets existants (ceux construits à l'aide d'autres technologies) vers le nouveau framework. Vue.js est un framework évolutif car vous pouvez l'introduire progressivement dans une application existante sans avoir à réécrire l'intégralité du programme à partir de zéro.
La partie la plus basique et la plus centrale de Vue implique la couche « vue », alors commencez votre voyage en introduisant progressivement Vue dans votre programme et en remplaçant l'implémentation « vue ».
En raison de sa nature évolutive, Vue fonctionne bien avec d'autres bibliothèques et est très facile à utiliser. Cela contraste avec les frameworks comme Angular.js, qui nécessitent que les programmes existants soient complètement refactorisés et implémentés dans le framework.
Vue.js facilite le rendu des données et masque l'implémentation interne. Par exemple, le code suivant :
HTML
<p id=”app”></p>
JavaScript
const greeting = “Hello there!”; const appp = document.getElementById(“app”); appp.innerText = greeting;
L'extrait de code ci-dessus sera utilisé lorsque le L'ID est « app » Affiche la phrase « Bonjour ! » à la p. Le code contient toutes les étapes nécessaires pour atteindre le résultat. Sélectionnez d'abord l'élément DOM avec l'ID "app", puis définissez manuellement le contenu de p à l'aide de la propriété innerText.
Voyons maintenant comment procéder dans Vue.
Modèle
<p id=”app”>{{ greeting }}</p>App
new Vue({
data: {
greeting: ‘Hello There!’
},
el: ‘#app’
});Nous avons créé un attribut de données nommé "greeting" dans le programme Vue, mais vous il suffit de saisir "salutation" dans p en utilisant la syntaxe moustache, sans se soucier de l'implémentation interne. Nous déclarons la variable « Greeting » et Vue fait le reste. Voici à quoi ressemble le rendu déclaratif. Vue cache et gère les informations internes.
Pour parcourir un objet ou un tableau, vous pouvez utiliser la directive v-for. Voici un exemple :
Modèle
<p id="app">
<ul>
<li v-for="(value, key) in card">{{ key }} - {{ value }}</li> </ul>
</p>App
new Vue({
el: '#app',
data: {
card: {
name: 'John Doe',
age: 25,
city: 'New York',
country: 'US'
}
}
});Sortie
Modèle :
{{title}}App :
new Vue({
el: '#app',
data: {
title: 'Vue.js'
}
})Le code ci-dessus affichera la chaîne <h1 style="color: green;">Vue.js</h1> dans p. La raison pour laquelle la balise entière est rendue sous forme de chaîne est que la balise du modèle de moustache {{title}} traite les données entrantes comme une chaîne et ne les analyse pas en code exécutable. Cela permet également d'atténuer les problèmes liés au XSS où du code malveillant est injecté dans la page. Ceci est similaire à l'utilisation de l'instruction elementSelector.innerText = text en JavaScript.
Pour implémenter une liaison de données bidirectionnelle, vous pouvez utiliser la directive v-model. La directive v-model est principalement du sucre syntaxique :
<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">
Dans l'instruction ci-dessus, chaque fois que l'événement "keyup" est observé, l'attribut de données nommé "nameInput" est défini sur la valeur de la zone de saisie. En même temps, liez l'attribut value de la zone de saisie à l'attribut de données "nameInput". Cela établit une relation de données bidirectionnelle entre les champs de formulaire et les attributs de données.
v-model peut le faire plus efficacement que de le définir manuellement. Pour reproduire l'effet ci-dessus à l'aide de v-model, saisissez à nouveau ce qui suit dans la même zone de saisie :
<input type="text" v-model="nameInput">
Il convient de noter que lors de la mise en œuvre d'une liaison de données bidirectionnelle, les attributs de données utilisés sont considérés comme une source de facto. Toute modification apportée à l'attribut data aura priorité sur les événements de saisie utilisateur dans le champ du formulaire.
Les événements de clic peuvent être capturés à l'aide de la directive v-on:click. Cette commande peut également être représentée par le symbole abrégé @click. Voici un exemple :
v-on:click symbol
<a v-on:click=”clickHandler”>Launch!</a>
@click symbol
<a @click=”clickHandler”>Launch!</a>
Lorsqu'un accessoire se voit attribuer une valeur à l'aide de la directive v-bind en tant que fonction liée à une propriété, on l'appelle un accessoire dynamique. Par exemple, la propriété tweet du composant suivant est liée à une propriété de données nommée tweetText. Ceci s’oppose aux valeurs statiques codées en dur. Cette liaison est toujours unidirectionnelle, ce qui signifie que les données peuvent circuler du composant parent au composant enfant et jamais l'inverse.
<TweetBox :tweet=”tweetText”>
est une série d'attributs spéciaux que vous pouvez ajouter aux balises HTML de votre modèle pour leur donner une réactivité particulière. Les directives permettent aux éléments d'un modèle de réagir aux modifications en fonction d'une logique définie à l'aide de propriétés de données, de méthodes, de propriétés calculées ou surveillées et d'expressions en ligne. Par exemple, le code suivant utilise la directive v-on pour implémenter un écouteur d'événement click sur le composant.
<SignUpButton v-on:click=”doSignup” />
ou
<SignUpButton @click=”doSignup” />
Dans cet exemple, nous utilisons la directive v-if pour afficher ou supprimer des éléments et des composants en fonction d'un attribut de données appelé showButton. Les directives commençant par v- indiquent des propriétés spécifiques à Vue. Les exceptions à cette règle sont les formes abrégées de v-on et v-bind.
<SignUpButton v-if=”showButton” />
Vue permet également de définir vos propres directives personnalisées.
v-show 指令允许有条件地显示元素。在下面的代码中，仅当 isDisplayed 数据属性为 true 时，才会显示该元素。
<TweetBox v-show=”isDisplayed”>
使用 v-show 指令时，可使用 CSS 的 display 属性切换元素的可见性。
v-show 和 v-if 都用于有条件地显示元素，而后者提供了条件渲染的真正实现。 v-show 只需切换 CSS 的 display 属性即可显示或隐藏元素，而 v-if 指令可创建或销毁组件。每次显示状态更改时，代价通常会更大。
另一方面，v-show 成本较低，因为它仅切换元素的CSS显示属性。所以如果必须经常切换元素，则 v-show 会提供比 v-if 更好，更优化的结果。
就加载元素的初始渲染成本而言，v-if 不会渲染最初隐藏的元素的节点，而 v-show 会渲染其 CSS display 属性被设置为 none 的元素。
可以在任何元素上使用 v-on 指令来实现事件侦听器。此外，v-on 还允许我们将按键修饰符用于 “enter”，“tab”，“esc”，“space” 等常见按键。这是一个例子：
模板
<textarea @keyup.enter="storeComment"></textarea>
App
new Vue({
el: '#app',
methods: {
storeComment(event) {
//access the value of the textarea box using event.target.value or
// use v-model to bind to a data property
}
}
});可以通过官方的 vue-router 库在用 Vue 构建的 SPA 中进行路由。该库提供了全面的功能集，其中包括嵌套路线、路线参数和通配符、过渡、HTML5 历史与哈希模式和自定义滚动行为等功能。 Vue 还支持某些第三方路由器包。
在事件侦听器上调用 event.preventDefault() 的最佳方式是将 .prevent 修饰符与 v-on 指令一起使用。这是一个例子：
<a @click.prevent=”doSomethingWhenClicked”>Do Something</a>
过滤器是在 Vue 程序中实现自定义文本格式的一种非常简单的方法。它们就像可以在表达式中通过管道传递（使用管道字符）以取得结果的运算符。下面是一个可以反转文本字符串的过滤器示例：
模板
<p id="app">{{ title | reverseText }}</p>
App
new Vue({
el: '#app',
data: {
title: 'This is a title'
},
filters: {
reverseText(text) {
return text.split('').reverse().join('');
}
}
});输出
eltit a si sihT
在上面的例子中，我们创建了一个名为 reverseText 的过滤器，该过滤器反转文本字符串并返回。这是一个简单的函数，接受输入并返回处理后的输出。通过在过滤器下声明，它就可以成为可以在模板中使用的过滤器。
在模板中，我们只是将 reverseText 过滤器通过管道传递到了想要在 mustache 标签中显示的数据变量。这样可以将多个过滤器管道连接在一起。因此过滤器提供了一种非常优雅的方式来处理文本。
Vue 允许我们绑定到 class 属性。在下面的例子中，我们将 class 属性绑定到一个对象，该对象允许使用 data 属性切换类。
模板
<p :class=”{ pStyle : showp }”></p>App
new Vue({
el: '#app',
data: {
showp: true
}
});在上面的代码中，只要数据属性 showp 为 true，类名 pStyle 将应用于 p。
这可以在绑定类时用 Array 来实现。以下是实现方法：
模板
<Button :class=”[‘btn’, ‘btnRed’, { btnActive : isActive }]”>Process</button>App
new Vue({
el: '#app',
data: {
isActive: true
}
});在上面的代码段中，将串联各个类的数组，并基于 isActive 数据属性的值对对象中的表达式进行响应式评估。
计算属性是一类特殊函数的结果，当从属属性发生变化时，这些函数会自动进行计算。用它们代替内联表达式可以更好地表达复杂的逻辑，在模板中不能作为内联表达式合并。
每个计算方法都可以在模板部分作为属性使用。当从属属性更改时，计算方法将自动计算并缓存结果，这样比使用普通方法更好。方法在访问时将始终会重新计算，而如果自上一次计算和缓存阶段以来该方法内使用的属性未发生更改，则计算的属性将不会重新计算。
需要注意的是，仅当方法中使用的属性是响应性的（例如数据属性）时，才考虑依赖关系的更改。
这是一个演示计算属性的简单例子：
模板
<p id="app">
<input type="text" v-model="email" :class="{ invalid : isInvalid }">
</p>App
const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@
((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
new Vue({
el: '#app',
data: {
email: ''
},
computed: {
isInvalid() {
return !emailRegEx.test(this.email);
}
}
});在上面的代码示例中，如果正则表达式测试针对电子邮件输入框失败，则 isValid 计算属性将返回 true。如果电子邮件验证程序认为输入的值无效，就会看到文本框便为红色（你必须创建一个名为 .invalid 的类，并将背景颜色属性设置为红色）。当用户键入内容时，将重新执行计算的方法，并且在验证格式之后，动态删除无效的类。
这可以通过样式标签上的 scoped 属性来实现。在内部 Vue 使用 PostCSS 插件为所有样式元素分配唯一的数据属性，然后使样式针对这些唯一的元素。举个例子：
<template>
<p class=”title”>This is a title</p>
</template>
<style scoped>
.title {
font-family: sans-serif;
font-size: 20px;
</style>可以用作为组件中单向入口的 prop 把数据向下传递到子组件。这是一个例子：
<template>
<p>
<contact-list-item v-for=”contact in contacts” :contact=”contact” />
</p>
</template>
<script>
import ContactListItem from ‘./ContactListItem’;
export default {
name: ‘address-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
</script>contact-list-item 上绑定的 prop “contact” 是一个入口，用于从用作子项的父组件接收数据。在 contact-list-item 组件中：
<template>
<p>
<span>{{ contact.name }}</span>
<span>{{ contact.email }}</span>
</p>
</template>
<script>
export default {
name: ‘contact-list-item’,
props: [‘contact’]
}
</script>在这里声明了一个名为 “contact” 的 prop 引入数据，然后可以直接在模板部分中显示。
组件本质上是 Vue 实例，它们封装模板、逻辑和可选的本地响应性数据属性，能够提供可重新使用的自定义构建元素。可重用性是构建组件的核心。
使用单文件组件构建应用程序时，组件在扩展名为 .vue 的文件中定义。单文件组件包含三个部分：模板部分定义了该组件的 HTML 布局；脚本部分定义了数据、属性和逻辑单元（如方法）并将内容导出为 Vue 组件；还有一个样式部分，用于定义组件的样式表。单文件组件使用 Webpack 等模块捆绑器进行编译。
Vue 实例（组件）从其初始化到销毁和删除都经历生命周期。在整个过程中，Vue 允许开发人员运行自定义函数的几个阶段。这些函数称为生命周期 hook。以下是一些生命周期 hook 的列表：
插槽允许你定义可以封装和接受子 DOM 元素的元素。组件模板中的 <slot> </ slot> 元素作为通过组件标签捕获的所有DOM元素的出口。这是一个例子：
Post.vue |实现插槽的组件
<template>
<p class="hello">
<h3 class="title">{{title}}</h3>
<p class="content">
<slot></slot>
</p>
</p>
</template>App.vue | 使用Post组件的App组件
<template> <p id="app"> <Post title="Hello from Vue!"> Vue 是用于构建用户界面的渐进框架。与其他框架不同，Vue从头开始设计以逐渐采用。 核心库仅集中在视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时， Vue也完全能够为复杂的单页应用程序提供支持。 </Post> </p> </template>
在上面的示例中，斜体文本显示在 Post 组件中标有 <slot> 元素的区域内。
观察者允许我们观察更改的特定属性，并执行定义为函数的自定义操作。尽管它们的用例与计算的属性相交叉，但是当某些数据属性发生改变时，有时需要观察者执行自定义操作或运行代价昂贵的操作。
可以用 $emit('event-name', eventPayload)发出自定义事件。然后可以像其他事件一样，用 v-on 指令在父组件上拦截。
虽然这不是约定，但是开发人员经常使用变量名称 'vm' 来命名根 Vue 实例，该变量名称代表 'ViewModel'，因为 Vue 本质上负责视图层，并且部分受到了 MVVM 模式的启发（Model-View-View-Model）。但是，根本没有必要将根实例命名为 “vm”。
相关推荐：
更多编程相关知识，请访问：编程入门！！
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!
Pourquoi vue.js signale-t-il une erreur ?
Quelles sont les utilisations des slots vue.js ?
Comment sauter avec des paramètres dans vue.js
Comment définir un arrêt programmé dans UOS
Pourquoi Win11 ne peut-il pas être installé ?
Comment utiliser la fonction moyenne
Téléchargement de l'application OuYi Exchange
Que signifie Taobao b2c ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
