recherche

Maison >interface Web >js tutoriel >Tutoriel Vue.js: développeur débutant à frontal

Tutoriel Vue.js: développeur débutant à frontal

William Shakespeare
William Shakespeareoriginal
2025-03-09 00:04:17580parcourir

Ce cours vous apprendra les concepts fondamentaux dont vous avez besoin pour commencer à créer des applications avec Vue.js.

Tutoriel Vue.js: développeur débutant à frontal pour qui est ce cours gratuit pour?

    Aglèges complets qui veulent être des développeurs Web
    • des développeurs expérimentés qui veulent explorer quelque chose d'excitation
    • Long est le cours?
    • Ce cours dure 4 heures 22 minutes, et il est divisé en 35 leçons au total. Vous constaterez que c'est une excellente ressource à laquelle vous reviendrez souvent.

Dans ce cours, vous apprendrez pourquoi Vue.js est un excellent choix pour un cadre frontal, et vous découvrirez comment l'utiliser en détail.

Vous commencerez par construire les composants Vue les plus simples et apprendre à utiliser des fonctionnalités de base telles que la liaison des données, les accessoires, les événements et les propriétés calculées.

Ensuite, vous construirez ces connaissances étape par étape avec des projets pratiques apprenant à utiliser la Vue CLI, les formulaires, les observateurs et les événements personnalisés.

Vous maîtriserez également les concepts clés comme le routeur Vue et l'API de composition. À la fin de ce cours, vous aurez confiance en utilisant Vue.js pour tous vos projets de développement frontal.

Ce que vous apprendrez

Fondamentaux de Vue sans outils de création ou chaînes d'outils

Créer des applications, définir et utiliser des options, organiser des applications dans les composants
  • Données réactives
  • Comment gérer les entrées des utilisateurs et créer des événements personnalisés
  • Manipuler le style, créer des propriétés calculées
  • Définir des objets qui regardent vos données pour les modifications
  • Comment créer des applications à une page à l'aide du Vue Router
  • comment utiliser l'API compose
    • Vue. Sans aucune chaîne d'outils
    • en utilisant le vue cli
    • en travaillant avec des données
    Création et en utilisant des événements personnalisés
  • Tous
    • Les caractéristiques les plus importantes de Vue.js
    • pour aider, le référentiel Github du développeur Vue.js: débutant pour le développeur frontal contient le code source pour chaque leçon et le projet d'échantillon terminé qui a été construit tout au long du cours. 
    • 1. Ce que vous apprendrez
  • Regardez la leçon vidéo [0:00:00] ↗

Obtenez une introduction au cours et un aperçu de ce que vous construirez.

2. Vue.js sans chaîne d'outils pour commencer avec Vue

Regardez la leçon vidéo [0:02:31] ↗

Vue.js est le cadre UI le plus accessible, en particulier sans utiliser de coups d'outils. Code

Voici le code source complet pour un minimum de Vue.
<!DOCTYPE html><br><html lang="en"><br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>Vue Basics</title><br>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"><br>    <script src="https://unpkg.com/vue@3"></script><br></head><br><body><br>    <div id="content" class="container"><br>        <h1>{{ pageTitle }}</h1><br>        <p>{{ content }}</p><br>    </div><br><br>    <script><br>        Vue.createApp({<br>            data() {<br>                return {<br>                    pageTitle: 'Hello, Vue',<br>                    content: 'Welcome to the wonderful world of Vue'<br>                };<br>            }<br>        }).mount('#content');<br>    </script><br></body><br></html><br>

Utilisation de boucles pour générer du contenu

Regardez la leçon vidéo [0:10:51] ↗

Les collections sont quelques-uns des types de données les plus courants que vous travaillerez au sein de votre application. Dans cette leçon, vous apprendrez à utiliser l'événement Created () Lifecycle pour charger les données

Regardez la leçon vidéo [1:41:51] ↗

le this , et cela complique comment nous arrivons à nos propriétés mondiales. Au lieu de cela, nous utiliserons les fonctionnalités de fourniture et d'injecte de Vue pour accéder à nos objets globaux.

Accéder aux accessoires et aux fonctions de routeur

Leçon vidéo [3:48:18] ↗

L'API de composition modifie la façon dont nous accédons ... tout, y compris les accessoires et l'itinéraire / router. Vous apprendrez à accéder à ceux de cette leçon.

Données de liaison et en travaillant avec les formulaires

Regardez la leçon vidéo [3:54:58] ↗

Dans cette leçon, vous apprendrez comment lier les données aux formulaires dans les composants de configuration. C'est facile.

Définition des valeurs calculées et regardées

Regardez la leçon vidéo [4:06:00] ↗

Vous pouvez définir des valeurs calculées et regardées dans les composants de configuration. Vous apprendrez comment dans cette leçon.

Implémentation de la fonction de suppression

Regarder la leçon vidéo [4:16:18] ↗

Nous terminerons l'interface utilisateur de gestion en offrant des fonctionnalités de suppression.

CONCRIPLENCE

Regarder la vidéo [4:20:20:42] ↗

vue.js est mon cadre d'interface utilisateur préféré. Et ne vous méprenez pas - réagir, angulaire, et tous les autres cadres font très bien leur travail. Mais il y a quelque chose de différent dans Vue. Il est très facile de commencer, et il manque beaucoup de règles bancales qui semblent affliger d'autres cadres.

J'espère que maintenant, vous avez une bonne compréhension des fondamentaux de Vue, et j'espère que vous continuerez à l'utiliser dans vos projets actuels et futurs.

En savoir plus

En savoir plus dans la documentation officielle de Vue ou le portail de la communauté Vue.

Vue Plugins and Templates

CodeCany, Envato, et templates

TEMEFOREST est des sources fantastiques pour les plugins et les modèles VUE. Ils peuvent vous aider à gagner du temps, réduire les coûts de développement et livrer des projets à temps. Tutoriel Vue.js: développeur débutant à frontal

Vue Admin Templates sur Themeforest Tutoriel Vue.js: développeur débutant à frontal

Vue Plugins sur Codecananyon Tutoriel Vue.js: développeur débutant à frontal

Vue webtemplates sur les éléments Envato Tutoriel Vue.js: développeur débutant à frontal

Thème

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

angular Resource define for continue using Event delete JS this input github ui everything Access router Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utopie DHTML: conception Web moderne à l'aide de JavaScript & DomArticle suivant：Utopie DHTML: conception Web moderne à l'aide de JavaScript & Dom

Articles Liés

Voir plus