Cours accéléré sur Vue JS (2.0)

1. Introduction: Tout le monde. Et bienvenue à la vue Js crash cours. Je suis Stephen, un développeur web indépendant. Et plus important pour toi, je suis professeur. Je suis tellement excité de partager ce cadre JavaScript fantastique avec vous maintenant un peu sur quelques vues Js est ce qui est facturé comme un framework réactif à son cœur. Cela signifie une chose lorsque vous êtes JavaScript, données changent tout le reste qui dépend de ces données changent également, par exemple, d'autres données JavaScript, ou HTML, qui repose sur les données JavaScript. Vous comprendrez bientôt pourquoi c'est si puissant sous peu. Et bien sûr, permettez-moi maintenant de vous donner un exemple du projet de cours. C' est une lampe qui a été modelée complètement dans les vues. Je sais que ce n'est pas trop à regarder, mais nous nous concentrons vraiment sur les fonctionnalités et JavaScript, en particulier dans ce cours. Donc, le HTML et CSS ne sont pas aussi importants dans ce cas, vous pouvez donc voir la lampe s'allume et s'éteint. Modifiez la couleur de la lumière simplement en tapant une couleur dans une boîte de saisie. Condamnez-le aussi, avec une valeur de pourcentage à côté du curseur dim. Puisque je sens qu'il est extrêmement important non seulement d'apprendre des concepts, mais de les mettre en œuvre correctement au fur et à mesure que vous les apprenez. C' est exactement ce que nous allons faire dans ce cours, sera de construire ce modèle d'une lampe comme nous allons à la fin du cours, vous aurez l'ensemble d'outils afin de modéliser votre propre objet du monde réel. Et c'est ce que le cours projette ce que vous allez choisir un objet avec état, par exemple, un feu de circulation, qui a trois états. Il y a un état vert de Biello et une arrestation ou un autre, qui a une tonne d'états différents. Ah, quelques exemples le seraient. Il y a un maître sur et hors état. Il a une lumière, qui a sa propre indépendante sur un état hors tension. Il a une valeur de température ou un état de température. Vous pouvez l'appeler qui peut être contrôlé par des boutons ou un bouton. Je veux que tu sois vraiment créatif avec ça, parce que je sais que tu peux trouver quelque chose de vraiment incroyable et intéressant. Donc, pour ce cours, il serait bénéfique d'avoir une compréhension de base de HTML CSS et surtout, JavaScript comme vue est un framework JavaScript. Ne laissez pas ça vous effrayer, cependant. J' ai rendu chaque concept aussi accessible que possible. Cela dit, je suis tellement impatient de vous aider à comprendre les fondamentaux de vous, mon framework JavaScript préféré. Au plaisir de vous voir dans le cours. 2. Installation et l'instance: bienvenue à tout le monde à la première conférence riel dans la vue Js cours d'artisanat je suis vraiment excité de commencer. Donc nous allons juste y sauter avec l'instance de vue. C' est quelque chose dont chaque application de vue a besoin. Il doit être là-dedans. Ainsi, l'instance elle-même est tenue dans une ancienne variable JavaScript régulière. Rien de fantaisie à ce sujet. Um, application est la façon générale que les gens nomment généralement leur instance de vue, vous n'avez pas à le faire, mais c'est la pratique standard. Cette nouvelle syntaxe de vue ici va créer une nouvelle instance de vous pour nous afin que nous puissions réellement utiliser le framework. s'agit pas d'une syntaxe spécifique à la vue. Au cas où vous ne l'auriez jamais vu auparavant. C' est, je crois qu'il a été introduit en JavaScript es six a. Juste un numéro de version de javascript. Donc, si vous ne l'avez jamais vu auparavant, je veux juste vous faire savoir qu'il n'est pas spécifique à la vue. Je vais souligner la syntaxe qui est spécifique à la vue tout au long du cours juste pour que vous ne soyez pas confus. La seule chose dont chaque instance de vue a besoin est la propriété L. Um, cela pointe en fait la vue sur l'élément HTML que tout notre code de vue latérale HTML sera enveloppé dans Habituellement, ce sera un div. Alors bien, jetons un coup d'oeil à ça. Le HTML Ceci est HTML très basique pour la vue Si vous remarquerez l'application i d égal dans le diff Donc tout doit aller à l'intérieur de ce dur tout notre code de vue. Donc, il correspond à la propriété dentée l de notre point de vue. Instance, si vous voyez ici, je vous ai montré l est l'application de signe numérique C'est un sélecteur CSS. Donc, vous pouvez réellement faire votre avez une classe d'application et faire la période AP comme le L et le JavaScript. Mais là encore, c'est une pratique courante. C' est ce que vous voyez dans la documentation d'affichage. Donc, une fois que vous les avez réellement liés de cette façon, le JavaScript dans le HTML, je devrais dire que vous pouvez commencer à écrire du code spécifique à la vue à l'intérieur de votre HTML, que nous allons obtenir dans la prochaine conférence. Dans cette conférence, je voulais aussi parler du stylo de code, la plate-forme que je vais utiliser pour ce cours. C' est donc un site fantastique pour créer des démos rapides, partager votre code et, ah, la raison pour laquelle je l'utilise. C' est génial pour enseigner. Donc, la vue n'est pas dans le stylo de code automatiquement. Nous devons prendre un moment pour l'inclure. Et je veux juste mentionner ce point de vue. Il n'y a pas des vues magiques ? En fait, juste un vieux fichier JavaScript régulier. Je ne veux pas sous-estimer à quel point c'est complexe et les gens vraiment intelligents qui ont commencé à le créer. Mais gardez à l'esprit que c'est juste JavaScript tout le monde pourrait voir à droite. Bien que personne, vous devez être vraiment intelligent pour le faire. Mais c'est juste un fichier Js normal. C' est ce que je veux traverser. Nous pouvons l'inclure comme n'importe quel autre fichier JavaScript en utilisant un script marqué avec un attribut S R C . Donc, vous verrez que ici juste script, et je l'ai tiré d'un réseau de diffusion de contenu. Il y a aussi une autre façon, deuxième façon de manière spécifique au stylo de code d'inclure des ressources JavaScript externes. Cela fait essentiellement la même chose, mais ça garde notre code un peu plus organisé, donc je vais passer au stylo de code maintenant. C' est à quoi ressemble le stylo Code, et nous allons inclure la vue, donc je vais vraiment la première façon que vous pouvez réellement coller dans cette, euh, cette balise de script que j'ai ici et nous pouvons aller sur la console et taper il retournera quelque chose que vous n'avez pas besoin de vous inquiéter de ce que c'est en fait Juste le fait qu'il a renvoyé quelque chose signifie que la vue a été correctement incluse. Par exemple, si nous prenons ce script, sortons puis tapons en vue, nous allons obtenir une vue n'est pas définie. Donc, si jamais vous voulez vérifier si l'utilisation est correctement incluse, vous pouvez toujours aller à votre type de console pour voir les autres façons. Si vous allez à ce peu causé à côté du script Java la chose Js sur le stylo de code, il va apparaître cette fenêtre ouverte et vous pouvez voir la recherche, CD et Js. Donc, si on tape juste en vue, ça apparaîtra juste ici. Cliquez sur cette Sauvegarde Fermer et bam ! Il est inclus la vue de retaper. On a la même chose. Donc c'est à ce sujet pour cette conférence que je suis impatient de voir dans la prochaine où nous voyons comment et pourquoi la vue est si magique 3. La magie de la vue (données): dans cette conférence, nous allons jeter un coup d'œil sur les raisons pour lesquelles la vue est si puissante et magique. Allons-y. L' une des raisons est vues propriété de données. C' est de ça que nous allons parler dans cette conférence. Vous pouvez voir que je l'ai mis en évidence en rouge. Là encore. C' est juste une ancienne propriété régulière sur l'instance de vue, donc vous pouvez voir qu'il y a une virgule après le L pour vous assurer que cette vue sait que ces deux entités sont séparées. La propriété view data prend un objet comme une valeur que vous pouvez voir sur le deux-points de données, puis les accolades, qui désignent un objet JavaScript. Il contient des paires de valeur de propriété, qui agissent comme une sorte de variables de vous. Vous pouvez voir que la propriété de ces paires de valeur de propriété est le nom de la variable d'annulation de citation . Dans ce cas, dans la lecture en surbrillance, son message est le nom de la propriété et la valeur est ce que vous voulez conserver à l'intérieur. Dans ce cas, c'est Hello world, une chaîne qui dit bonjour monde. Donc, grâce à voir ces air beaucoup, beaucoup plus puissant que les variables JavaScript régulières, d'accord, et tout est à voir avec la mise à jour HTML et la réactivité des données, dont je vais parler un peu dans une seconde. Un appel d'offres, hmm ? Vraiment n'a jamais été aussi facile parce que vous avez le même javascript que la dernière diapositive cette diapositive. Et voici le HTML qui nous permet d'afficher la valeur de la propriété message. Dans ce cas, la valeur de cela est bonjour monde, non ? Ils correspondent aux deux accolades, notre syntaxe spécifique à notre vue. Très bien, c'est quelque chose que la vue cherche à l'intérieur de notre actif. Il cherche ces accolades pour dire, OK, le programme fait référence à une propriété que A. Je devrais prendre ça et le transformer en n'importe quelle valeur est dans notre cas, c'est bonjour monde. Voici donc la syntaxe, la syntaxe HTML pour inclure les données de vue à l'intérieur de notre HTML. On va prendre le nom de notre propriété de données et la mettre à l'intérieur des accolades. Alors passons au stylo de code et essayons ceci. Je vais juste mettre une propriété de données à nouveau. Il prend un objet comme valeur. On va donner à cet objet une propriété va bien, message et on va mettre dans le monde Hello. Cela vaut la peine d'être noté. J' ai déjà inclus la vue dans ce stylo de code. Vous pouvez voir ici. Je l'ai inclus. Et c'est pourquoi les vues fonctionnent pour nous, nous pouvons diriger vers le HTML Nous allons faire les deux accolades et nous allons message serré vues automatiquement va prendre soin d'elle pour nous et afficher le monde bonjour dans le HTML. Comme vous pouvez le voir maintenant, réactivité des données est ce qui est si excitant à ce sujet. Donc, si nous descendons à notre consul affaiblir le message point d'application de type et que cela va réellement montrer ce que notre instance de vue, qui est nommée APP, a tenu comme une propriété de message dans sa propriété de données, I Non, je suis disant beaucoup de propriété. J' espère que vous suivez maintenant. C' est là que la vraie magie entre en jeu. Si nous tapons le message point app est égal et nous le changeons pour égal à autre chose. Disons que le monde Bonjour, Il suffit de l'inverser très original. Je sais, et nous entrons tout de suite. Le html change avant les frameworks réactifs comme view. Nous devrions écrire du code supplémentaire afin de sélectionner l'élément html et de le mettre à jour avec une nouvelle valeur. Mais vue prend soin de cela pour nous dans les coulisses, d'une manière vraiment, vraiment élégante, nous pouvons le changer à ce que nous voulons. On pourrait le changer pour ce truc bizarre qu'on pourrait changer. Tu sais, même un nombre. Et il s'affichera, même si c'est un type de données différent en JavaScript. Peu de gens s'occupent de tout ça pour nous. Donc j'espère que cela vous montre un peu pourquoi la vue est si, si incroyable et puissant. Et on va comprendre pourquoi c'est encore plus puissant lors de la prochaine conférence. Ou nous parlons de quelque chose appelé directives de vue impatient de vous voir alors. 4. Directives, v-if et v-bind: Bienvenue dans cette conférence, nous allons parler des directives de vue et V Bind, un exemple de directive de vue. Qu' est-ce qu'une directive de vue de toute façon ? C' est peu de syntaxe spécifique, pas javascript vanille, juste quelque chose à savoir. Ils vont là où vont les attributs html, et des exemples courants d'attributs HTML Air the A treff attributs dans les balises de lien ou les attributs SRC dans les balises d'image. Peu de directives commencent toujours avec V Dash comme préfixe, et vous évaluez la valeur d'une directive comme JavaScript tous y entrer un peu plus une fois que nous pouvons voir du code. Un exemple simple d'une directive de vue est V. Si vous regardez le lecteur un script en bas à gauche de l'écran, vous ne verrez rien de vraiment nouveau pour nous. Il s'agit d'une instance de vue avec les attributs Anel et l'objet de données. Cependant, cette fois, nous avons une propriété show dans notre objet de données qui est définie sur true la valeur booléenne . Vrai en Javascript, ce n'est pas une chaîne. C' est juste vrai. Maintenant, ce HTML, nous pourrions voir quelque chose d'un peu nouveau, et c'est ah, sur la deuxième ligne, vous pouvez voir que nous avons RV tableau de bord. Si vous affichez et au deuxième point sur cette diapositive, l'évaluation des valeurs des directives JavaScript View va chercher à montrer à l'intérieur de son instance. Dis Ok, où se montre ? Il va trouver la propriété show dans notre objet de données et dire Qu'est-ce qu'il évalue trop bien, nous montrant juste la valeur booléenne. Vrai. Donc, bien sûr, il va évaluer à Troop, et ce que VF fait en fait, c'est soit montrer ou cacher la div à laquelle il est attaché . Laisse-moi te montrer ça sur le stylo de code. Voilà Thievy. Si exemple vous pouvez voir. J' ai exactement le même code que sur la diapositive. Vous pouvez voir les données montrant true. Alors passons à la console et tapez point d'application montrant et voir ce qu'il évalue à elle évalue à vrai. Maintenant, si nous prenons le point de l'application montrant et dit qu'il est égal à faux. Si vous regardez en haut, assurez-vous de regarder ici avec le Maintenant vous me voyez, on va appuyer sur Entrée et c'est parti, et c'est sans page. Actualisez les vues en faisant cela dans les coulisses. Donc, si on agit en montrant que c'est vrai, ça va le faire revenir. C' est un exemple très, très simple d'une directive de vue. Passons à voir les arguments de directive et démystifier quelques directives peuvent prendre des arguments en ajoutant deux points après la directive. Nom et V Bind est l'un de ces attributs. Ce que vous avez été fait, c'est qu'il nous permet de lier dynamiquement les données toe un vieux attributs HTML réguliers . Par exemple, un lien marque un attribut de trajet. Si vous jetez un oeil à ce JavaScript que j'ai ici, n'est rien de vraiment nouveau. La seule chose qui a changé est que dans notre objet de données, nous avons une propriété de votre L avec la valeur du lien hypertexte vers google dot com. Moi html. Cependant, nous verrons quelque chose de nouveau. Si vous regardez la deuxième ligne, nous pouvons voir que nous avons une balise A avec une directive V Bind qui prend un argument d'un voyage . Donc v lier Colon, puis l'argument. Dans ce cas, c'est un treff, et vous pouvez voir que la valeur de cela est définie pour vous, Earl. Encore une fois, vous allez regarder à travers son instance et dire, OK, je cherche quelque chose nommé U. R L il trouve que dans l'objet de données et voit sa valeur est définie sur google dot com de sorte qu'il retourne à le HTML et dit, Qu'est-ce que je V liant ceci à Quel est l'argument de ma directive V Bind ? Et c'est un voyage. Donc, il va définir qu'un tag un treff pour être google dot com. Et c'est vraiment puissant car au fur et à mesure que votre application progresse, nous pouvons réellement changer autour de cela un trafic fuit si nous le choisissons. J' ai le stylo de code ouvert ici avec le même code à nouveau, et vous pouvez voir que vous êtes tous réglé sur google dot com. Confirmons simplement que dans l'application console point Earl et c'est google dot com. Voyons ce qui se passe quand on le met à autre chose, disons Bing dot com. Donc nous l'avons dit à être de nouveau point com. Nous n'avons pas actualisé la page. Si nous cliquons sur le lien, il va nous envoyer à bing dot com. Maintenant, c'est vraiment, vraiment puissant à nouveau. Si nous définissons l'URL de l'application à google dot com, vous devez taper ce https, bien sûr, parce que sinon Theeighties ne le chargera pas correctement. Ça va aller sur Google et c'est tellement, si puissant. Vous pouvez le faire avec la propriété thésaurus d'une image et charger dans une image différente en fonction de la préférence d'un utilisateur ou même du profil d'un utilisateur. Maintenant c'est vraiment, vraiment puissant, et je suis heureux de vous l'avoir montré. Rejoignez-moi à la prochaine conférence, où nous allons parler de quelque chose appelé List rendu CNN. 5. Rendu et v-for: Bienvenue dans cette conférence, nous allons parler du rendu des listes et de la directive V 4. Une autre directive en vue. Je voulais juste donner un rafraîchissement rapide sur JavaScript une augmentation au cas où ils auraient totalement échappé à votre esprit ou que vous ne les ayez pas utilisés pour surveiller ou quoi que ce soit. Il va élever une collection de données que le Reagan détient n'importe quoi nombre, chaînes, objets, même d'autres tableaux. Et cela pourrait être un mélange de n'importe lequel de ceux habituellement destinés à contenir des données qui seront ensuite itérées, par exemple, en utilisant une boucle for. Vous avez tous vu ces quatre. Je suis égal à zéro moins d'une longueur de point de rayon I plus plus. Et puis vous pouvez regarder chaque élément dans ce tableau. Et ce n'est qu'un exemple d'un tas de tableaux. On a notre tableau de sons. Nos nombres sont un et, euh, un tableau de valeurs mixtes. Maintenant, une augmentation en vue. Avoir un re présent est vraiment un simple comme l'inclure comme la valeur d'une propriété dans notre objet de données. Donc, vous pouvez regarder le JavaScript ici à nouveau. Rien de vraiment nouveau, sauf que nous avons nos sons, propriété et sa valeur dans un droit, et c'est vraiment une course de vue simple comme ça assez facile, non ? Donc, lister le rendu et la directive V quatre. C' est là que les listes deviennent vraiment, vraiment intéressantes et super puissantes en vue. En utilisant la directive V quatre, nous pouvons facilement faire une boucle à travers un tableau, et cela fonctionne également sur les objets n'allaient pas regarder cela. Mais sachez juste que cela fonctionne aussi sur les objets et nous pouvons rendre html pour chaque morceau de données . Voici le JavaScript. C' était dans la dernière diapositive. Et voici le HTML. Ça peut sembler un peu déroutant,alors on va y aller un peu plus en profondeur dans la prochaine diapositive. Ça peut sembler un peu déroutant, C' est le même JavaScript en HTML que j'avais sur la diapositive précédente. Et regardons ça. Donc, nous avons notre directive désignée par le tiret V Dash D pour le nom du tableau dans l' objet de données va être après cela dans le mot-clé, et ceci est une variable temporaire, ou alias, qui contient l'élément de tableau actuel. Il est important de noter que cela n'a pas besoin d'être la version singulière de notre nom de tableau c'est juste une convention. Si vous avez déjà travaillé en Python, cela vous sera très, très familier si vous ne l'avez pas fait. Cependant, ceci dans la syntaxe est en quelque sorte spécifique à la vue. C' est en quelque sorte en JavaScript en ce moment. Quoi qu'il en soit, je ne vais pas y aller. Mais si vous le regardez, cela a du sens. Il va dire qu'il va rendre un div pour chaque son qui est dans le tableau de sons. Donc, il va rendre quatre dans notre cas avec boom bap clap et ca bam et vous pouvez voir ici nous avons les accolades, les deux accolades qui nous permettent de taper, voir le code à l'intérieur de notre HTML. Allons au stylo de code et on va y jeter un coup d'oeil en action. J' ai le même javascript que nous avions sur les diapositives, et j'ai un modèle HTML vide et nous allons réellement taper notre directive avant. Donc V 4 est égal au son dans les sons, et ensuite on va faire le son des deux accolades. Et si vous regardez le HTML, il va réellement rendre chaque élément de tableau unique que nous avions à l'intérieur du HTML. Et si nous ouvrons notre inspecteur et y jetons un coup d'oeil. Vous pouvez voir que chacun d'entre eux est un coup de boom def individuel BAP et ca bam ! Et vous pouvez comprendre pourquoi cela pourrait être si puissant dans beaucoup de situations. Ah, exemple très classique de ces frameworks réactifs est de créer une liste de tâches afin que vous puissiez avoir tout cela pour faire des données stockées dans votre javascript. Et puis il peut rendre cela en utilisant juste ceci ici, juste trois lignes au lieu d'avoir à accéder à chacune individuellement ou en boucle sur les données à l'intérieur du JavaScript afin de rendre, euh, les choses au dom. Quoi qu'il en soit, c'est très, très puissant. Ce n'est pas quelque chose que nous allons regarder dans, euh, euh, création de notre lampe. Je voulais juste le présenter très rapidement parce que c'est un concept puissant qu'il vaut vraiment la peine de connaître. Et vous pourriez totalement utiliser dans votre propre projet aussi. Tout droit à vous dans la prochaine conférence 6. HTML et CSS pour notre lampe: Bienvenue, tout le monde. Je suis tellement excité à propos de ça, Lecter, parce qu'on va enfin commencer à construire notre projet d'échantillon. Notre lampe. Maintenant, cette conférence va être complètement HTML et CSS. Pas de javascript, pas de vue. Cela signifie que si vous ne vous souciez pas du CSS ou n'êtes pas inquiet de la structure du HTML, vous pouvez l'ignorer. Ça va être assez simple. Donc, si vous êtes déjà familier avec ces concepts, pas grand-chose. Vous verrez ce que j'ai fait dans les prochaines conférences. Et oui, c' est à propos de ça. Maintenant, je vous encourage fortement à aller sur Code Penda, Ohio, et à créer sur compte et code avec moi. Je vais le mentionner dans beaucoup de conférences pour m'assurer que vous codez parce que je trouve vraiment que c'est la meilleure façon pour les étudiants d'apprendre à coder avec ce que je fais. beaucoup de conférences pour m'assurer que vous codez parce que je trouve vraiment que c'est Et puis même après que les électeurs se mêlent aux concepts que vous avez appris les solidifient dans votre cerveau. Je vais également inclure un lien vers une collection de stylos de code dans le cours quelque part qui contient le code source pour chaque conférence, juste pour que vous puissiez l'examiner. S' il vous plaît, n'allez pas et copiez Coller, mais je sens vraiment, vraiment fortement qu'il est important de coder avec ce que je fais. D' accord, allons-y. Donc nous allons passer à notre HTML et créer un div avec une classe de lampe. Maintenant, on va aller au C S et sélectionner cette lampe Div et lui donner une position absolue . On va lui donner un haut de 50 pixels et une gauche de 50 pixels. Je ne vais pas trop m'inquiéter de la conception réactive pour cela, car il est juste une démo à nouveau étaient vraiment mawr axé sur la fonctionnalité plutôt que sur la façon dont il ressemble et comment il est joli. Maintenant, je vais créer un div à l'intérieur de la lampe avec une classe d'ombre, et nous allons sélectionner cette classe d'ombre et lui donner une position d'absolue. Donc, comme c'est un enfant de la lampe , , il va être positionné selon la lampe, pas le document entier comme la lampe, Davis. Donc, nous allons donner cette oups désolé avec chaque obtient une bouffée de 70 pixels si je peux taper et une hauteur de 50 pixels et une couleur de fond de biscuit. Je ne l'ai pas fait. J' ai googlé ça. Je ne savais pas que c'était à la couleur CSS avant de faire ce cours. D' accord. Maintenant, nous allons créer un div basé si une div avec une classe de base, cela va être en dehors de la classe d'ombre. Ça va être une sœur, je devrais dire de la classe d'ombre. Donc, nous allons sélectionner sont basés classe ou qui sont basés. Si je dois dire dans le CSS, nous allons également donner à cela une position absolue. On va lui donner une largeur de 10 pixels. On va lui donner une hauteur de 70 pixels. Pas trop large, très mince et long à gauche de 30 pixels et un haut de 50 pixels. Je ne tire pas seulement ça de l'air mince. Je l'ai déjà fait juste pour qu'on puisse accélérer les choses pour lui donner une couleur marron . Maintenant, que se passe-t-il ici ? Quelque chose de mauvais. Oh, j'ai mis ça en dehors de la pointe de la lampe. Espérons que tu l'as attrapé. Donc on va le mettre un bâton là-dedans, et maintenant ça ressemble à une lampe. Vous pouvez voir dans l'aperçu maintenant, nous allons créer une classe de lumière, en fait,à en fait, l'intérieur de l'ombre, une lumière, défier, continuer à dire comme classe et que nous allons mettre juste sous ici pour garder notre CSS organisé. Ça va vivre à l'intérieur de notre ombre, Diz. Et sa position sera absolue. qui signifie encore qu'il va être positionné en fonction de son parent, qui est la div ombre. Maintenant, nous allons lui donner une largeur de 100% pas de pixels pour cent et une hauteur de 100%. Et ça va faire exactement les mêmes tailles que l'ombre. Donc, si nous changeons, nos sont dans les dimensions de hauteur ici, le monde de la largeur et de la hauteur s'adaptent à cela. Et maintenant on va lui donner une couleur de fond de toi, et ça va l'éclairer. Et ça va être nos lampes sur l'état, qui dans les prochaines conférences vont manipuler avec JavaScript pour que quand on clique dessus , il , puisse s'allumer et s'éteindre. Donc c'est à ce sujet pour le HTML et CSS Hope qui était la partie éclairante dans le jeu de mots de la lampe. Et je te verrai dans la prochaine conférence 7. Méthodes de vue et v-on: bienvenue. Encore une fois, nous allons vraiment entrer dans la viande de vous avec cette conférence avec les méthodes de vue et le V sur la directive. Maintenant quoi ? Nos méthodes de vue, elles sont très importantes à voir. Donc, nous allons trouver des méthodes air détenues dans un objet comme une propriété de notre instance de vue Exactement comme notre objet de données et vous verrez ce que je veux dire. En une seconde, au lieu de choses comme des chaînes ou des tableaux, qui est ce que contient notre objet de données, notre objet de méthodes contiendra des fonctions que vous pouvez voir dans ce JavaScript. J' ai une instance de vue assez standard, nous avons nos données LR, et maintenant nous avons une nouvelle propriété appelée méthodes. Cela vaut la peine de le souligner. Rappelez-vous donc nos instances de vue, juste un gros objet JavaScript. Donc, nous avons besoin de cette virgule après l'accolade de fermeture des données parce que c'est juste un tas de propriétés comme dans n'importe quel autre objet JavaScript sans que cette virgule ne s'exécute pas. Donc c'est quelque chose que j'oublie parfois. J' ai pensé que ça valait la peine d'être mentionné. Si vous regardez la propriété methods, elle contient un objet. Et dans cet objet, nous voyons que nous avons une propriété qui s'appelle bonjour monde, et cette propriété a une valeur de juste une fonction, et dans cette fonction, il exécute une alerte appelée Hello World. C' est une chose de début de script Java assez standard. Donc je me suis dit que je m'étais adapté pour voir. Maintenant, comment allons-nous interagir avec cette méthode dans notre HTML ? Et c'est là qu'intervient le V sur la directive. La directive Viane prend un argument exactement comme V bine le fait avec le côlon. Il nous permet de définir réellement les écouteurs d'événements sur les éléments HTML d'une manière très simple, et très souvent l'argument de la directive Viane sera cliqué. Pas toujours, mais vous le verrez assez souvent, et la valeur de la directive est presque toujours une méthode que nous avons déclarée à notre avis. , par exemple, la méthode hello world que nous avons vu dans la diapositive précédente. Voici un peu de HTML. Assez simple. Vous pouvez voir que nous avons R V sur le clic deux-points. Alors ah, rafraichir encore. Le V sur est la directive deux-points et après le deux-points est l'argument directives. Dans ce cas, c'est cliquer. Donc ce que ce code ferait, c'est quand on clique sur le bouton, il va en fait faire courir ce gars ici. Le monde bonjour, euh, propriété, qui est une fonction. Il va exécuter cette fonction, et il va alerter bonjour, monde dans le navigateur. Maintenant, jetons un oeil au stylo de code et comment nous pouvons l'utiliser dans notre lampe. Alors passons à la lampe et nous allons ajouter un V sur la directive et en un clic, et nous allons référencer quelque chose qui n'existe pas encore dans le script Java. Et on va l'appeler bascule. Donc ça doit être que tu peux voir ici, ça va me crier dessus en disant que le bascule n'existe pas et ça va se débarrasser de tout ça. Mais c'est bon pour l'instant. Non, Non, souviens-toi, on va ajouter cette commune. Nous allons descendre au JavaScript, et nous allons ajouter une propriété methods, et il va contenir un objet JavaScript, accord ? Et nous allons ajouter toggle, qui est ce que nous devons ajouter. Pour que cela recommence à rendre correctement, et la valeur de bascule sera égale à une fonction. Et on va simplement consoler la pensée consigner quelque chose. On va juste mettre, euh, lampe cliqué. Disons qu'avec un point d'exclamation, parce que nous sommes excités que je vais éclaircir ce conseil, donc tu n'as pas à regarder ça maintenant avant même qu'on clique sur la lampe. Essayons juste la méthode. N' oubliez pas que nous pourrions accéder aux propriétés de données de notre application, notre application de vue en tapant point d'application et le nom de la propriété de données. Voyons si cela fonctionne aussi avec nos méthodes. Donc, tapez juste ap dot remorg, et cela va retourner une fonction. Et c'est ce que nous voulons arriver. Nous voulions retourner la fonction. Voyons ce qui se passe si on court. Apt up, bascule. Ça va allumer la lampe de dialogue du conseil pour que tout fonctionne vraiment bien. Et maintenant, essayons de cliquer sur la lampe. Rappelez-vous, c'est Thievy on Click Directive qui travaille pour nous, et boom ! Ça va exécuter cette fonction. Maintenant, c'est quelque chose qui est si puissant et excitant avant ces frameworks réactifs, vous devriez y aller. Vous devez sélectionner l'élément HTML réel. Vous devrez y ajouter un écouteur d'événement. Vous devriez ajouter une fonction à cela et juste c'était beaucoup plus compliqué que cela avec vue. C' est si simple de le faire et si facile à entretenir et juste une chose vraiment excitante. C' est un jalon cool. Je vous encourage vraiment à vous embêter avec ça. Si vous voulez changer ce qu'il dit, essayez, vous savez, d' ajouter du code supplémentaire à notre fonction bascule. En train de jouer avec ça, voyant ce que vous pouvez trouver. N' aie pas peur. Tu ne vas rien casser, alors expérimentez. Donc c'est à ce sujet pour cette conférence, je te verrai dans la prochaine. 8. État de la lampe et v-if: Bienvenue dans cette conférence, nous allons ajouter l'état de base à notre lampe en utilisant la propriété data. Et nous allons utiliser la directive voleur si vous vous en souvenez, si vous souvenez faites pas, c'est bon. Tu t'en souviendras quand on ira. Bon, passons à notre script Java, et nous allons ajouter une nouvelle propriété à nos données, qui va être appelée. Donc, cela va contrôler l'état allumé de notre lampe allaient par défaut à faux afin que l'utilisateur puisse allumer la lampe une fois qu'ils démarrent. Ok, alors maintenant comment interagissons-nous avec ça sur la propriété ? Eh bien, nous pourrions toujours faire des données sur les points d'application. Notre désolé de point On est égal à travers et le changer à ça. Mais comment pouvons-nous faire cela au sein d'une méthode ? Donc on va utiliser notre discours, se plaindre que nous allons effacer le journal des points du consul, et nous allons faire référence au mot clé ceci. Maintenant, c'est une chose très déroutante en javascript. Ça l'a toujours été. Je ne vais pas essayer de l'expliquer ici. Il y a quelques articles fantastiques qui expliquent comment y faire face et ce que cela signifie réellement . Fondamentalement, dans des contextes différents, cela signifie des choses différentes. Cependant, dans ce cas, nous allons simplifier et dire simplement que cela fait référence à l'instance de vue. Ok, donc si nous tapons ce point sur son accès à cette propriété dans les données, si nous tapons ce point bascule, il va référencer la méthode. Donc c'est une autre chose. Ne nommez pas vos méthodes et données de la même chose. Vous rencontrerez des problèmes, mais pour nos besoins, ce point fait référence à l'intérieur de notre propriété de données. Ce point n'importe quoi fait référence à quelque chose dans votre code de vue afin que vous puissiez appeler d'autres fonctions à partir de cette fonction en tapant ce point le nom de la fonction. Quoi qu'il en soit, définissons ce début sur égal Non désolé, pas ce stock sur à nouveau, Quelque chose de déroutant si vous ne l'avez jamais vu auparavant, JavaScript évalue réellement le code à partir de l'orteil droit gauche. Donc, en gros, ce qui va se passer, c'est que ça va dire OK, qu'est-ce que ce point sur ça fait sur ce faux ? Ce n'est pas ce point d'exclamation qui va inverser ce que ce chien évalue dans ce cas, ce début évalue à faux, donc il va l'inverser à vrai. Et puis il va réellement mettre ce point sur pour être égal à vrai. J' espère que cela a du sens. C' est une base si tu ne comprends pas, c' est bon. C' est essentiellement la façon dont vous basculez une vraie valeur fausse et JavaScript c'est tout ce que vous devez savoir. Jetons un coup d'oeil au consulat. Que se passe-t-il ? Donc, ce point d'application sur est égal à false. Maintenant, nous allons courir à point bascule tout droit, et voyons ce qui agit sur est égal à maintenant. C' est le mal, les troupes. Donc, cela fonctionne parfaitement. Et maintenant, si nous cliquons sur la lampe, si nous faisons apt sur cliquez sur la lampe et faire apt sur nouveau faux, donc en cliquant sur la lampe exécute également notre méthode. On est toujours bon pour ça. Maintenant, nous allons faire en sorte que nos lanternes sont allumées et éteintes. C' est excitant ? Je suis tellement excité par la raison pour laquelle nous avons fait une classe distincte de Dave séparée, je devrais dire, notre lumière est pour que nous puissions utiliser la directive V if et nous allons simplement mettre V si accord. C' est vraiment, honnêtement aussi simple que ça. Et vous pouvez voir notre lampe s'est éteinte, pour ainsi dire, La Div jaune la couleur jaune a fait avec la classe de lumière a disparu. Merci à voir disant OK, ce n'est pas sur honnête est réglé sur false. Et maintenant, quand on clique dessus pour le basculer, Moment de vérité Bam, il s'allume C'est tellement cool. C' est cool ? Je m'excite à ce sujet. Et je savais ce qui allait se passer. Alors passons à travers cette chaîne d'événements une fois de plus. Nous cliquons sur la lampe et que, grâce à RV sur clic, il va cliquer dessus, et il va chercher la vue que je devrais dire va chercher la méthode de bascule. Il va aller par ici et dire, OK, OK, la méthode toggle est définie sur une fonction qui inverse fondamentalement la propriété on dans nos données, elle la transforme de false à true ou true à false. Ok, ça arrive. Et puis la vue dit, Oh, OK, cette directive, ce V Si la directive dit ok si on est vrai, je veux afficher ceci. Cependant, si sur son faux. Je ne veux plus afficher ça. Ceci comme Div, qui est défini sur une couleur de jaune dans notre CSS. Vous pouvez voir ici la couleur de fond, jaune, et c'est essentiellement ce qui se passe. C' est la chaîne des événements là-bas. Je suis excité que ça fonctionne vraiment, vraiment cool. Et je suis excité qu'on commence à faire des trucs. Je voulais faire des trucs dès que possible, donc je te verrai à la prochaine conférence. 9. La directive modèle v-model: Bienvenue, tout le monde. Dans cette conférence, nous allons parler d'une nouvelle directive appelée V Model. Vraiment excitant, vraiment puissant. Et ça va être amusant. Alors, comment utilisons-nous le modèle ? Eh bien, il est utilisé pour la liaison de données bidirectionnelle, qui est ce que la vue Js Docks l'appelle. Donc, à une liaison de données sur les éléments HTML qui permettent l'entrée de l'utilisateur, par exemple, entrées de texte. Ils peuvent également être utilisés sur tout ce que la balise d'entrée peut gérer en HTML. Des cases à cocher, boutons radio, des curseurs de portée, listes déroulantes, toutes ces bonnes choses. Ainsi, lorsque les données changent dans un élément HTML qui a une directive de modèle V, il met à jour la propriété de données à laquelle il est lié à l'intérieur de l'instance de vue et vice versa. Si je change les données dans l'élément HTML, il mettra automatiquement à jour la propriété associée dans l'instance de vue. Et si je change l'instance de vue, propriété à l'intérieur du JavaScript mettra automatiquement à jour le HTML. C' est un concept très puissant, et je suis juste très excité de vous montrer comment ça marche. Maintenant, vous verrez quelques JavaScript ici, vue assez standard. , nous avons une propriété nommée Color à l'intérieur de notre objet de données et sa valeur est violet. Et si nous regardons notre HTML, vous pouvez voir que nous avons quelque chose Un petit modèle de tableau de bord nuvi est égal à la couleur. Et je veux vous rappeler que la vue voit quoi que ce soit une valeur hors d'une directive et cherche cette valeur à l'intérieur du JavaScript. Donc, cette couleur n'est pas la vue de couleur de chaîne est de voir que v Dash et de dire, OK, c'est une directive. Je vais évaluer ce que c'est égal et essayer de le trouver à l'intérieur de mon point de vue. Instance, Juste un rafraîchissement rapide sur cela. Ok, nous avons sauté vers le stylo de code, et maintenant nous allons implémenter une directive de modèle V sur une boîte de saisie de texte qui nous permettra changer la couleur de notre lampe, ce qui est vraiment cool. Maintenant, nous n'allons pas mettre en œuvre le changement de couleur tout de suite. Ce sera dans la prochaine conférence, où je parlerai d'autres concepts qui nous permettront de le faire. Cependant, nous allons juste mettre le modèle en marche dans celui-ci. Donc je vais ajouter sur l'entrée avec un type de texte en dehors de cette lampe, def. Cependant encore à l'intérieur de notre actif, c'est très important sinon ont utilisé ne pas aller le voir correctement. Nous ajoutons donc une directive de modèle RV et nous appellerons cette nouvelle couleur de propriété, comme nous l'avons fait dans les diapositives. Maintenant, vous allez voir une erreur d'objet ici. C' est OK. C' est juste parce que la vue n'est pas capable de trouver la propriété de la couleur parce que nous ne l'avons pas encore fait. Alors allons de l'avant et faisons ça à notre virgule. Souviens-toi, c'est un objet qu'on a besoin de ces virgules et on va ajouter en violet. Et maintenant vous pouvez voir ici. Nous avons le violet rempli automatiquement. Vous pouvez voir ici. Ça ne dit même rien de bien. Il n'y a rien. n'y a pas de texte d'espace réservé, rien n'y est associé. Regarde ça. C' est la partie vraiment cool. Donc, si nous ne apt couleur rappelez-vous, nous pouvons accéder à n'importe quelle propriété à l'intérieur de notre objet de données en faisant application ou le nom de notre vue. Instance. Dans ce cas, c'est app, app dot quel que soit le nom de la propriété. Dans ce cas, c'est la couleur pourpre. Maintenant, si je tape de l'orange ici et me souviens que ça n'a pas été rafraîchi ou quoi que ce soit, tout se passe en direct en orange en temps réel. C' est cool ? Immédiatement, il a pris le texte que les utilisateurs ont mis et l'a changé dans le script Java. Maintenant, c'est incroyablement puissant. Et vous pouvez voir que cela fonctionne de la même manière. Si je dans le JavaScript Si je tape rouge orange ici la couleur point ap là-haut automatiquement, cela change. Regardez encore. Regardez à nouveau en haut. Pendant que je fais ça, je vais le changer en bleu. Maintenant, regardez à nouveau à la recharge ici immédiatement. Ça change. C' est tellement cool. C' est l'une des choses les plus cool sur la vue pour moi. Personnellement, j'aime juste ce va-et-vient entre le HTML et Js. C' est si élégant et si facile à utiliser. Ok, dans la prochaine conférence, nous allons vraiment faire en sorte que ça ait un effet là où nos lampes sont encore jaunes ? Parce que c'est ce que le CSS dicte ici dans le prochain allait réellement utiliser V achat. Et si vous vous souvenez d'une tasse électeurs il ya afin de changer la couleur de la lampe vous voir alors 10. Ajouter des couleurs réactives !: Bienvenue, tout le monde dans cette conférence, nous allons prendre notre propriété de couleur à l'intérieur de notre vue. Instance qui est modélisée en V à notre entrée de texte. Et nous allons faire en sorte que cette valeur change réellement la couleur de notre longueur que nous avons ici sur l'écran. Maintenant, il est intéressant de noter que, euh, j'ai ajouté du texte de saveur ici depuis la dernière conférence qui invite juste l'utilisateur à entrer une couleur CSS valide. Et il doit être une couleur CSS valide. Si nous tapons quelque chose de charabia ou de chiffres ou quoi que ce soit, il ne va pas Teoh afficher correctement. Il sera juste par défaut à un jaune, donc il ne va rien casser. Cependant, si vous voulez une façon plus sujette aux erreurs de le faire, bonne façon serait une entrée select et, vous savez, comme une liste déroulante. Et je ne vais pas y aller ici. Mais la documentation de vue car ils ont des docks fantastiques. C' est une autre raison pour laquelle c'est l'un de mes frameworks préférés en JavaScript. Leur documentation est tout simplement incroyable. Mais si vous allez à la documentation du modèle V, il y a une section entière sur les entrées sélectionnées. Entrées déroulantes. Commençons à l'inclure ici, cependant, nous allons utiliser le modèle pour changer la couleur. Maintenant, prenons une minute pour réfléchir à comment changer la couleur de cela alors que nous pourrions aller dans le CSS et juste le changer manuellement nous-mêmes, et cela fonctionnerait correctement ? C' est violet maintenant, mais JavaScript n'a aucun moyen de toucher un fichier CSS. Pas comme ça de toute façon. Alors comment on fait ça ? Comment faire en sorte que le HTML change le style ? Je suis sûr que vous l'avez déjà vu. Ce sont les attributs de style sur l'élément HTML. Et pour ce faire, nous tapons simplement un fond de code CSS. La couleur est pourpre et vous pouvez voir qu'elle a changé. On l'a fait pour qu'elle soit violette. Cependant, nous voulons être en mesure de changer cela avec vue, n'est-ce pas ? Et on ne peut pas simplement taper, tu sais, double Curley et couleur, parce que la vue ne peut pas regarder à l'intérieur des attributs, non ? C' est juste une force que vous ne pouviez pas savoir qu'il était censé regarder à l'intérieur de là pour que Teoh discerne quelle devrait être la couleur. Alors qu'avons-nous vu auparavant qui nous permet de changer ? Attributs HTML utilisant des données de vue. C' est vrai. C' est la liaison. Ok, donc nous allons réellement nous débarrasser de cela et taper dans v bind. Souviens-toi, c'est nos attributs. C' est notre, Ah, notre directive, je dois dire. Et après le deux-points, c'est notre argument pour une directive. Le style V est égal à ok, et ce que cela va prendre, nous ne pouvons pas simplement taper en arrière-plan. La couleur est pourpre parce que c'est du code CSS, non ? Il y a beaucoup de choses qui ne vont pas avec ça, mais ce code CSS. Alors, comment la vue traite-t-elle, euh, le style de liaison V ? Eh bien, il faut un objet JavaScript. Ok, et c'est les deux accolades. Maintenant, cela prend cela, et fondamentalement c'est juste une liste de propriétés CSS. Ainsi, par exemple, la couleur de fond. N' oubliez que vous ne pouvez pas utiliser de tirets en JavaScript, il s'agit donc d'un arrière-plan avec une couleur d'arrière-plan avec un C majuscule sur la couleur. Et si vous avez déjà édité le style en utilisant JavaScript natif, juste du JavaScript vanille, je devrais dire que c'est très similaire. Il ne devrait pas y avoir quelque chose de nouveau pour vous, Colon et bien sûr, parce que c'est ah objet qui est notre propriété ou Kias, fond, couleur et notre valeur. Nous devons utiliser des guillemets simples ici parce que si nous utilisons des guillemets doubles, cela nous échappera réellement de cette séquence. Mais nous devons utiliser des guillemets simples parce que rappelez-vous, nous ne pouvons pas simplement taper violet car alors c'est le JavaScript va chercher les instances de vue , plutôt va chercher la propriété de violet, et cela ne n'existe pas, n' est-ce pas ? Donc si on met une ficelle ici en violet, tu vas voir bam, ça change. C' est incroyable, non ? C' est vraiment, vraiment cool. D' accord ? Et vraiment, vraiment puissant. Mais nous ne voulons pas que ce soit une force statique. Et c'est là que tout se rassemble. C' est un moment tellement excitant dans le cours. On va s'en débarrasser et on allait simplement taper la couleur. Et rappelez-vous, chaque fois que la vue a une directive, elle va voir la valeur de la directive comme JavaScript. Droit ? Et il va chercher cette propriété de couleur à l'intérieur de lui-même et il va la trouver dans notre objet de données, ce qui est égal au violet Ok. Et maintenant on clique dessus et c'est violet. Et regarde ça. C' est, genre, tellement incroyable. On combine des trucs, et c'est excitant. Donc, nous nous débarrassons du violet et il est par défaut jaune, rappelez-vous, parce que dans notre CSS. Nous avons les antécédents. La couleur est jaune. Nous tapons orange. Regarde ça. Automatiquement. Ça change. C' est tellement excitant. C' est tellement excitant. Rose, euh, bleu vert. Incroyable. Et juste orteil vous montre que cela fonctionne, affaiblir le type dans la couleur de point d'application est égale au jaune ou ne faisons pas jaune. C' est la valeur par défaut, hum, orange à nouveau et ça change. Wow. C' est incroyable ? C' est tellement cool. Et tu vois tous les types de charabia qu'il va rester. Est orange type de nombres qui restera est jaune. Mais à quel point est-ce étonnamment puissant ? Nous combinons seulement deux choses simples et nous n'avons même pas, vous savez, nous en avons moins de 30. Peut-être que vous apprendriez 25 lignes de code ici, et tout cela fonctionne comme ça. C' est juste que l'esprit souffle. Comme la vue est puissante dans un moment comme celui-ci. Et je suis tellement excité d'arriver à ce moment dans le cours. Ok, c'est à propos de ça pour cette conférence. Je te verrai dans le prochain 11. Dimming notre lampe: Bon, bienvenue. Donc, nous entendons un stylo de code, et nous allons ajouter un curseur sombre à notre lampe qui nous permet d'atténuer et d'éclaircir la couleur réelle de la couleur que nous avons choisie pour la régler. Maintenant, cela va utiliser des concepts que nous avons déjà explorés. Ce n'est rien de nouveau. 100% est ce que nous avons déjà vu. Enregistrer pour un autre type d'entrée HTML. Maintenant, si vous voulez essayer ça vous-même, je vous encourage à le faire parce que c'est un peu comme un exercice de puzzle, non ? C' est vraiment amusant d'essayer de comprendre ces trucs de toute façon. C' est marrant pour moi. Évidemment, complètement optionnel. Tu pourrais suivre comme je le fais. Je vais vous donner un indice pour ceux d'entre vous qui veulent l'essayer par vous-même utilisera sur l' entrée html attribut d'entrée avec un type de plage. Ça va être un curseur de portée. Ok, on va y sauter. Je vais commencer avec le script de travail cette fois. Nous allons ajouter une toute nouvelle propriété à notre objet de données appelée luminosité. Ok, on va mettre ça sur un pied d'égalité. La seule note que c'est le numéro un, l'entier un noeud, la chaîne comme vous le verrez là-bas. Ok, un. Et il est important que ce soit un. Parce que c'est ce qui va contrôler notre lumière, dibs, opacité, abandonner ici que, en fait, quand on cliquera, accord, donc ça va contrôler le opacité et opacité. Euh, en CSS est une valeur entre zéro et un, avec 0,5 étant le point médian. Ok, donc c'est important que ça en soit un. Ça commence, ça a gagné. Il peut commencer ce que vous voulez, mais il doit être une valeur, mais entre zéro et un, tout comme le style d'opacité dans CSS. Ok, avant cette entrée de texte, nous allons ajouter une autre entrée avec le type de plage. Et voici quelques attributs qui sont, euh, que vous devriez généralement inclure dans une entrée de plage. On va avoir un homme, ce qui sera la valeur minimale. On va avoir un maximum signifierait la valeur maximale. Tout comme on a parlé doit être entre zéro et un. Nous allons ajouter cette étape attributs ou est réglé sur 0.1 Si vous ne l'avez jamais vu auparavant, il contrôle la distance des étapes dans ce curseur. Laisse-moi te le montrer. Donc, si nous mettons l'étape à 0,5, qui est notre point à mi-chemin, vous pouvez voir quand j'ai traîné cela, il saute automatiquement les orteils à mi-chemin entre. Maintenant, nous voulons être 0,1 parce que cela va nous permettre d'avoir un bon mouvement lisse et un bon changement de luminosité en douceur au fur et à mesure que nous allons. Très bien, ajoutons un peu de magie de vue avec le modèle V. On l'a déjà vu. Cela nous permet de lier pour peser la liaison de données entre une entrée et un JavaScript. Notre propriété de vue, je dois dire. Donc on va le modéliser en fonction de la luminosité. Si je peux épeler Minamata, laisser après la luminosité OK, Et si nous descendons ici et nous le changeons à 0.5 et enregistrer, vous verrez que la vue prend automatiquement soin de la valeur par défaut pour nous. Nous n'avons pas besoin de définir cela et encore une fois pour peser la liaison de données. Désolé, c'est à partir de plus tôt Nous pouvons clarifier que si nous faisons la justesse des points d'application ici, vous pouvez voir qu'il est à un. Si nous le changeons dans le html à quelque chose de bas, revenez au consul. Vérifie ça. Il est pointé vers deux, et nous pouvons mettre apt droiture à quelque chose comme 20.5 et regarder le HTML apparaître le curseur . Ça changera 2.5. Maintenant, comment pouvons-nous utiliser ça pour contrôler notre opacité ? L' opacité de cette lumière ? Si bien, nous allons utiliser la même chose que nous utilisons pour le dos pour la couleur d'arrière-plan, nous allons utiliser cet objet de style. Et rappelez-vous, c'est juste du javascript. Donc c'est juste séparé par des virgules, virgule droite. Et puis nous tapons notre nouvelle clé ou propriété, peu importe ce que vous vouliez l'appeler de l'opacité. Oui, parce que c'est un CSS euh, un style CSS que nous voulons changer. Donc, si nous faisons une passe, elle est égale à la luminosité. C' est tout ce que nous avons à faire. Vérifie ça. Regardez cela, nous cliquons dessus et nous déplaçons le curseur et il s'estompe progressivement et s'illumine progressivement. Et on peut même changer la couleur. Tout ça se passe, non ? C' est à mi-chemin entre l'orange. Il est complètement estompé en orange. Pleine couleur. C' est fou à quel point ? C' est tellement cool. droite ? Et tout cela utilise des choses que nous avons déjà apprises. Vous pourriez ajouter tellement de mawr en utilisant juste les concepts que nous avons en quelque sorte mis sous nos doigts jusqu'à présent dans le cours à nouveau, je recommande que vous gâchiez avec cette expérience. Amuse-toi bien. Quoi qu'il en soit, c'est la fin de cette conférence, et je te verrai dans la prochaine. 12. Propriétés informatiques: Bienvenue dans cette conférence, nous allons parler de propriétés calculées et de les utiliser pour nettoyer et re facteur certains de notre code que nous avons dans notre projet de lampe. Quelles sont les propriétés calculées là-bas ? Une autre facette très puissante, très importante. Ce qu'ils sont sont des propriétés détenues dans un objet calculé, un objet différent de notre objet de données. Similaire aux propriétés de méthodes à l'intérieur de l'objet calculé ont des valeurs d'une fonction. Ils ont toujours une valeur d'une fonction tout comme nos méthodes. Ainsi, la fonction de ces fonctions utilise le mot clé de retour pour déterminer ce que la propriété est égale lorsque nous accédons. Il y en aura dans une minute. Quand je vous montre le code pour que vous puissiez voir ici, il y a un peu, mais ne le soyez pas. Ne vous inquiétez pas pour ça ou quoi que ce soit. On a une vue. Instance un l et nous avons cette nouvelle propriété, un nouvel ahbd, une nouvelle propriété sur notre instance de vue appelée calculée. Et c'est égal à un objet tout comme notre propriété de données. Et tout comme notre propriété de méthodes, vous pouvez voir que nous avons une propriété à l'intérieur de notre objet calculé appelé produit et sa valeur est une fonction et le dysfonctionnement renvoie quelque chose d'aussi simple que deux fois deux. Ok, c'est le HTML qui va avec. Très simple, mais quelques choses à noter ici. Parlons donc de ce mot clé de retour. Si tu ne sais pas ce que c'est, ça va encore. NDN a de la documentation vraiment, vraiment géniale au retour. Vous pouvez le google. Ça va arriver avec un tas de résultats. Fondamentalement, pour nos besoins, le retour est la valeur à laquelle le produit va être égal. Lorsque la fonction calculée est terminée, elle va la retourner. Cela doit être à la fin de la fonction. Si nous écrivons un code après l'instruction return, ce code ne s'exécutera pas. D' accord ? Et vous pouvez voir sur la droite. J' ai du HTML avec produit dans nos courses bouclés. Comme nous faisons quelque chose en vue, nous avons des accolades, le nom d'une propriété de vue et de fermer les accolades. Et ça va s'afficher parce que deux fois deux, c'est quatre. Si nous devions accéder au produit de point d'application à partir de la console, cela reviendrait aussi pour que nous puissions accéder à ces propriétés calculées de la même façon que nous aurions accès aux propriétés de données en tapant point d'application, puis le nom de la propriété calculée. Maintenant, passons au stylo de code. Ici, nous sommes dans le stylo de code. C' est le code de la dernière conférence. Nous avons toujours notre sur notre fonctionnalité. Nous avons ajouté ce curseur dim dans le dernier. Nous allons donc ajouter un objet calculé dans notre vue. Instance pour la lampe et je vais vous dire ce que nous allons faire dans une minute ici, OK, donc nous allons faire calculés. Rappelez-vous cette virgule ici parce que nos instances de vue, juste un gros objet javascript doit avoir cette virgule doit également avoir une virgule à la fin. Maintenant, l'ordre de ceux-ci n'a pas d'importance. Vous pouvez les avoir dans n'importe quel ordre. J' aime juste avoir mes ordinateurs juste sous mes données parce que je vois les ordinateurs comme un type de données, juste quelque chose avec une logique plus complexe derrière eux. Maintenant, nous allons ajouter une propriété à cet objet calculé appelé style. D' accord ? Et peut-être que vous pouvez deviner ce qu'on va faire. Rappelez-vous, cela va être égal à une fonction calculée propriétés sont toujours égales à une fonction d' accord , une fonction qui renvoie quelque chose, et nous allons y arriver. Donc ce qu'on va faire ici, c'est qu'on va prendre cet objet ici. Rappelez-vous, c'est juste un script Java, et nous allons le mettre dans le JavaScript parce que ça devient un peu long à mes goûts. Je pense que quand vous avez quelque chose comme ça, c'est beaucoup de JavaScript. Il appartient au JavaScript. Il n'appartient pas au HTML sur. Si nous devions ajouter de plus en plus de propriétés à cela, cela deviendrait beaucoup, beaucoup plus longtemps, trop longtemps. Je pense que nous allons le nettoyer fondamentalement, en ajoutant une propriété calculée. Ok, donc nous allons avoir une variable locale appelée objet style. Ça existe sur Lee. Dans cette fonction, il ne touche aucune vue. Instance. Vous ne pouvez pas y accéder ici. Rien de tel. Donc, nous allons définir une variable. Nous allons le définir égal à un objet, et cet objet devra posséder une propriété appelée couleur d'arrière-plan. Juste comme ici. Rappelez-vous, nous devons le faire dire exactement la couleur de fond. Sinon, html ne comprendra pas à quelle propriété CSS nous essayons d'accéder, et nous allons mettre cette couleur de point. J' ai parlé de ce point il y a quelques conférences, plus tôt dans le cours. Si vous ne comprenez pas ce stott nouveau MDMS et une grande documentation, il y a des choses géniales sur Google. sont de grands articles honnêtement écrits sur ce point Cependant, ànos fins, nos fins, ce point fait référence à n'importe quoi dans l'instance de vue, tout ce que nous pourrions accéder en tapant point d'application quelle que soit la couleur de point d'application, disons à l'intérieur de notre vue, instance à l'intérieur de toutes les propriétés ou méthodes calculées ou ce que vous avez ce point accède aux valeurs à l'intérieur de notre instance de vue. Et il peut accéder à ce point et je dis instance et pas seulement un objet de données, parce que nous pouvons réellement accéder à ce style de la même manière en tapant, euh, ce style de point dans, disons, une méthode ou un autre propriété calculée. Ok, donc ce point fait référence à toutes les données que nous avons à l'intérieur de l'application ou de n'importe quelle méthode. Vous pouvez également faire référence à bascule avec ce point bascule vers la droite. Ok, alors ajoutons une capacité de 2e 1 appelée. Assurez-vous que c'est l'opacité et faites cette luminosité de point. Rappelez-vous, nous devons faire correspondre les données, pas la capacité des étoiles, parce que cela n'existe pas. OK, on va faire un retour de style. retours d'objet n'aiment pas que vous ayez vu dans les diapositives les retours ont fait deux fois deux, ce qui renvoie juste un ancien nombre ordinaire. Les retours peuvent également renvoyer une variable locale variable comme un objet de style. droite. Donc, nous retournons l'objet de style. C' est que tu pourrais revenir. Tu pourrais le faire comme si c'était bien, euh que certaines personnes préféreraient. Je pense juste que c'est un peu plus explicite et et je l'aime mieux, Mais vous pouvez retourner juste l'objet lui-même si vous voulez que eso affaiblir à nouveau. Comme je l'ai dit, nous pouvons accéder aux propriétés de l'ordinateur avec le point d'application Nom de la propriété de l'ordinateur, Donc le style de point d'application Vous pouvez voir qu'il retourne un objet avec la couleur de fond jaune et l'opacité d'un. Oui, parce que notre luminosité est réglée orteil un. Lorsque le Lorsque les instances ont créé l'instance de vue, je dois dire est créée et vous pouvez voir que c'est l'objet Cet objet ici est exactement le même que cet objet ici. Donc ce qu'on va faire, c'est qu'on va juste remplacer ce style v bine par du style. Droit ? Et la vue va automatiquement connaître ce style Eh bien, c'est Ah, c'est une directive de vue. Donc, la valeur de celui-ci doit être quelque part dans l'instance de vue, non ? Et donc il regarde dans les données et dit, OK, OK, ce n'est pas dans les données sur la couleur. Luminosité connaît un style qu'il a regardé à travers les ordinateurs et dit, OK, j'ai trouvé le style. Qu' est-ce que ce retour maintenant ? C' est un La prochaine chose dont je veux parler est une facette très, très importante des propriétés calculées. Ok, donc si on fait la couleur des points de l'application, disons agir jusqu'à la luminosité. D' accord, si je peux épeler, euh est égal à un droit ? Et si on le change ici, j'ai la luminosité est réglée à 0.54 maintenant. OK, si nous regardons le style point ap, il est également réglé sur 0.54 Nous le changeons à nouveau. Regardez la luminosité point ap 0.77 au style point. La propriété calculée se met automatiquement à jour en raison de la magie de l'utilisation. Ce qui se passe dans la vue d'arrière-plan sait qu'il regarde auto références, je devrais dire à d'autres données dans cette vue. Instance. Donc, il dit Ok, cette couleur sombre et cette luminosité d'arrêt sont tous les deux dans ce calcul. Donc, chaque fois que cette couleur sombre ou cette luminosité d'arrêt, Vous savez , ici, la couleur et la luminosité, chaque fois que ces changement de vue automatiquement re calcule cette propriété. D' accord ? Et c'est pour ça qu'on les appelle des ordinateurs. Ils calculent quand quelque chose dans eux change quoi que ce soit en eux. Cela fait partie des changements d'instance de vue, n'est-ce pas ? C' est une chose vraiment puissante, une chose vraiment cool, et quelque chose qui peut nous être vraiment, vraiment utile, non ? Parce que maintenant vous pouvez voir qu'il fait exactement la même chose. On peut changer la couleur. Il changera également la couleur. Ok, c'est à propos de ça. Avec des ordinateurs. J' espère que ça vous a plu. Je les ai trouvés amusants. Comme je l'ai dit, expérimentez le désordre. Voyez ce qu'il peut faire d'autre avec, hum dans la prochaine conférence, nous allons regarder, Maura a calculé des objets pour créer ah, valeur en pourcentage de notre dim slider. Alors restez à l'écoute pour ça. À la prochaine fois 13. Affichage d'une valeur d'un Displaying: Hé, tout le monde. Et bienvenue à ce qui est en fait la dernière conférence pratique dans la vue Js cours d'artisanat Je suis vraiment fier de vous tous pour avoir fait si loin dans celui-ci, nous allons utiliser une propriété calculée pour montrer ah pourcentage de notre luminosité. On va montrer, tu sais, 50%. Si notre luminosité est égale à 0,5, commençons simplement. Donc, je vais juste taper la luminosité html ordinaire. Il va juste apparaître ici est comme texte, puis à accolades. Et que se passe-t-il si nous tapons juste la luminosité ? Eh bien, il va référencer notre propriété de luminosité ici dans notre objet de données. Et si on déplace le curseur, ça va montrer, tu sais, ça va montrer le pourcentage, mais on veut que ça soit un peu plus joli. Nous ne voulons pas qu'il montre 0.27 Nous voulions montrer 27% pas vrai ? Comment va-t-on faire ça ? Eh bien, nous allons utiliser une propriété calculée pour effectuer des calculs sur notre propriété de luminosité à l'intérieur de nos données. Alors rappelez-vous que nous avons dû utiliser une virgule parce que sont calculés. L' objet est juste qu'il s'agit d'un objet, et nous allons créer une nouvelle propriété d'ordinateur appelée pourcentage dim. OK, et souvenez-vous de toutes les propriétés calculées. Leurs valeurs sont toujours une fonction, et ils doivent toujours retourner quelque chose. Commençons donc par retourner ce point de luminosité fois 100. Ok, alors rappelez-vous que ce DOT fait référence à l'instance de vue elle-même, et il va chercher la luminosité. La luminosité est un, et ça va le multiplier par 100. Donc en ce moment, ça dit que la luminosité est égale à un, et c'est parce que j'ai oublié de le changer ici. Rappelez-vous, nous devons également le changer dans notre modèle. La luminosité n'est pas égale à cela. Nous voulons être égaux à un faible pourcentage. Ok, et maintenant c'est égal à 100 que vous pouvez voir quand on le change, ça change le nombre. Jolie, jolie, plutôt génial, non ? C' est vraiment si facile de faire ça, comme des maths. Ou tu pourrais même faire des maths plus complexes. Tu remarqueras ici que c'est ça qui clignote ces chiffres vraiment bizarres de temps en temps, non ? En raison de choses internes avec JavaScript, je suppose qu'un HTML. Mais il y a un moyen de réparer ça et ce que nous allons utiliser est, ah, fonction appelée non retournée. Toutes les fonctions JavaScript appelées math dot round. Et cela va juste l'arrondir à la valeur entière la plus proche pour que c'est ce qu'il a. Non, il ne peut pas y avoir de décimales, non ? Nous avons donc résolu ce problème. Ça ne montre plus ces bizarres entre les chiffres, et c'est tout. Pour cela, nous pouvons également ajouter, ah, pour cent s'inscrire ici dans le HTML lui-même, et cela montrera pour cent. Nous pourrions ajouter cela dans le JavaScript aussi, en faisant ah, plus signe et un signe pour cent. Maintenant, vous voyez leurs signes de 2%. Mais je préfère ici parce que, vous savez, c'est HTML. C' est dans le HTML où il appartient. Vous pouvez voir qu'il est vraiment si facile de faire quelque chose comme ça, juste en utilisant une propriété calculée pour montrer cela. Très bien, rejoignez-moi à la prochaine conférence pour une conclusion quelques plats clés à emporter sur mes félicitations pour avoir terminé ce cours. Bien joué. Voir que 14. Résoudre et votre projet !: Bienvenue, tout le monde à la conférence finale de la vue Js cours d'artisanat. Félicitations. Vous avez réussi. J' espère que vous sortirez de ce cours en sachant un peu plus sur le cadre qu' auparavant. Et j'espère que vous pourrez voir pourquoi. Je pense que c'est un outil fantastique dans le développement Web maintenant. Ce n'était qu'un cours de crash, une tranche de ce que je pense être les concepts les plus cruciaux dans le cadre de vue. Si vous avez apprécié le framework si vous pensiez que c'était cool, je vous recommande fortement de consulter la documentation de vue Js ainsi que de me suivre ici sur le partage de compétences parce que je cherche à créer un ou voir du contenu connexe. Si la demande est là maintenant, parlons de quelques points à retenir ce que vous devriez maintenant être en mesure de faire avec la vue. Mais au moins, j'espère que vous pouvez créer une instance de vous et faire des données réactives et savoir quoi mettre à l'intérieur du HTML. Afin de faire apparaître ces données, vous devriez être en mesure d'utiliser une augmentation en vue et la directive V quatre pour afficher des listes de données en HTML. Sur la base de ces rayons, nous n'avons pas réellement utilisé cela dans notre application de lampe, mais nous l'avons appris au début de la conférence de rendu de liste du cours. C' est un concept crucial, c'est pourquoi je voulais le couvrir. Vous devriez être en mesure de créer et d'utiliser des méthodes de vue et au-delà. Pour rendre le HTML interactif, vous devriez être en mesure d'utiliser des directives de vue comme VF V Bind et le modèle pour faire parler le HTML à afficher et vice versa. Et vous devriez être en mesure d'utiliser des vues propriétés calculées pour stocker des données de données plus complexes qui nécessitent des calculs et autres. Maintenant, je veux te montrer quelque chose que j'ai créé. C' est un peu plus avancé dans l'application de la lampe. Je l'ai appelé View Dot TV, et ce qu'il fait, c'est pas tout un tas de trucs. C' est en gros que je voulais modéliser une télé. À l'origine, j'allais simplement montrer des images à l'écran et demander à l'instance de vue de contenir choses comme les données de canal et les données de volume. Lorsque vous changez de canal, cela changerait l'image, et les données de volume ne feraient pas grand-chose, sauf afficher le contrôle de volume que vous avez là-bas, mais comme je l'ai connu à dio, je l'ai fait un pas plus loin. J' ai utilisé YouTube I frame un P I afin de créer quelque chose qui hébergerait réellement des flux en direct dans la télévision. Le canal modifie le flux en direct que vous écoutez. C' est tout ça. Vous savez, Le froid bat l'étude de travail orteil à qui sont sur YouTube, tous ces 24 7 flux en direct et le volume alors qu'il apparaît sur l'écran. Il contrôle également le volume du lecteur YouTube. C' est donc une démonstration plus substantielle d'un projet que j'aurais créé si j'avais suivi ce cours. Il utilise un CSS ou avancé que nous avons vu dans la lampe. Je n'ai pas utilisé cette télévision de vue comme exemple parce que je ne voulais pas me concentrer sur le CSS. Il y avait beaucoup de CSS que je devais faire pour rendre cette fonction bien. J' ai également utilisé des ressources de script de travail externes comme YouTube J'encadre un P I, comme je l'ai dit plus tôt, et je ne voulais pas m'enliser trop avec ce genre de choses. C' est pourquoi j'ai créé quelque chose de si simple que nous pourrions concentrer Onley sur la vue dans ses données. Quelque chose que je veux vraiment souligner est que cette application de télévision point de vue utilise Onley concepts que nous avons appris ici dans le cours. Il n'utilise rien d'autre que cette vue sage. Comme je l'ai dit, Advance CSS et jazz externe. Mais Onley concepts que nous avons appris ici dans le cours quand il s'agit de voir et l' application entière est à peu près, vous savez, comme 85 90% vue, donc ils seront un lien vers elle. Vous pouvez vérifier C'est sur le code Panic créé sur Cope dans sera un lien vers elle. Dans les notes de cette conférence, je vous encourage à le vérifier. Vous pouvez regarder le code source. Une houle est juste jouer avec elle. J' aime vraiment l'application. J' en étais content, et maintenant c'est ton tour. Je veux que vous preniez toutes ces nouvelles connaissances de vue et que vous fassiez quelque chose d'aussi créatif que possible. C' est juste sur l'objet avec l'état, non ? Donc, vraiment, n'importe quel appareil électronique que vous connaissez, vous pourriez faire des haut-parleurs que vous pourriez faire même comme une console de jeux vidéo maison données utilisateur. Quel jeu est actuellement en cours d'exécution ? N' importe quoi. Tu sais, Sky est la limite. Pensez grand et créez quelque chose de vraiment cool. Pour ce faire, vous allez vous diriger vers le code point io et créer un compte si vous ne l'avez pas déjà fait . Je vous ai dit de le faire au début du cours, mais si vous décidez de ne pas le faire, c'est maintenant le moment de le faire. C' est ainsi que nous allons partager nos projets à l'intérieur de l'onglet Projets et ressources hors cours. Vous allez juste partager un lien ainsi qu'une vignette si vous choisissez votre projet final . Maintenant, je veux mentionner une chose de plus avant de terminer le cours dans l'onglet Projets et ressources de ce cours, il y a un lien vers un pdf hors de la vue Js cours d'artisanat tt que j'ai fait sur son obtenu tous les concepts que nous avons appris tout au long du cours, ainsi que des exemples sur la façon de les utiliser. Maintenant, je veux prendre un moment pour vous remercier d'avoir suivi ce cours. Cela signifie vraiment beaucoup pour moi que vous vouliez en savoir plus sur ce cadre fantastique que j'aime tant. Si tu laissais un avis, je le ferais tourner. Sois éternellement reconnaissante. J' apprécierais vraiment ça et tout ce que tu as pour moi. Je veux apprendre à mieux enseigner parce que cela vous aide à apprendre. Et c'est vraiment mon objectif dans la création de ce cours et d'autres cours, je m'assure de me suivre aussi bien parce que je vais certainement télécharger plus de cours pour partager des compétences. Je me suis tellement amusé à faire ça. Merci de me rejoindre dans ce cours de crash Js vue. Et j'espère vous voir bientôt dans un futur cours. Merci de me rejoindre.