Fermer

juillet 19, 2018

Un didacticiel rapide sur la prise en main de Vue


Un tutoriel rapide sur le démarrage de Vue, y compris l'utilisation d'un composant de Kendo UI pour Vue. Conçu pour être un bon point de départ avec un exemple qui, comme Vue lui-même, est évolutif.

Ce tutoriel est destiné à l'explorateur de Vue pour la première fois. Je vais vous montrer comment créer un exemple simple en utilisant Vue, puis j'ajouterai de l'interactivité et un composant d'interface utilisateur, et j'ajouterai enfin plus de fonctionnalités et un composant Kendo UI . Bien que cette démonstration de tutoriel soit assez simple, elle décrit tous les éléments clés de l'ajout de fonctionnalités et de fonctionnalités à l'aide de Vue. Il serait très facile de développer le code de démonstration et d'échanger des composants plus complexes. Mon exemple, comme Vue lui-même, est évolutif.

En tant que sidenote, le nom du framework est techniquement "Vue.js", et certains endroits vont même virer sur le numéro de révision pour obtenir "Vue.js 2", mais la plupart des gens utilisent simplement "Vue" dans l'usage courant, donc je le ferai aussi. Ce tutoriel se concentre sur le langage et ne couvre pas les sujets plus avancés comme le Vue-cli qui sont importants, mais qui devraient venir plus tard

Commençons!

bonjour, monde

Commençons par vous donner un avant-goût de la facilité de démarrer avec Vue. Nous commencerons par une implémentation de Vue de l'application populaire " hello, world ". Notez que je suis un puriste ici et que j'utilise l'orthographe originale telle que définie dans le livre original de Kernighan et Ritchie, " The C Programming Language ". Recherchez-le pour une leçon d'histoire.

Cela dit, je n'utiliserai pas le texte "bonjour, monde". Vous verrez pourquoi plus tard. Au lieu d'un exemple de "salut, monde", voici un exemple de "tu dois me le faire savoir". C'est parti – explication à suivre

<html lang = "en" >

[1945908]

<méta charset = ] "UTF-8" >

Affrontement

[1945908]

[1945908]

[19659002Anglais] [1945908]

[Traduction] [TRADUCTION] 19659002] <div id = "sg1" >

[1969030]

{{m1} }

[1945904Cetimageaétéajoutéàmabibliographie0]

[1945908]

Ce que nous avons fait

Tout d'abord, dans la section en-tête, nous donnons le titre. Pas strictement nécessaire mais bonne pratique au cas où vous oublieriez ce que c'est.

Ensuite, nous chargeons la bibliothèque Vue à partir d'un CDN. Quand vous commencerez, vous basculerez probablement vers NPM (qui est la méthode d'installation recommandée pour Vue), mais un CDN est le moyen le plus simple et le plus portable de l'inclure.

D'abord, passons à la section du corps. Ici, nous avons une div avec l'ID "sg1", qui n'est pas une référence à Star Gate (désolé), puis l'espace réservé pour notre texte.

<div id = "sg1" >

{{m1}}

[1945908]

Au coeur de Vue c'est le possibilité de restituer de façon déclarative des données au DOM avec une simple syntaxe de modèle.

En revenant à la section d'en-tête, nous voyons du code qui se déclenche lorsque le DOM est chargé en définissant un écouteur d'événement. Si vous venez du monde de jQuery c'est comme jQuery $ (document) .ready () mais sans le jQuery.

Ensuite, nous avons notre code Vue et tout ce qui fait ici est le contenu de "m1".

nouveau Vue ({

el: '# sg1' [19659002] // définir des données - texte d'affichage initial

données: {

«Tu dois me le faire savoir» ]

})

Nous commençons ici par créer une nouvelle instance de Vue avec la fonction Vue. Avec cela, nous passons dans un objet d'options qui lui dit quoi faire. Ici, nous venons de définir une valeur initiale pour m1 dans la section de données. Plus sur cela plus tard. Nous avons également dit à quel élément nous voulons travailler, et el: '# sg1' est similaire à dire document.getElementById ('# sg1')

Quand on l'exécute, on obtient:

Exemple de vue

C'était assez simple et pas énormément utile mais ça nous permet de savoir comment configurer une application Vue. Jusqu'à présent, cela n'a pas l'air trop différent, mais quelque chose d'intéressant est arrivé ici que nous n'avons pas encore vu. Nous allons explorer ce que c'était dans l'exemple suivant.

Ajouter de l'interactivité

Ensuite, nous allons augmenter la complexité un peu ici et ajouter ... un bouton! Jetez un coup d'oeil:

<html lang = "fr" > [19459018Choisirsurcettepage]

[1945908]

[19659017] <méta jeu de caractères = "UTF-8" >

Clash

[1945908]

[1945908]

<div id = "sg1" >

[{m1}}

Dans la section HTML, nous avons ajouté le bouton. C'est un bouton basique, et nous avons défini une action à effectuer en cliquant sur un bouton en attachant un écouteur d'événement qui appelle la méthode "staygo", et nous avons mis un espace réservé pour le texte du bouton appelé "btext". [19659003] De retour dans le code, nous avons ajouté quelque chose de nouveau à notre objet options - une section de méthodes. Et dedans nous avons ajouté une méthode appelée "staygo" pour correspondre à celle du bouton. C'est là que ça devient intéressant.

méthodes: {

hébergement: fonction () [

[19659133] var sel = ( this .btext == action [0])? sel = 1: sel = 0;

.m1 = résultat [sel];

.btext = action [sel];

}

}

Nous avons également ajouté du texte à la zone de données pour donner une étiquette initiale au bouton. Dans la méthode, nous voyons essentiellement ce qui est sur le bouton, puis basculer entre l'une des deux lignes de texte et l'une des deux étiquettes de bouton.

data: {

m1: "Tu dois me le faire savoir"

btext: action [0]

},

La chose intéressante qui s'est produite ici est que nous avons maintenant lié les données et le DOM et notre application est réactive. Lorsque nous modifions la valeur de m1, le texte affiché est modifié. Lorsque nous modifions la valeur de btext, le texte du bouton est modifié. Rien de plus doit être fait. Cela s'est également produit dans notre premier exemple, mais nous ne l'avons pas vu parce que nous avons simplement laissé le texte avec sa valeur initiale.

Voici à quoi cela ressemble:

Exemple de vue

Nous voyons le texte «Tu dois me le faire savoir» et le bouton est marqué «go». Comme n'importe quel fan de punk classique sait, si vous allez "Il y aura des problèmes" et le texte est changé en ceci. En même temps, ayant décidé de rester, notre seule option est maintenant de "rester" et nous allons changer l'étiquette sur le bouton pour "rester".

Exemple de vue

Si vous cliquez maintenant sur " Reste ", le texte change en" Il sera double ".

Exemple de vue

Vous pouvez cliquer sur aller et venir entre rester et partir et décider si vous voulez un problème normal ou un double problème.

Ajout d'un composant d'interface utilisateur de Kendo

Pour simplifier, j'utilise ici un composant de base de la liste déroulante, mais le processus est sensiblement le même si vous voulez ajouter une grille ou un autre composant plus complexe. Aussi - ça devient un peu long donc je vais lister les additions à chaque section ci-dessous et lister le code complet ici sur GitHub .

Pour commencer, nous avons ajouté une section dans l'en-tête pour apporter dans les styles d'interface utilisateur de Kendo, les bibliothèques de base et la bibliothèque de ce composant.

<! - Charger les bibliothèques requises pour Kendo UI ->

<! - Charger le paquet Kendo Vue requis [19659033] pour le composant spécifique que nous utilisons ->

<script src = " https://unpkg.com/ @ progress / kendo-dropdowns-vue-wrapper / dist / cdn / kendo-dropdowns-vue-wrapper.min.js ">

Cela inclut un style pour les composants, certaines bibliothèques sur lesquelles nous comptons et la bibliothèque avec le composant que nous allons utiliser.

Nous avons également ajouté un nouveau div dans le corps. Ici, vous voyez du nouveau texte mais aussi la liste déroulante "kendo-dropdownlist".

<div id = " sg2 " class = " vue-app ">

{{m2}}

[19459004Diffusion]

Chanteur:

<kendo-dropdownlist: source de données = "singerOptions "

: champ de données-données = " 'texte' "

[19659288]: champ de valeur de données = "'valeur'"

@ change = "onChange" > [19659002] [1945908]

[1945908]

Ici, vous pouvez voir que nous avons spécifié la source de données (le tableau des éléments de texte) pour les étiquettes réelles, le nom du champ de texte, la valeur à renvoyer et finalement nous avons lui a dit quoi faire sur une action spécifique. Dans ce cas, c'est "change", qui se déclenche lorsque la sélection est modifiée (non seulement sélectionnée, mais en fait changée pour une sélection différente) et nous avons spécifié la méthode "onChange". Il y a un certain nombre d'autres événements sur lesquels vous pouvez déclencher, et une tonne d'autres paramètres que vous pouvez définir pour contrôler le comportement de la liste déroulante. Pour plus d'informations, jetez un coup d'œil aux documents pour le composant Kendo UI Dropdownlist pour Vue .

Revenons maintenant au script et nous avons ajouté un nouveau code pour cette nouvelle section.

new Vue ({

el: «# sg2»

[19659095] // data est la ligne des paroles et les deux options pour la liste déroulante

données: {

m2: problème [0]

chanteurOptions: [

[19659040] {text: option [0]valeur: '0'

{texte: option [1]valeur: [1 9659013] '1' }

] [1945908]

}, ]

// et la méthode ici met juste à jour le texte basé sur la sélection du chanteur

méthodes : {

sur Changement: fonction (e) {

[19659133] .m2 = problème [e.sender.value()];

}

}

})

Nous avons ajouté deux éléments de données - un pour le texte «m2», et le second est un tableau qui est effectivement utilisé par la liste déroulante . Enfin, nous avons une méthode qui est appelée sur un changement de sélection dans la liste déroulante et tout ce qu'il fait est de définir le texte "m2" basé sur la sélection, qui est passé avec "e.sender.value ()". [19659003] Notre application ressemble maintenant à ceci:

Exemple de vue

Nous avons toujours le texte et le bouton "salut, monde", mais maintenant nous voyons aussi la nouvelle ligne de paroles et une liste déroulante. Si nous cliquons sur la liste déroulante, nous obtenons les deux choix: "Mick" ou "Joe et Joe".

Exemple de vue

Si nous sélectionnons 'Mick', nous voyons les paroles en anglais chantées par Mick Jones, ce qui est notre point de départ. Si nous sélectionnons "Joe et Joe" nous obtenons la ligne en espagnol telle que chantée par Joe Strummer et Joe Ely.

Exemple de vue

Prochaines étapes

Maintenant que vous avez vu à quel point il est facile de Commencez avec Vue, et ensuite?

Il y a une variété de directions que vous pouvez prendre après ce petit exemple. Mais ici vous avez un exemple de travail réel avec interactivité et un composant Kendo UI tous connectés. Si vous n'avez jamais joué avec Vue auparavant, cela va au-delà des exemples basiques de "salut, monde" qui existent dans un but précis - en vous assurant que vous avez les bases nécessaires pour tout configurer et travailler. Il n'est jamais très utile de commencer par un exemple complexe, car lorsque cela ne fonctionne pas, vous n'avez généralement aucune idée de pourquoi, et c'est pourquoi les exemples de «bonjour, monde» sont si populaires.

En allant plus loin, voici quelques liens qui pourraient vous être utiles:

Sites de formation

Articles de blog associés

Codage heureux

Le code complet du dernier exemple peut être trouvé ] sur GitHub

Les commentaires sont désactivés en mode d'aperçu.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link

Revenir vers le haut