Explication détaillée pour les novices qui apprennent Vue

Cette fois, je vais vous apporter une explication détaillée de l'apprentissage de vue pour les novices. Quelles sont les choses auxquelles les novices doivent prêter attention lors de l'apprentissage de vue Ce qui suit est un cas pratique, jetons un coup d'œil.

L'un des meilleurs frameworks pour vue à l'heure actuelle

Tout d'abord, nous suivons la documentation du site officiel

#Attention particulière

Vue. js ne prend pas en charge IE8 et sa version suivante, car Vue.js utilise des fonctionnalités ECMAScript 5 que IE8 ne peut pas émuler. Vue.js prend en charge tous les navigateurs compatibles ECMAScript 5.

Journal des modifications
Le journal des modifications de chaque version peut être trouvé sur GitHub.

npm

Il est recommandé d'utiliser l'installation de NPM lors de la création de grandes applications avec Vue.js. NPM fonctionne bien avec les packagers de modules tels que Webpack ou Browserify. Vue.js fournit également des outils de support pour développer des composants à fichier unique.

# Dernière version stable
$ npm install vue

Outil de ligne de commande CLI

Vue.js fournit un outil de ligne de commande officiel qui peut être utilisé pour créer rapidement de grandes application d'une seule page. L'outil fournit une configuration d'outil de construction prête à l'emploi, apportant un processus de développement frontal moderne. Cela ne prend que quelques minutes pour créer et lancer un projet avec un rechargement à chaud, une vérification statique lors de la sauvegarde et une configuration de build prête pour la production :

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project
$ npm install
$ npm run dev

Note spéciale !!!!!!

Le

L'outil CLI suppose un certain niveau de familiarité avec Node.js et les outils de construction associés. Si vous êtes nouveau sur Vue, nous vous recommandons fortement de lire le guide sans outil de construction et de vous familiariser avec Vue elle-même avant de vous plonger dans la CLI.

Après avoir suivi le processus
il y aura un fichier associé dossier

.babelrc
est la configuration de babe, notre code est es6, compilé en es5 via les préréglages de babe
les préréglages sont des préréglages

Introduction au fichier de projet
la construction et la configuration sont liées à la configuration du webpack
les node_modules sont installés par nos soins via npm. bibliothèque de codes dépendante
Le répertoire src est l'endroit où nous stockons le code source du projet. Tout le code que nous développons sera placé dans le répertoire src

Le dossier statique est l'endroit où les ressources de fichiers tiers sont stockées.

//.editorconfig 编辑器的配置charset = utf-8 //编码indent_style = space //缩进的风格indent_size = 2 //缩进的大小是两个end_of_line = lf //换行符的风格insert_final_newline = true //创建一个文件,会自动插入新行trim_trailing_whitespace = true //会自动移除行尾的多余空格

.eslintignore : Ignorer la vérification de la syntaxe

Après avoir compris le fichier du projet, comprenons comment le code actuel s'exécute
index.html est le fichier d'entrée
index
Nous savons que ses js et css seront insérés dynamiquement dans cette page

Regardez la structure dom,
Il n'y a qu'une seule balise APP sous le corps

Il s'agit en fait d'un composant vue
L'entrée JS de notre page est en fait main.js
Il y a une ligne rouge marquée ici C'est un problème de compilateur Il peut être reconnu en l'ajustant. à la syntaxe es6

import Vue from 'vue'import Vue from './App'new vue ({  el: 'body'
  components:{App}
})

Nous pouvons voir que ce fichier d'entrée s'appuie sur deux
bibliothèque vue, js
et l'une est App.vue, qui peut être simplement écrite directement comme App

Ensuite, instanciez une vue via la nouvelle Vue
el:'body' est un point de montage, monté sur un corps
composants :{App} enregistre un plug-in d'application actuel. Cette syntaxe est une abréviation es6. de , correspondant à es5 App:App peut simplifier notre écriture grâce à l'écriture es6 Nous savons que cette application correspond à cette app.vue

Alors jetons un œil à app.vue

qui. est divisé en

Raccourci de formatage automatique ctrl+alt+L

Jetez maintenant un œil à hello.vue
La structure du code msg correspond à ces données Pour msg
, nous définissons un data fun
dans la définition de vue. Il peut renvoyer un obj Toutes les valeurs de cet obj seront ajoutées à ses dépendances, puis le msg sera accessible dans le modèle. Vous pouvez accéder au msg dans ces données via le msg dans le modèle.

export default C'est le sucre syntaxique fourni par vue Vous pouvez définir un composant via obj. App.vue. Bonjour de'./components/hello'

C'est-à-dire que l'objet dans les données dans hello.vue sera attribué à ce bonjour

C'est-à-dire pour dire, la clé des composants C'est bonjour et sa valeur est la valeur par défaut d'exportation

而在components{
Hello相当于Hello:Hello
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres connexes. articles sur le site PHP chinois !

Lecture connexe :

Entrée frontale vers CSS3

Comment résoudre le piratage CSS d'IE11

Comment axios crée un client de requête HTTP basé sur Promise

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!