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.js チュートリアル#」 ##"

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