Présentation de Vue et Weex pour les applications mobiles natives

Vue est un framework JavaScript populaire pour les applications Web avec une liaison facile entre les données en mémoire et l'interface utilisateur. Maintenant, Weex nous permet de coder des applications mobiles natives à l'aide du framework Vue!

Pourquoi utilisons-nous Vue et d'autres frameworks de liaison de données comme Angular et React? Qu'est-ce qu'ils ont de si spécial? Nous les utilisons pour nous assurer que les données d'application stockées en mémoire restent synchronisées avec l'interface utilisateur et inversement.. 

Nous utilisons également ces frameworks pour nous permettre de construire des applications très rapidement et de manière optimisée pour la performance..

Dans ce tutoriel, je vais vous montrer comment utiliser le framework Vue, en particulier comment comprendre ses concepts de liaison de données et de modèles. Ensuite, je présenterai la plate-forme Weex, qui permet de coder des applications mobiles natives à l’aide de Vue!

Liaison de données

Regardons un exemple simple pour comprendre comment ces frameworks peuvent réellement nous faire gagner du temps. Ce que nous voulons, c'est un simple champ de saisie qui reste synchronisé avec les données de notre application. Notre application elle-même peut modifier les données par programmation, et l'utilisateur peut les modifier via une entrée utilisateur. Nous devons donc surveiller l'interface utilisateur et les données de l'application..

L'écriture de code qui prendrait en charge cette liaison de données serait prolixe. Nous aurions besoin de créer des écouteurs d'événements, des objets proxy et des observables pour capturer les modifications éventuelles des données de l'application. Et ces complexités ne font que croître à mesure que de plus en plus de types de données et d’intrants sont ajoutés. Vue et d'autres frameworks de liaison de données nous évitent d'avoir à écrire tout ce code de liaison. 

Avec Vue, si notre utilisateur modifie certaines données d’entrée, il sera synchronisé avec les données de l’application de la manière suivante:

Ou si l'application modifie les données, elle mettra à jour l'interface utilisateur comme suit:

Lorsque nous maintenons la synchronisation de l'interface utilisateur et des données de l'application, cela signifie que notre application fait exactement ce que nous attendons de lui. Vue gèrera tout cela et permettra d'autres processus de liaison de données puissants.

Mise en place

Maintenant que nous savons pourquoi nous utilisons ces frameworks, mettons en place une application Vue simple pour exécuter quelques exemples. Créez un nouveau fichier HTML n'importe où sur votre ordinateur et collez-y le code suivant:

Ceci est un simple fichier HTML qui relie à la bibliothèque Vue JS. Il contient un div élément avec l'ID de app. Dans les balises de script, nous avons une variable appelée app que nous utilisons pour indiquer notre point de vue, je vais expliquer cette partie plus tard.

Ensuite, nous créons une nouvelle instance Vue, ou "vue". Ce constructeur indique au framework quel élément doit contenir notre interface utilisateur d'application et le maintenir synchronisé avec les données de l'application. 

Maintenant, double-cliquez sur le fichier HTML pour l'ouvrir dans le navigateur et ouvrez la fenêtre de la console du navigateur..

Interpolation de texte

L'interpolation de texte nous permet d'intégrer des expressions dans notre code HTML qui seront interprétées lors du rendu de la page. Les expressions sont actives. Par conséquent, si les données dont elles dépendent sont modifiées, la page sera mise à jour en temps réel. Ceci est connu sous le nom de rendu déclaratif, ce qui nous permet de placer des expressions n'importe où dans le contenu d'un élément. Passons en revue avec un exemple simple.

JS

Notre code JavaScript contient maintenant un Les données objet qui stockera toutes nos données d'application pour cette vue. En son sein, j'ai créé le message propriété avec la chaîne "Bonjour le monde". 

Ensuite, affichons cette propriété dans le code HTML.

HTML

 
 message message.split ("). reverse (). join (") 
 

Les expressions sont indiquées avec la syntaxe des doubles accolades. Vue JS gère les dépendances de chaque expression et met à jour la page en direct si elles changent. Dans notre cas, nous avons deux expressions, avec le message propriété en tant que dépendance de chacun. La première expression message  affiche simplement la propriété du message. La deuxième message.split ("). reverse (). join (") expression prend la propriété message, puis:

• Divise la chaîne en un tableau:
  [ "Bonjour le monde" ]
• Inverse l’ordre du tableau:
  ["d", "l", "r", "o", "w", "", "o", "l", "l", "e", "h"]
• Rejoint le tableau ensemble pour obtenir "dlrow olleh", qui est le même message mais imprimé à l'envers.

Maintenant, ouvrez le navigateur et actualisez la page HTML. Puis ouvrez la fenêtre de la console du navigateur et assignez app.message une nouvelle valeur et voir comment la sortie est mise à jour dans le navigateur.

Vous pouvez également utiliser les expressions mathématiques dans les expressions de modèle ou les données structurées dans des objets. En fait, comme vous l’auriez peut-être deviné, les expressions Vue ne sont que JavaScript. L'accès aux variables globales est en mode bac à sable, donc vous pouvez y accéder. Math, mais non la fenêtre. Cela permet de protéger vos applications et vos utilisateurs.. 

En utilisant Vue avec seulement quelques lignes de code, nous pouvons avoir une liaison de données bidirectionnelle avancée. Cela garantit que l'interface utilisateur et les données de l'application sont synchronisées avec une relative facilité. 

Les directives

Les directives sont un autre moyen de lier les données de notre point de vue. Nous pouvons les utiliser pour lier des données d'application à des attributs, des événements, des champs de saisie et des données répétables. Passons en revue chaque directive et découvrons son fonctionnement.

• v-bind: lier une valeur d'attribut
• modèle v: lier les données d'application à un élément d'entrée tel qu'un zone de texte
• v-on: définir un gestionnaire d'événement
• v-pour: lier à un tableau ou un objet

v-bind Directif

le v-bind directive est utilisée pour la liaison de données d'attribut. Cela nous permet de lier les données d'application à la valeur d'un attribut. Pensez-y comme à une interpolation de texte mais dans un attribut. Vous pouvez lier classe, identifiant, valeur ou tout autre attribut avec le v-bind directif. 

Pour cet exemple, je voudrais lier nos données d’application à la data-attr attribuer en utilisant le v-bind directif v-bind: data-attr.

JS

HTML

 
  type d'objet  
 
 object.names 
 
 numéro * 20/2 
 
 [object.type, object.names, number * 20/2] 
 

Dans l'exemple ci-dessus, nous avons lié un attribut appelé data-attr à une série de différentes sources de données. Tout d'abord, nous l'avons lié au type et des noms propriétés de objet. Ensuite, nous l'avons lié à une expression mathématique, puis nous avons réuni toutes les liaisons en un seul attribut de tableau..

Regardez le résultat dans le navigateur: vous pouvez cliquer sur le bouton Éléments onglet pour voir la sortie de la valeur de chaque attribut.

Encore une fois, vous pouvez modifier les données de l'application dans la console pour afficher le processus de liaison des données..

Pensez au v-bind directive comme permettant des expressions dans les valeurs d'attribut. C'est incroyablement puissant et facile à établir avec la bibliothèque Vue.

modèle v Directif

Cette directive est utilisée spécifiquement pour maintenir les données d'application synchronisées avec les champs de saisie, les zones de texte et les éléments de sélection. Voici un exemple:

JS

HTML

   
  Sélectionnez un nom Jack John Mike  Sélectionné: selected 
  Jack  John  Mike  Jack John Mike  
 Noms sélectionnés: checkNames 

Pour la première section de cette page, nous avons un champ de saisie de texte et une zone de texte, qui ont tous les deux modèle v directive qui maintient ces champs d'entrée en synchronisation avec le message propriété, en utilisant v-model = "message". De cette façon, si vous modifiez l'un des modèles, le modèle sera mis à jour, puis l'autre champ de saisie sera mis à jour. allez-y et essayez le!

Dans la section suivante, nous avons un menu déroulant synchronisé avec le choisi propriété avec  v-model = "sélectionné". De cette façon, si la sélection est modifiée, notre modèle sera mis à jour.

Enfin, nous avons une sélection multiple. J'ai montré comment procéder de deux manières: avec plusieurs cases à cocher et avec une entrée de sélection multiple. Comme nous pouvons avoir plusieurs valeurs, j'ai créé le checkNames tableau pouvant stocker plusieurs valeurs. La sélection multiple et les cases à cocher ont chacune une modèle v directive ciblant les checkNames propriété. Essayez, et ils devraient rester synchronisés au fur et à mesure de vos sélections..

le v-on Directif

Cette directive nous permet d'attacher des événements aux éléments HTML. Cette directive peut être utilisée sur certains éléments auxquels des événements d'entrée peuvent être associés, tels que le survol, les clics, la saisie de texte, les pressions sur les touches, etc. Pour cet exemple, nous allons créer un simple bouton avec un événement click.

JS

HTML

 Cliquez moi! clicked 

dans le v-on directive, après les deux points, nous spécifions l'événement que nous voulons attacher. Dans cet exemple, lorsque le Cliquez sur événement est déclenché, nous allons courir quelques expressions. Tout d'abord, nous ouvrons une boîte de dialogue d'alerte, puis nous changeons la valeur du cliqué propriété. Notez que vous pouvez appeler des fonctions dans v-on expressions.

v-pour Directif

Cette directive est l'une des plus puissantes de toutes. Nous pouvons surveiller tous les objets et les tableaux pour détecter les modifications et restituer à plusieurs reprises une partie de notre code de modèle pour chaque propriété ou élément trouvé dans cet objet ou ce tableau. Par exemple, pour rendre un tableau de noms sous forme de liste:

JS

HTML

 
 
 prénom 
 
 

Dans cet exemple, nous attachons d’abord le v-pour directive sur l'élément que vous souhaitez répéter. La valeur de la directive spécifie l’objet ou le tableau sur lequel on souhaite effectuer une itération (des noms) ainsi qu'une variable qui contiendra la valeur pour chaque itération (prénom). Maintenant, dans cet élément répété, nous pouvons utiliser le prénom variable dans les expressions.

Si on modifie ensuite le tableau, par exemple avec une méthode comme pousser, Trier ou sens inverse, les données du modèle seront automatiquement mises à jour. Essayez d'exécuter l'exemple et de modifier le tableau dans la fenêtre de la console..

Composants

Le processus de liaison de données se déroule dans des vues. Les composants ne sont que des vues réutilisables que nous pouvons répéter tout au long de notre application. Chaque composant doit avoir certaines données de modèle à restituer dans le cadre de l'interface utilisateur et certaines données d'application. Vous pouvez éventuellement inclure un style si vous voulez.

Utilisons le v-pour directive à nouveau pour afficher les éléments de la liste. Mais cette fois, nous allons faire de chaque élément un composant. Nous allons donner un nom à ce composant afin de pouvoir le cibler dans notre code de modèle: élément de liste. Les composants peuvent également avoir des "propriétés enregistrées", auxquelles nous pouvons affecter une valeur à affecter lors de la création du composant. Dans mon cas, le élément de liste composant s'attendra à recevoir une valeur pour la prénom propriété, définie avec accessoires: ["nom"]. 

Créons maintenant ce composant. Veuillez ajouter le code suivant dans vos balises de script:

JS

Vue.component ('list-item', template: '
 prénom 
', props: ["name"]);

Assurez-vous également que vous disposez des données d'application suivantes:

var app = new Vue (el: '#app', données: noms: ["Lawrence", "John", "Mike", "Justin"]);

HTML

Ici vous pouvez voir le élément de liste composant sera répété pour chaque nom trouvé dans le tableau. Chaque nom sera attribué à la variable de nom qui est définie dans le v-pour directif. Nous passons le prénom propriété du composant en utilisant v-bind.

Chaque instance est juste une copie du composant. Nous pouvons modifier chaque copie ou instance indépendamment les uns des autres. Pensez donc aux composants en tant que modèle et aux instances en tant que copies réalisées à partir du modèle. Voici le résultat final:

Compilation et la vue CLI

Nous avons travaillé avec un fichier HTML très simple et avons laissé Vue tout interpréter au moment de l'exécution. Cependant, Vue est fourni avec un outil de ligne de commande. Vous vous demandez peut-être pourquoi. Une des raisons est que les modèles de page précompilés sont plus performants que les modèles que Vue interprète au moment de l'exécution. Une autre raison est que, si nous devions créer une application à grande échelle et essayer de l’intégrer dans un seul fichier HTML, elle deviendrait rapidement ingérable.. 

Nous avons donc besoin de modularité pour décomposer une application volumineuse en morceaux plus petits.. 

Installation de la vue CLI

Pour utiliser la ligne de commande, vous devez ouvrir la fenêtre de la console correspondant à votre système d'exploitation..

• Pour Mac, appuyez sur Command-Space puis tapez Terminal et frapper Revenir.
• Pour Windows, recherchez l'invite de commande dans le menu de démarrage, assurez-vous de cliquer avec le bouton droit de la souris et "ouvert en tant qu'administrateur ".
• Pour Linux, appuyez sur Contrôle-Alt-T.

Avant de continuer, assurez-vous que la dernière version de Node.js est installée. Ensuite, nous devons installer Webpack, qui compressera la taille du fichier de notre projet, le rendant plus rapide dans notre navigateur. Ensuite, nous pouvons installer le CLI Vue et exécuter les commandes appropriées pour votre plate-forme:

Mac et Linux

• sudo npm install -g webpack
• sudo npm installer -g vue-cli

Windows (assurez-vous d'exécuter la console en tant qu'administrateur)

• npm install -g webpack
• npm installer -g vue-cli

C'est tout! Nous sommes maintenant prêts à commencer à configurer notre projet Webpack avancé. Tout d'abord, accédez au répertoire dans lequel nous voulons créer notre projet, dans mon cas, le bureau, puis créez le projet. Vous pouvez remplacer myapp avec n'importe quel nom de projet que vous souhaitez.

• web init vue myapp
  

Vous serez guidé à travers une série de questions sur votre projet, vous invitant à saisir des données telles que le titre et la description, et vous demandant si vous souhaitez installer des plug-ins tiers. Pour cet exemple, vous pouvez répondre non à tous les extras facultatifs. Une fois qu'il est créé, nous devons installer les dépendances. Naviguez jusqu'au répertoire du projet et exécutez la commande install..

• CD myapp
• npm installer

Laissez NPM installer tous les packages de dépendance, puis nous sommes prêts à continuer.. 

Créer un projet Vue

Une fois les packages installés, vous pouvez ensuite exécuter le serveur de développement en tapant npm run dev. La fenêtre de votre navigateur devrait s'ouvrir et afficher la page suivante..

Nous ne passerons pas par la structure de l'ensemble du projet, mais lorsque vous ouvrez le myapp répertoire, vous verrez le src annuaire. Il contient un App.vue déposer un main.js fichier et, dans le Composants répertoire, le Bonjour.vue fichier.

Les fichiers Vue sont des composants. le main.js Le fichier configure la vue initiale et éventuellement d'autres configurations. Jetons un coup d'oeil au App.vue et Bonjour.vue des dossiers.

Vous pouvez voir ici que chaque composant Vue est divisé en trois parties: