Tutoriel Vue.js: développeur débutant à frontal-js tutoriel-php.cn

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

William Shakespeare

Libérer： 2025-03-09 00:04:17

original

578 Les gens l'ont consulté

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?

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

Tous
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>

Copier après la connexion

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