Share
Dans le post d’introduction de cette série, nous avons expliqué comment les concepteurs Web peuvent tirer parti de l’utilisation de Vue. Dans ce didacticiel, nous allons apprendre à mettre Vue en marche tout en répondant à vos premières questions..
Vue est juste du JavaScript, ce qui signifie que vous pouvez le charger en incluant une balise script dans votre document HTML. Le site de Vue recommande l'utilisation d'un CDN comme https://cdn.jsdelivr.net/npm/vue pour être sûr d'obtenir la dernière version. Vous pouvez également utiliser d'autres liens spécifiques à la version, tels que https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.
Remarque: Si vous créez une application de production, il est recommandé d'utiliser un contrôleur de package tel que fil pour gérer toutes vos dépendances et déployer vers des emplacements CDN. Ceci est particulièrement important si vous souhaitez intégrer Vue à votre package JavaScript, par exemple en utilisant quelque chose comme Webpack..
Lors de la création d’une «instance» Vue, vous pouvez utiliser le el option dans l'objet de configuration pour connecter votre instance au DOM. le el option devrait être soit un élément, soit une chaîne de sélection CSS. Cet élément peut également contenir un code de modèle. Donc, dans le code HTML de votre page, vous pourriez avoir quelque chose comme ceci:
Titre
contenu
Et puis dans votre JavaScript, vous auriez quelque chose comme ça:
var app = new Vue (el: "#app", données: titre: "Threat Level Midnight", contenu: "AGENT MICHAEL SCARN, robuste sans être tenté, se détend à son bureau, les pieds en l'air, passe en revue un dossier Ses armuriers à côté de son badge du FBI, qui brille dans la lumière fluorescente du bureau. Vêtu d'un costume, il a desserré sa cravate et défait quelques boutons, révélant ainsi son torse velu. "
Encore une fois, notez que le "#app" chaîne fait référence à la div dans votre code HTML. Vue remplacera le contenu intérieur de cette div par le résultat de l'étape de rendu de Vue.
Nous avons établi que Vue nous permet de séparer notre vue de nos données. Une certaine logique peut être réalisée dans la vue elle-même, mais nous pouvons éviter les modèles suivants qui conduisent à un code médiocre ou à un état incorrect:
Donc comment ça fonctionne?
Vue vous permet de définir des informations dans le Les données option. Toute paire clé-valeur passée à l'intérieur de cet objet sera observée pour les modifications, et tout ce qui dépend de cette donnée sera re-rendu quand les données changent.
Cela signifie essentiellement que le Les données objet est réactif. Si vous utilisez les méthodes de manipulation de données intégrées de JavaScript, la modification déclenchera le fonctionnement du moteur de rendu de Vue..
Par exemple, si votre objet de données est configuré comme suit:
var vm = new Vue (el: "#app", data: items: []);
Avec ce code de modèle:
item.text
Et plus tard, vous ajoutez des éléments, comme ceci:
vm.items = [texte: "Journée de la diversité", texte: "Voyage à la plage"]
Le modèle serait automatiquement rendu, en itérant (en boucle) les éléments en cours de définition..
En tant que fonctionnalité JavaScript permettant à Vue de regarder le Les données object (object getters and setters) ne fournit pas d'informations lorsque de nouvelles clés sont ajoutées ou que des clés existantes sont supprimées. L'ajout et la suppression de clés ne déclenchent aucun rendu. Ainsi, dans le même exemple ci-dessus, si l'objet de données initial est vide (articles: [] n'est pas présent):
var vm = new Vue (el: "#app", données: )
Tout changement à vm.items ne déclenchera pas un rendu. Dans la documentation de Vue:
"Vue ne permet pas l'ajout dynamique de nouvelles propriétés réactives au niveau de la racine à une instance déjà créée."
En outre, il est important de noter que lors de l’ajout d’éléments à un tableau à l’aide de la syntaxe array [index] = 'nouvelle valeur', le re-rendu ne sera pas déclenché. Au lieu de cela, vous devriez utiliser splice, ou Vue Vue.set méthode, ce qui dépasse le cadre de cet article. Afficher la liste des avertissements dans la documentation de Vue.
Vue n'entre pas en conflit avec jQuery, Underscore ou toute autre bibliothèque d'utilitaires JavaScript populaire. Cependant, vous devriez réfléchir à deux fois avant d’essayer d’utiliser Vue avec un autre JavaScript. cadre comme React.
Il est probable que vous n'ayez pas nécessairement avoir besoin jQuery en plus de Vue, mais il est possible que vous souhaitiez l'utiliser dans d'autres zones de votre application qui ne sont pas rendues par Vue.
Vue fournit également des «crochets» à intégrer à d'autres bibliothèques, par exemple pour réaliser des animations..
Vue n’a pas besoin de Babel pour que vous soyez productif avec elle. Toutefois, Babel vous permettra d’utiliser certaines des fonctionnalités de pointe de JavaScript, telles que les chaînes de modèles et les techniques de manipulation de tableaux plus sophistiquées..
Vue ne nécessite aucun système de construction spécial, ce qui le rend très accessible aux développeurs axés sur la conception, habitués à écrire de petites quantités de JavaScript, tout en restant suffisamment puissants pour être intégrés à des systèmes de construction plus complexes et à des applications complètes d'une page..
Vous pouvez non seulement avoir plusieurs instances Vue sur la même page, mais vous pouvez également référencer le même objet de données sous-jacent sur la même page. Par exemple, dans notre exemple précédent de liste de données, si notre code JavaScript ressemblait à ceci:
var sharedObject = items: [] let vm = new Vue (el: "#app", data: sharedObject) vm.items = [text: "Journée de la diversité", text: "Voyage sur la plage" ]
Le résultat de l'utilisation de ce modèle serait le même que celui de notre exemple précédent:
item.text
Cependant, nous pouvons également ajouter une seconde instance de Vue qui fait référence à la même représentation de données sous-jacente, comme ceci:
var vm2 = new Vue (el: "# app2", data: sharedObject)
Nous pourrions ensuite afficher, par exemple, le nombre d'éléments de la liste:
items.length
Bien sûr, cela peut ne pas être le comportement souhaité. Vous souhaiterez peut-être créer deux composants qui ne sont pas liés au même objet sous-jacent et qui fonctionneront sans problème.
Si vous voulez créer deux instances distinctes qui début avec le même objet sous-jacent, vous pouvez utiliser le Object.assign méthode pour créer de nouvelles copies du même objet.
let vm2 = new Vue (el: "# app2", data: Object.assign (, sharedObject))
Vue est un excellent choix pour les développeurs qui recherchent un framework léger, facile à adopter, mais anticipent le besoin d'un framework plus robuste dans le futur. Vue s'adaptera à vos besoins. Comprendre comment utiliser Vue dans différents scénarios (et avoir une idée de ce qui se passe sous la surface) vous fournira un ensemble d’outils très puissant avec lequel vous pourrez être productif dès le premier jour..
Dans le prochain didacticiel, nous verrons plus en détail la valeur unique fournie par Vue en examinant quelques exemples de son code propre. On se voit là-bas!
Apprenez Vue.js avec notre guide complet du didacticiel Vue.js, que vous soyez un codeur chevronné ou un concepteur web qui souhaite acquérir de nouvelles techniques de développement front-end.
Accentsconagua