French Subtitles for Vue.js 2 Quickstart Tutorial 2017



Subtitles / Closed Captions - French

Salut mon nom est <font color="#E5E5E5">Dustin de codage de la </font>

smart calme chemin et aujourd'hui dans cette <font color="#CCCCCC">vidéo </font> Je voudrais <font color="#CCCCCC">vous </font><font color="#E5E5E5">donner </font><font color="#CCCCCC">un court </font> introduction dans la vue JS2 <font color="#E5E5E5">frontal </font> cadre et la vue est très nouveau cadre qui gagne beaucoup de traction au moment et dans cette introduction

Je vais vous guider à travers les premières étapes vous devez <font color="#CCCCCC">savoir pour commencer avec un </font> cadre et de lancer un projet de virus restez à l' écoute <font color="#CCCCCC">bien d' abord il est toujours </font> bonne idée de jeter <font color="#E5E5E5">un oeil sur le projet </font> site Web et <font color="#CCCCCC">le site Web de la vue peuvent être </font>

trouvé à UJS sombre et <font color="#CCCCCC">vous pouvez le voir </font> ici, donc ce qui est exactement vue bras vu comme progressive vous avez un cadre de script qui met l'accent sur la construction d'interfaces utilisateur donc il ne fonctionne que dans <font color="#E5E5E5">la couche de vue </font> votre application et il ne fait pas

hypothèses de middleware et de <font color="#CCCCCC">retour et </font> technologies que vous utilisez donc en fait vous pouvez travailler ensemble avec tous les <font color="#E5E5E5">retour commun et des technologies qui sont </font> disponible <font color="#CCCCCC">pour le développement web au </font> moment et peut être facilement intégré dans

vos <font color="#E5E5E5">projets existants de cours et </font> qui le rend <font color="#E5E5E5">très facile à intégrer </font> vue dans vos projets existants une autre principal avantage d'une vue Jas est que est <font color="#E5E5E5">très performant comme vous pouvez le lire </font> ici il est seulement 17 kilo-octets et la taille et

cela signifie que la bibliothèque de base et en ce que rend votre application ultra-rapide si les frais généraux que vous ajoutez en incluant vue <font color="#CCCCCC">chaises </font><font color="#E5E5E5">dans votre projet est très </font> petit et qui fait en sorte <font color="#CCCCCC">que votre </font> l' application est <font color="#CCCCCC">correct si </font><font color="#E5E5E5">vous performant </font>

souhaitez <font color="#CCCCCC">intégrer Affichons de Draya dans votre </font> projet , il existe <font color="#E5E5E5">différentes façons de </font> Faire donc cliquons ici sur le guide pour obtenir un aperçu des <font color="#E5E5E5">différentes options et </font> <font color="#E5E5E5">vous pouvez cliquer sur l' installation ici </font>

le menu latéral gauche et ici vous pouvez <font color="#CCCCCC">voir </font> il <font color="#CCCCCC">existe différentes options </font><font color="#E5E5E5">afin de </font> <font color="#E5E5E5">exemple , vous pouvez l' inclure directement </font> en utilisant une balise de script dans <font color="#CCCCCC">votre page HTML </font> qui est <font color="#E5E5E5">essentiellement tout ce qui </font><font color="#CCCCCC">est nécessaire </font><font color="#E5E5E5">pour </font> <font color="#CCCCCC">aller </font><font color="#E5E5E5">avec vue et vous pouvez </font>

l' intégrer <font color="#E5E5E5">directement à l'aide d' un script </font> étiqueter et utiliser la ressource à partir d'un contenu réseau de distribution par exemple, il fonctionne paquets un de la livraison de contenu ce qui rend les réseaux <font color="#CCCCCC">de Weibull spectateur j / s </font> et c'est <font color="#CCCCCC">l'option la plus facile une autre </font>

option est <font color="#CCCCCC">d'utiliser le </font><font color="#E5E5E5">gestionnaire de paquets de NPM </font> Installer <font color="#CCCCCC">vue par ou en tapant simplement </font> <font color="#E5E5E5">NPM installation est d' avis que ce téléchargement </font> la bibliothèque et l' ajouter <font color="#E5E5E5">aux notes </font> modules dossier de votre projet et il est une <font color="#CCCCCC">autre version et qui est </font><font color="#E5E5E5">l'autre </font>

version qui sera que nous serons en utilisant dans cette vidéo <font color="#CCCCCC">et c'est une vue </font> <font color="#CCCCCC">Jas CLI est une interface de ligne de commande et </font> avec une interface de ligne de commande vous obtenir un autre commandant qui est la commande d'affichage et en utilisant cette commande

vous pouvez lancer un nouveau projet qui est basé sur un modèle et est déjà y compris la bibliothèque de vue afin de ne pas <font color="#CCCCCC">besoin </font><font color="#E5E5E5">de le télécharger dans une étape séparée </font> <font color="#E5E5E5">ok donc nous allons passer à </font><font color="#CCCCCC">la ligne de commande </font> et commencer à installer la commande vue

interface de ligne afin que nous puissions l' <font color="#CCCCCC">utiliser pour </font> <font color="#E5E5E5">lancer notre premier projet et de le faire </font> nous devons <font color="#E5E5E5">dire NPM installer et je le fais </font> comme G moins d'utilisateur root parce que nous voulons <font color="#CCCCCC">Installer la vue d' une commande en ligne </font> interface comme une commande globale nous avons donc besoin

pour donner cette option g pour global et le <font color="#CCCCCC">nom du package est </font> vue tableau de bord sur CL de telle sorte que j'exécute la commande et l'installation <font color="#E5E5E5">prend un </font> deuxième ok ici, nous sommes vous pouvez voir la l'installation est terminée

avec succès et maintenant <font color="#CCCCCC">la nouvelle vue </font> commande est disponible, vous pouvez le voir ici il a différentes options et pour générer un nouveau projet , nous <font color="#E5E5E5">utilisons la </font> première option ici l'adoption et nous en le faire de <font color="#E5E5E5">la manière suivante sauvons </font>

vous dans ce pack web parce que <font color="#E5E5E5">nous voulons </font> obtenir le modèle de projet qui utilise le bloc de bande de chargeur de module et Bundler puis au <font color="#E5E5E5">dernier paramètre </font> donner le nom du projet et nous simplement <font color="#E5E5E5">appeler app voir 01 et maintenant il est </font>

le lancement du projet , vous pouvez le <font color="#E5E5E5">voir est </font> télécharger le modèle et il est demander d' abord nous avons besoin de quelques questions <font color="#CCCCCC">à </font> donner un <font color="#E5E5E5">nom de projet ici et nous pouvons </font> <font color="#E5E5E5">laisser à la vue par défaut ici app </font><font color="#CCCCCC">01 </font> une description du projet, bien que si le

par défaut ici l'auteur et maintenant il est demander comment la vue construit devrait être fait nous <font color="#E5E5E5">choisissons un moteur d' exécution et compilons </font> c'est une méthode recommandée pour les années Linda fonction pour le <font color="#CCCCCC">moment , je dis </font><font color="#E5E5E5">non et </font> ici concernant la configuration de test était karma

et bien que pas mugger et de bout en bout essais n'a pas été regarder à nouveau pas si c'est tout ce qui est nécessaire maintenant un nouveau projet dossier a été créé l' application de vue <font color="#E5E5E5">et une </font> vous <font color="#CCCCCC">pouvez voir ici l'étape suivante consiste à </font> changer dans ce dossier, puis

terminer l'installation en installant toute la fin <font color="#CCCCCC">em paquets nécessaires pour notre </font><font color="#E5E5E5">projet en </font> en utilisant la <font color="#E5E5E5">commande NPM installer si bien </font> Faisons-le passer en ce nouveau projet répertoire, puis exécuter <font color="#E5E5E5">NPM installer </font>

dans ce répertoire et maintenant il est aller chercher télécharger tous les paquets définis dans le fichier JSON dot paquet qui était <font color="#E5E5E5">ajouté au </font><font color="#CCCCCC">projet que le fichier est </font> contenant toutes les dépendances et il est télécharger toutes <font color="#CCCCCC">les dépendances et </font>

l'installation des modules de noeud dans la modules de noeud dossier du <font color="#CCCCCC">projet </font><font color="#E5E5E5">et </font> cela <font color="#E5E5E5">prend à nouveau une seconde </font><font color="#CCCCCC">pour terminer </font> <font color="#E5E5E5">Très bien , nous </font><font color="#CCCCCC">sommes </font><font color="#E5E5E5">ici , </font><font color="#CCCCCC">il est terminé et maintenant </font> nous pouvons faire un premier test et nous pouvons commencer sur le serveur web le développement web

serveur pour exécuter le projet et <font color="#CCCCCC">qui est </font> encore une fois fait en utilisant <font color="#E5E5E5">la </font><font color="#CCCCCC">commande et NPM </font> disons que la gestion NPM def ici <font color="#E5E5E5">ok vous pouvez </font> voir le navigateur est automatiquement ouvert et son chargement sur le <font color="#CCCCCC">projet ici à </font> port hôte local 8080 et vous pouvez voir la

<font color="#CCCCCC">application qui a été initialisé en vue </font> commande est déjà en cours d'exécution et de montrer cette sortie ici <font color="#E5E5E5">dans le navigateur et si </font><font color="#CCCCCC">je </font> revenir au terminal que vous pouvez <font color="#CCCCCC">voir </font> il est dit d'accord, il a été compilé avec succès et maintenant ce que le serveur est

écouter localhost 8080 et il est un en direct serveur reload donc si nous sommes met actuellement en œuvre des modifications du <font color="#CCCCCC">site </font> <font color="#E5E5E5">est le chargement automatique sans </font> étapes manuelles regarder pourquoi ne pas d' <font color="#E5E5E5">accord si nous allons </font> garder notre projet en cours d' exécution ici <font color="#E5E5E5">et j'ai </font>

<font color="#E5E5E5">ouvrir un autre onglet ici à la commande </font> ligne et je suis dans le même projet répertoire ici et maintenant nous allons commencer mon éditeur de code et <font color="#E5E5E5">que Adam </font> afin que nous puissions jeter un <font color="#E5E5E5">oeil à la </font> la structure initiale du projet <font color="#CCCCCC">est d' accord ici </font>

si nous fermons et voir ce qui est à l' <font color="#E5E5E5">intérieur </font> de notre dossier de projet et ici vous <font color="#E5E5E5">peut </font><font color="#CCCCCC">voir que nous avons différents fichiers inclus </font> ici vous pouvez voir le fichier package.json qui est <font color="#CCCCCC">le feu bien aucune dépendance </font> répertoriés et <font color="#E5E5E5">avant nous nous sommes assurés </font>

que les dépendances ont été téléchargé <font color="#E5E5E5">et installé dans </font><font color="#CCCCCC">le noeud </font> modules dossier en exécutant le <font color="#CCCCCC">npm en </font> commande de style dans le dossier du projet et puis <font color="#E5E5E5">le fichier suivant qui </font><font color="#CCCCCC">est important est </font> le fichier index.html , car dans <font color="#E5E5E5">ce fichier </font>

<font color="#E5E5E5">vous trouverez le point de départ de la </font> l' application et <font color="#E5E5E5">vous pouvez le voir est une plaine </font> fichier HTML simple ha et dans le corps <font color="#CCCCCC">section de ce fichier HTML d' une section diff </font> est inclus et en <font color="#E5E5E5">ce qu'un bras de déviation </font> a un attribut ici l'attribut ID

et l'attribut ID ID est attribué, une chaîne dans notre cas <font color="#E5E5E5">qui est la chaîne d'application </font> et <font color="#CCCCCC">maux z bras l'espace réservé de sorte que </font> le cadre de vue sait où insérer le contenu qui <font color="#CCCCCC">est généré par le </font> application vue ok cou ouvert du côté let

le dossier source, car ce qui est un place dans notre structure de projet où le vue de l' <font color="#CCCCCC">application jes est mis en œuvre et </font> nous allons ouvrir dans ce dossier le fichier principaux <font color="#CCCCCC">Jas de points et c'est l'endroit où </font> <font color="#CCCCCC">l'application de visualisation est initialisé </font>

<font color="#E5E5E5">et vous pouvez voir ici , nous importons </font> deux choses ici nous devons d'abord <font color="#E5E5E5">importer </font> une vue de la vue et <font color="#CCCCCC">que </font><font color="#E5E5E5">c'est </font><font color="#CCCCCC">la </font> classe principale de l'application et vous pouvez voir ici il est utilisé <font color="#E5E5E5">pour créer une nouvelle </font> exemple de

cadre et avec une vue nous importent une seconde chose et qui est application à partir du <font color="#CCCCCC">fichier de l' application et qui est un </font> composants que nous mettons en œuvre ici notre projet qui est disponible <font color="#E5E5E5">ici </font> <font color="#E5E5E5">Vue Epcot , nous allons jeter un coup d' oeil dans un côté </font>

<font color="#CCCCCC">de cette mise en œuvre dans une seconde , mais </font> d'abord concentrons-nous sur la partie ici et la nouvelle vue par exemple de cadre est créé en les appelant <font color="#CCCCCC">le constructeur </font> en utilisant le nouveau mot-clé et la constructeur obtient un paramètre et

<font color="#E5E5E5">c'est ici l'objet de cette </font> propriétés de reconfiguration et le premier <font color="#E5E5E5">propriété ici vous pouvez voir ce qu'on appelle </font><font color="#CCCCCC">al </font> <font color="#E5E5E5">pour l' élément et qui </font><font color="#CCCCCC">est attribué , la </font> chaîne ici et qui dit ou principalement une définition de ce que la sortie <font color="#CCCCCC">de l'affichage </font>

<font color="#CCCCCC">doit être inséré application dans le </font> élément qui <font color="#CCCCCC">est l'application ID et nous avons vu </font> avant dans le fichier index.html nous attribué à l'application de chaîne à <font color="#CCCCCC">z rd propriété </font> et maintenant nous connectons notre avis l'application à cet élément de sorte que le div

sortie qui <font color="#CCCCCC">est généré le code HTML </font> sortie qui est <font color="#E5E5E5">générée </font><font color="#CCCCCC">par notre point de vue </font> l'application remplace cette div élément dans notre fichier HTML d'index afin voici le modèle de notre application et que le modèle <font color="#CCCCCC">E est très simple </font>

parce qu'il est seulement <font color="#E5E5E5">un élément contenant </font> et <font color="#CCCCCC">qui est l'élément Z AB qui est </font> faisant référence au <font color="#E5E5E5">composant de l' application et par </font> en utilisant cet élément ici dans notre modèle nous définissons que sur la sortie HTML qui <font color="#CCCCCC">est généré par le composant d'application </font>

doit être placé ici à l' <font color="#E5E5E5">intérieur de notre point de vue </font> modèle de sorte qu'il fait partie de la sortie que notre application génère et vue pour être en mesure d'utiliser sur <font color="#E5E5E5">l'élément d'application </font> ici et y compris la sortie de <font color="#CCCCCC">l'application </font> composant

nous ne <font color="#CCCCCC">devons pas seulement d'importer ici nous </font> <font color="#E5E5E5">doivent également déclarer ici dans le </font> objet que nous attribuons à la composants propriété dans la vue objet de configuration de telle sorte que la vue application sait que nous voulons <font color="#E5E5E5">faire </font>

utilisation de composants d'application au sein de notre modèle <font color="#CCCCCC">ok donc permettre de passer de plus à la </font> la <font color="#CCCCCC">mise en œuvre de la composante de l' application et </font> la mise en œuvre est disponible en application crapaud vue ici si vous <font color="#CCCCCC">pouvez voir nos jeux </font> de la <font color="#CCCCCC">fin de la mise en œuvre complète dans </font>

chaque point de vue <font color="#E5E5E5">J en tant que composant de fichier unique </font> mises en œuvre sous forme de fichier est divisé en trois sections sur le dessus , vous pouvez <font color="#CCCCCC">voir ici </font> est <font color="#E5E5E5">la section de modèle de l'application </font> composant alors nous avons une section de script ici et <font color="#E5E5E5">enfin nous avons ici la </font>

<font color="#CCCCCC">section de style contenant le style CSS </font> code <font color="#CCCCCC">pour le modèle de composant et </font> vous pouvez voir qui le rend <font color="#E5E5E5">très facile à </font> garder la vue d'ensemble parce que tout appartenant à un composant est ici dans ce un fichier et donc nous allons d'abord

jetez un oeil <font color="#E5E5E5">à la section de script </font> peut voir ici la section de script est faire un expert par défaut d'un et objet de configuration pour une vue composant et en ce que l'objet de configuration est contenant <font color="#E5E5E5">deux propriétés </font><font color="#CCCCCC">nom attribuant </font>

un nom au composant dans notre cas , <font color="#CCCCCC">il est </font> application et encore une propriété de composants prendre un objet contenant la totalité de la les composants suivants qui sont utilisés ici dans le composant d'application et nous avons un composant inclus <font color="#CCCCCC">ici qui est le </font>

bonjour composant il est répertorié ici parce que si nous prenons un <font color="#CCCCCC">coup d' oeil </font><font color="#E5E5E5">au modèle que vous </font> peut voir le composant bonjour est inclus <font color="#E5E5E5">dans le modèle en utilisant le LM bonjour </font> et ici et maintenant vous pouvez voir <font color="#CCCCCC">la </font> modèle n'est pas si longtemps avec une seule

<font color="#E5E5E5">section diff ici et la section diff </font> se compose de deux <font color="#CCCCCC">éléments d' </font><font color="#E5E5E5">image une </font> Cet élément d'image est compris le logo fichier PNG et la sortie et <font color="#E5E5E5">il est notamment la sortie qui est </font> généré par <font color="#E5E5E5">le composant sous bonjour et </font>

si l' <font color="#CCCCCC">on compare maintenant ce modèle à la </font> sortie qui était un <font color="#CCCCCC">weibull ici dans la </font> navigateur , vous pouvez voir <font color="#E5E5E5">ici </font><font color="#CCCCCC">son </font><font color="#E5E5E5">étiquette </font> c'est le <font color="#E5E5E5">fichier logo et tous les autres </font> sortie qui <font color="#CCCCCC">est générée ici la </font> <font color="#CCCCCC">Mot de bienvenue les ailes essentielles les </font>

liens écosystémiques et ainsi de suite vient <font color="#E5E5E5">le contenu ou la sortie qui </font><font color="#CCCCCC">est </font> produit par le <font color="#E5E5E5">composant Z est bonjour et </font> inclus <font color="#CCCCCC">ici dans le modèle donc nous allons </font> jetez un oeil <font color="#E5E5E5">à la dernière partie de la </font> structure du projet initial et c'est la

la mise en œuvre de la composante bonjour la mise en œuvre en <font color="#CCCCCC">tant que weibull ici </font> les composants du sous-dossier et fichier bonjour vue point et / ou ouvrir ce fichier et ici vous pouvez <font color="#CCCCCC">voir à nouveau , nous avons le modèle </font> section disponible, nous avons l'équipage

<font color="#CCCCCC">/ </font><font color="#E5E5E5">Section </font><font color="#CCCCCC">de script </font><font color="#E5E5E5">et enfin utiliser </font><font color="#CCCCCC">la </font> section Style et que vous pouvez voir si nous commencer par jeter un oeil à le script section à nouveau une exportation par défaut est faite définissant une configuration composant objet le nom dans ce cas est bonjour

parce que nous définissons l'enfer composant, puis il <font color="#CCCCCC">y a quelque chose </font> <font color="#E5E5E5">nouveau , il est une fonction de données renvoyant un </font> objet avec une propriété inclus et c'est un Z msg signifie un <font color="#E5E5E5">message </font> la propriété et msg est attribué, la

chaîne de bienvenue et vous pouvez le voir est bienvenue <font color="#E5E5E5">à votre vue </font> rails app qui est exactement <font color="#CCCCCC">la chaîne </font> qui est ici <font color="#CCCCCC">comme émis titre </font> sous le fichier logo et maintenant si vous prenez <font color="#E5E5E5">un regard sur le code du modèle qui </font><font color="#CCCCCC">est </font>

défini ici vous pouvez voir sur la propriété msg comme dans le qu'utilisé ici, le modèle h1 élément à l'aide de l'interpolation syntaxe qui nécessite d'utiliser et ouvert fermeture doubles accolades et en utilisant syntaxe Zetas , nous sommes en mesure <font color="#E5E5E5">d'inclure </font>

les propriétés de <font color="#E5E5E5">l'objet qui est </font> retour de la fonction de données de la composant dans notre modèle et c'est la raison pour <font color="#CCCCCC">laquelle le texte </font><font color="#E5E5E5">du</font><font color="#CCCCCC"> msg </font> la propriété est imprimé ici et la reste du modèle que vous pouvez le voir est

A propos de l'impression de ces liens nous ont la section de lien essentiel inclus dans un élément h2, <font color="#E5E5E5">puis comme une liste tous </font> les liens <font color="#E5E5E5">sont imprimés et nous avons </font> l'écosystème ici, il est partie avec Fallings montrant <font color="#CCCCCC">yucks voir routeur </font>

vue chargeur et superbe vue sur la manière <font color="#CCCCCC">prochaine étape , </font><font color="#E5E5E5">je voudrais </font><font color="#CCCCCC">faire quelques </font><font color="#E5E5E5">changements </font> à la mise en œuvre initiale et juste pour <font color="#CCCCCC">vous donner une impression </font><font color="#E5E5E5">de la facilité </font> est <font color="#CCCCCC">d'utiliser le cadre de la vue et de donner </font> <font color="#E5E5E5">vous une petite introduction à certains des </font>

<font color="#CCCCCC">Les directives de vue standard et </font><font color="#E5E5E5">je commence </font> avec <font color="#CCCCCC">les changements en supprimant certains </font> du contenu ici dans le modèle de le composant bonjour et <font color="#E5E5E5">je vais </font> enlever tout ce qui est <font color="#E5E5E5">lié à </font> les deux <font color="#CCCCCC">sections de lien ici , donc nous allons </font>

supprimer cette façon que nous <font color="#E5E5E5">imprimons uniquement </font> le <font color="#CCCCCC">message de bienvenue et vous pouvez voir </font> J'enregistrer le fichier et instantanément <font color="#E5E5E5">se rechargés dans le réseau </font> navigateur sans avoir besoin de moi de <font color="#E5E5E5">faire </font> quoi que ce soit manuellement ici et maintenant nous pouvons aller

sur la mise en œuvre par exemple <font color="#E5E5E5">une liste </font> imprimer et <font color="#E5E5E5">je définir une autre données </font> propriété ici dans <font color="#E5E5E5">l'objet </font><font color="#CCCCCC">qui est </font> renvoyée par <font color="#CCCCCC">les </font><font color="#E5E5E5">données mesurées et je suis </font> nommant ce tableau <font color="#E5E5E5">je voudrais avoir </font> utilisateurs, puis le définir comme un tableau et

dans ce tableau disons que nous avons objets inclus dans <font color="#E5E5E5">ce tableau qui </font> se compose de deux propriétés, nous allons utiliser un première propriété de nom et d'attribuer la première chaîne de nom et un nom de famille <font color="#CCCCCC">bien c'est </font> si nous allons peut-être ajouter deux autres éléments

ici <font color="#E5E5E5">attribuer bien un autre prénom </font> et nom de famille pour <font color="#E5E5E5">le second objet utilisateur </font> et pour l'objet utilisateur cert Utilisons John comme un prénom <font color="#E5E5E5">et peut - être Porter comme </font> un nom de famille maintenant nous <font color="#E5E5E5">avons trois utilisateurs </font> défini ici dans le tableau des utilisateurs et maintenant

nous sommes en mesure <font color="#CCCCCC">d'utiliser ou d'utiliser </font> ce <font color="#E5E5E5">tableau d'utilisateurs avec le contenu </font> à notre modèle et je voudrais imprimer les utilisateurs comme une liste en vertu l'élément h1 Incluons un autre section diff ici et cela devrait être un

Liste non ordonnée et je dis élément de la liste et maintenant je suis en utilisant <font color="#E5E5E5">une vue </font><font color="#CCCCCC">Jas </font> directive standard qui est appelé <font color="#E5E5E5">V </font> moins <font color="#E5E5E5">4 et je le dis est égal à un certain </font> l'utilisateur ressort utilisateurs et en appliquant <font color="#E5E5E5">cette syntaxe ici la vue </font><font color="#CCCCCC">cadre Jas </font>

est l' <font color="#E5E5E5">itération sur ce tableau et </font> comprenant un élément d'élément de liste <font color="#CCCCCC">par </font> objet <font color="#E5E5E5">défini dans notre tableau dans la </font> <font color="#E5E5E5">généré la production et maintenant nous pouvons utiliser la </font> syntaxe d'interpolation une nouvelle fois à <font color="#CCCCCC">imprimer </font> les valeurs de la première impression à l'utilisateur

<font color="#E5E5E5">prénom puis imprimer l'utilisateur </font> <font color="#CCCCCC">ok lastname économisons et vous pouvez </font> voir sur la sortie <font color="#CCCCCC">est générée et </font><font color="#E5E5E5">I et </font> revenir les noms des utilisateurs <font color="#CCCCCC">bien </font> donc la prochaine chose que je voudrais <font color="#CCCCCC">inclure est </font> élément d'entrée et utiliser les données dans les deux sens

la liaison à synchroniser la valeur de l'entrée élément qui <font color="#CCCCCC">est une propriété qui </font> défini dans notre modèle de données <font color="#E5E5E5">let accord de </font> d' abord définir une nouvelle propriété ici <font color="#CCCCCC">dans la </font> objet de retour de la fonction de données et laissez bien son nom que l'entrée de la propriété et

juste assigner une chaîne vide ici <font color="#E5E5E5">OK </font> et dans notre modèle ici sous la section diff de la liste des utilisateurs que <font color="#E5E5E5">je suis </font> définir une autre section de comparaison et à l'intérieur cette section diff je suis comprenant un élément d'entrée et nous allons utiliser

le <font color="#E5E5E5">texte du temps et on n'a pas besoin nom et </font> je suis ici apprécie au lieu d'utiliser un autre <font color="#E5E5E5">j vue comme directive standard qui est </font> <font color="#CCCCCC">modèle appelé V Model Voir le tableau de bord et </font><font color="#E5E5E5">je suis </font> l' attribution de la <font color="#CCCCCC">barre d'entrée de chaîne qui </font> correspond <font color="#CCCCCC">au nom de notre propriété </font>

nous avons défini ici et <font color="#E5E5E5">laisser de la production sur </font> cette propriété ici sous l'entrée élément et disons ou disons notre Spawn et je suis en utilisant le <font color="#E5E5E5">texte du tableau de bord de v </font> directive et encore une fois <font color="#CCCCCC">je suis entrée assignant </font> Val <font color="#CCCCCC">laissez donc bien de voir ici est notre entrée </font>

élément et maintenant je peux commencer à <font color="#E5E5E5">taper </font> quelque chose dans le <font color="#E5E5E5">développement et vous </font> peut voir ici que la sortie est de notre élément durée qui <font color="#CCCCCC">est liée à l'entrée </font> élément bien en utilisant le <font color="#CCCCCC">texte v moins </font> directive , la <font color="#E5E5E5">sortie de l'entrée ici z </font>

est directement réfléchie ici en tant que sortie sur la <font color="#CCCCCC">même page </font><font color="#E5E5E5">bien la dernière chose que je ferais </font> vous <font color="#CCCCCC">démontrer comment vous pouvez utiliser </font> sur les événements avec vue sur les essais de médicaments et va inclure une autre section diff ici , donc le cas d'utilisation , <font color="#E5E5E5">je voudrais </font>

la mise en œuvre est très <font color="#CCCCCC">simple il suffit de nous laisser </font> <font color="#E5E5E5">mettre en œuvre un bouton </font> va incrémenter un compteur d'une chaque fois que l'utilisateur <font color="#E5E5E5">clique sur le bouton </font> donc nous allons définir d'abord les données du compteur propriété ici dans nos données objet que <font color="#E5E5E5">je suis </font>

va appeler un compteur et le mettre d'abord à 20 et dans ce nouveau détection je mettre en œuvre un bouton <font color="#CCCCCC">et </font> ce bouton devrait inclure et beauteous gestionnaire d'événements et je suis sur la directive <font color="#E5E5E5">tiret v sur </font><font color="#CCCCCC">le </font><font color="#E5E5E5">suivi </font>

événement <font color="#CCCCCC">je voudrais </font><font color="#E5E5E5">répondre et </font> qui est un événement de clic et chaque fois que <font color="#CCCCCC">la </font> l' utilisateur clique <font color="#E5E5E5">sur le bouton du compteur </font> la propriété doit être incrémenté donc je suis en utilisant <font color="#E5E5E5">plus plus ici et le contenu de </font> le bouton que pour tenir compte de la <font color="#CCCCCC">valeur de </font>

le compteur donc <font color="#CCCCCC">je suis un peu , y compris </font> peu d'informations texte ici vous avez cliqué sur ce bouton et maintenant je vais <font color="#CCCCCC">utiliser à nouveau la syntaxe d'interpolation pour </font> inclure la valeur du compteur <font color="#E5E5E5">x </font><font color="#CCCCCC">ok </font> sauvons et voir comment <font color="#CCCCCC">la sortie </font>

ressemble à ceci est maintenant ici un bouton <font color="#E5E5E5">et je </font> pouvez <font color="#E5E5E5">cliquer sur le bouton et chaque fois que je </font> clic vous <font color="#CCCCCC">pouvez voir est la valeur du compteur </font> qui est imprimé sur le bouton ici est incrémenté d'une cette était le même <font color="#E5E5E5">de codage de la façon intelligente </font><font color="#CCCCCC">calme si vous </font>

comme mes vidéos ne pas <font color="#CCCCCC">oublier s'il vous plaît à </font> <font color="#E5E5E5">vous voyez abonner à ma chaîne dans la </font> bye prochain vidéo toi



Video Description

#1 Online Course: Vue JS 2 - The Complete Guide (http://codingthesmartway.com/courses/vuejs2-complete-guide/)

Vue.js 2 Quickstart Tutorial 2017

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In this video tutorial you'll learn how to get started with Vue.js!

This is a CodingTheSmartWay.com tutorial

---------------------
Check out our ebooks on Leanpub.com:

* Angular 2 - A Practical Introduction to the new Web Development Platform
https://leanpub.com/angular2-book

* Ionic 2 - A Practical Introduction To Hybrid Mobile Apps Development
https://leanpub.com/ionic2-book
---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl)