table des matières
Introduction à Vue
Vue (prononcé / vjuː /, similaire à view) est un cadre progressif pour la création d'interfaces utilisateur.
Ce tutoriel est basé sur la version 2.x. L'
apprentissage de Vue nécessite des connaissances en HTML, CSS et JavaScript.
Installation de Vue
Le moyen le plus simple d'utiliser Vue.js est de le télécharger directement et de l'importer avec la balise script.
Téléchargement de vue.js
Téléchargement de la version de l'environnement de développement : inclut le mode d'avertissement complet et de débogage.
Téléchargement de la version de l'environnement de production : taille et vitesse optimisées
<script src="vue.js" type="text/javascript"></script>
CDN
Pour le prototypage ou l'apprentissage, vous pouvez utiliser la dernière version comme ceci:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Pour les environnements de production, nous vous recommandons de créer un lien vers un numéro de version et un fichier de construction clairs pour éviter les dommages inattendus causés par la nouvelle version:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
Si vous utilisez des modules ES natifs, il existe également un fichier de construction compatible avec les modules ES:
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>
Vous pouvez parcourir le code source du package NPM sur cdn.jsdelivr.net/npm/vue.
Vue est également disponible sur unpkg et cdnjs (la mise à jour de la version de cdnjs peut être légèrement retardée).
Assurez-vous de bien comprendre les différentes versions de build et d'utiliser la version de l'environnement de production dans votre site publié, remplacez vue.js par vue.min.js. Il s'agit d'une version plus petite qui peut apporter une expérience de vitesse plus rapide que dans l'environnement de développement.
NPM
L'installation de NPM est recommandée lors de la création de grandes applications avec Vue [1]. NPM fonctionne bien avec les packers de modules tels que webpack ou Browserify. Dans le même temps, Vue fournit également des outils de support pour développer des composants à un seul fichier.
# 最新稳定版
$ npm install vue
Outil de ligne de commande (CLI)
Vue fournit une CLI officielle pour créer rapidement un échafaudage complexe pour les applications à page unique (SPA). Il fournit des paramètres de construction avec batteries pour les flux de travail frontaux modernes. Cela ne prend que quelques minutes pour être opérationnel avec le rechargement à chaud, la vérification des peluches lors de l'enregistrement et les versions de compilation disponibles dans l'environnement de production. Pour plus de détails, veuillez vous référer à la documentation Vue CLI.
L'outil CLI suppose que l'utilisateur a un certain niveau de compréhension de Node.js et des outils de construction associés. Il n'est pas recommandé aux novices d'utiliser directement vue-cli, surtout si vous n'êtes pas familier avec les outils de construction basés sur Node.js.
cas helloworld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
{
{ message }}
</div>
<script type="text/javascript">
var app = new Vue ({
el: '#app',
data: {
message: 'Hello Vue!',
}
})
</script>
</body>
</html>
Hello Vue!
Nous avons créé avec succès la première application Vue! Cela ressemble beaucoup au rendu d'un modèle de chaîne, mais Vue a fait beaucoup de travail dans les coulisses. Maintenant que les données et le DOM sont liés, tout est réactif.
Comment confirmons-nous? Ouvrez la console JavaScript de votre navigateur (ouvrez simplement cette page) et modifiez la valeur de app.message, vous verrez l'exemple ci-dessus mis à jour en conséquence.
Notez que nous n'interagissons plus directement avec HTML . Une application Vue le montera sur un élément DOM (#app pour cet exemple), puis le contrôlera entièrement. Ce HTML est notre entrée, mais le reste se produira dans l'instance de Vue nouvellement créée.