Je viens d'installer Vue et j'ai suivi quelques tutoriels pour créer un projet en utilisant le template webpack vue-cli. Lorsqu'il crée le composant, je remarque qu'il lie nos données à l'intérieur de ce qui suit:
export default {
name: 'app',
data: []
}
Alors que dans d'autres tutoriels, je vois des données liées à partir de:
new Vue({
el: '#app',
data: []
)}
Quelle est la différence et pourquoi semble-t-il que la syntaxe entre les deux est différente? J'ai du mal à faire fonctionner le code `` nouveau Vue '' à partir de la balise que j'utilise depuis l'App.vue généré par vue-cli.
vue.js
vue-component
vue-cli
rockzombie2
la source
la source
Réponses:
Lorsque vous déclarez:
Il s'agit généralement de votre instance racine de Vue dont le reste de l'application descend. Cela se bloque sur l'élément racine déclaré dans un document html, par exemple:
L'autre syntaxe déclare un composant qui peut être enregistré et réutilisé plus tard. Par exemple, si vous créez un composant de fichier unique comme:
Vous pouvez ultérieurement l'importer et l'utiliser comme:
Assurez-vous également de déclarer vos
data
propriétés en tant que fonctions, sinon elles ne seront pas réactives.la source
main.js
- n'a pas vraiment d'importance, sachez simplement que c'est le point de départ de l'application, commeint main()
dans lesComponent.vue
fichiers C. utiliseront toujours laexport default { ... }
syntaxe. Les documents font un bon travail en expliquant les différences entre les composants, global , local et fichier uniqueexport default
est utilisé pour créer un enregistrement local pour le composant Vue.Voici un excellent article qui explique plus sur les composants https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
la source
Le premier cas (
export default {...}
) est la syntaxe ES2015 pour rendre une définition d'objet disponible pour utilisation.Le deuxième cas (
new Vue (...)
) est la syntaxe standard pour instancier un objet qui a été défini.Le premier sera utilisé dans JS pour amorcer Vue, tandis que l'un ou l'autre peut être utilisé pour créer des composants et des modèles.
Voir https://vuejs.org/v2/guide/components-registration.html pour plus de détails.
la source
Chaque fois que vous utilisez
et un objet est
ce qui précède, vous pouvez importer n'importe où en utilisant
import
oumodule.js
et là, vous pouvez utiliser un objet. Ce n'est pas une restriction selon laquelle un objet sera un objet, mais il peut également être une fonction, une classe ou un objet.Quand tu dis
comme tu as dis
Ici, vous lancez un objet de la classe Vue.
J'espère que ma réponse explique votre question en général et plus explicitement.
la source