Quelle est la différence entre les instances et les composants dans vuejs

Différences : 1. L'instance a un point de montage el, mais pas le composant. 2. Dans l'instance, il s'agit de "data:{}", et dans le composant, il s'agit de "data(){return{}}". 3. Les éléments html de l'instance vue sont directement rendus dans la page ; tandis que les éléments html du composant sont définis sur le modèle puis rendus dans la page via des appels.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Quand j'ai écrit les éléments à composant unique et le routage de vue la dernière fois, j'ai pensé à un problème. new Vue({…}) est une instance de Vue, le composant est-il donc une instance de Vue ?

Analyse

Comme je l'ai déjà dit, il existe deux méthodes de développement. L'un est basé sur un navigateur (c'est-à-dire que main.js est introduit directement dans le script) et l'autre est une méthode de développement basée sur la ligne de commande construite par vue-cli (un projet vue

Parce que la plupart des projets réels). Utilisez la méthode de développement en ligne de commande, nous parlons donc toujours de composants dans la méthode de développement en ligne de commande.

Dans le main.js du projet

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//这里就是一个vue实例
  el: '#app',//el挂载点
  router,
  components: { App },
  template: &#39;<App/>&#39;,//此处引根组件
})

Et dans le code App.vue

<template>
  <div id="app">
       <div class="welcome">welcome! {{name}}, you are {{age}} years old</div>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: &#39;App&#39;,
  data:function(){
    return {
      name:&#39;wangyue&#39;,
      age:&#39;25&#39;
    }
  },
  }
</script>

<style>
  .welcome{
    font-size: 32px;
    color: blueviolet;
  }
</style>

Les rendus sont les suivants Vous pouvez ignorer ceux sous le texte violet Voici le contenu affiché par mon routage.

Agrandir et comparer

La différence entre les instances et les composants dans vuejs

Les données du composant sont une fonction et le non-composant est une donnée :{}, Le composant ne avoir l'option de point de montage el. Selon le site officiel, les composants sont des instances Vue réutilisables avec un nom.

Dans un projet vue, il n'y a généralement qu'une seule instance VUE définie dans main.js, et les autres sont des instances de composants vue. En fait, ce sont toutes des instances de Vue, mais pour faciliter la différenciation, je viens de le dire. En plus du composant racine, les composants contiennent de nombreux petits composants.

C'est-à-dire :

1. L'instance de vue a el pour spécifier l'élément de montage, mais pas le composant, car le composant est également rendu sur la page de rendu en l'appelant, et est rendu directement en appelant le nom du composant ;

2. La forme de l'attribut de données de l'instance et du composant est différente

L'attribut de données dans l'instance vue : data:{"name":"aa","age":18}, l'attribut de données dans le composant : data(){ return{"name":"aa","age": 18} },

3. Les éléments html de l'instance vue sont directement rendus dans la page, tandis que les éléments html du composant sont définis sur le modèle puis rendu sur la page via des appels

Recommandations associées : "

Tutoriel vue.js

"

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!