vuejs のインスタンスとコンポーネントの違いは何ですか

違い: 1. インスタンスには el マウント ポイントがありますが、コンポーネントにはありません。 2. インスタンスでは「data:{}」、コンポーネントでは「data(){return{}}」です。 3. vue インスタンスの html 要素はページに直接レンダリングされますが、コンポーネントの html 要素はテンプレート上で定義され、呼び出しを通じてページにレンダリングされます。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

前回vueの単体コンポーネント項目とルーティングを書いたときに問題を思いつきました。 new Vue({…}) は Vue インスタンスなので、コンポーネントは Vue インスタンスですか?

分析

前述したように、開発方法は 2 つあります。 1 つはブラウザ ベース (つまり、main.js がスクリプトに直接導入される) であり、もう 1 つは vue-cli (vue プロジェクト) によって構築されたコマンド ライン ベースの開発方法です。実際のプロジェクトは大規模です。一部のプロジェクトではコマンド ライン開発手法が使用されているため、コンポーネントについては引き続きコマンド ライン開発手法で説明します。

プロジェクトの main.js 内

// 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;,//此处引根组件
})

そして 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>

レンダリングは次のとおりです。下のレンダリングは無視してかまいません。紫色の文字、ここが私のルートで表示される内容です。

#拡大して比較

##vuejs のインスタンスとコンポーネントの違い

コンポーネントのデータは関数であり、非コンポーネントはデータです:{}、

コンポーネントには el マウント ポイント オプションがありません。公式 Web サイトによると、コンポーネントは名前が付いた再利用可能な Vue インスタンスです。

vue プロジェクトでは、通常、main.js で定義される VUE インスタンスは 1 つだけで、残りは vue コンポーネント インスタンスです。実際にはすべて Vue インスタンスですが、区別するためにそう言っただけです。コンポーネントには、ルート コンポーネントに加えて、多くの小さなコンポーネントがあります。

つまり:

1. vue インスタンスにはマウント要素を指定するための el がありますが、コンポーネントにはそれがありません。コンポーネントはレンダリング ページでも呼び出され、コンポーネント名;

2. インスタンスとコンポーネントのデータ属性の形式は異なります。

vue インスタンスのデータ属性: data:{"name":"aa","age" :18},

コンポーネント属性のデータ: data(){ return{"name":"aa","age":18}},

3. の html 要素vue インスタンスはページに直接レンダリングされますが、コンポーネントの html 要素はテンプレートで定義されており、それを呼び出すことでページにレンダリングされます。

関連する推奨事項: 「

vue.js チュートリアル#」 ##"

以上がvuejs のインスタンスとコンポーネントの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。