Vueコンポーネントの作成方法と使用方法を説明する記事

       var com1 = Vue.extend({
// テンプレートプロパティは、コンポーネントが表示する HTML 構造を指定します。テンプレート: '<h3>これは Vue.extend を使用して作成されたコンポーネントです</h3>'
            })

  Vue.component('myCom1', com1)

            Vue.component('mycom2', {
                テンプレート: '<div><h3>これは Vue.component を使用して直接作成されたコンポーネントです</h3>
<span>123</span></div>'
            })

<テンプレートid="tmpl">
            <div>
                <h1>これはテンプレート要素を通じて外部的に定義されたコンポーネント構造です</h1>
                <h4>使いやすいです、良いです!</h4>
            </div>
        </テンプレート>

   Vue.component('mycom3', {
        テンプレート: '#tmpl'
    })

<テンプレート>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li>
    </ul>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "ユーザー"、
  小道具: {
    users: { //親コンポーネント内の子タグのカスタマイズされた名前 type: Array,
      必要: true
    }
  }
}
</スクリプト>

<スタイルスコープ>
 li{
   リストスタイルの位置: 内側;
 }
</スタイル>

<テンプレート>
  <div id="アプリ">
    <img alt="Vue ロゴ" src="./assets/logo.png">
    <Users v-bind:users="users"> </Users>
  </div>
</テンプレート>

<スクリプト>
「@/components/users」からユーザーをインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  データ（）{
    戻る {
      ユーザー: ['西安郵電'、'西安石油'、'西北政法'、'西安産業'、'西安金融']
    }
  },
  コンポーネント:
    ユーザーの皆様、
  }
}
</スクリプト>

<テンプレート>
  <ヘッダー>
    <h1 @click="changeTitle">{{ タイトル }}</h1>
  </ヘッダー>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前:「息子」
  データ（）{
    戻る {
      タイトル: 「Vue.js デモ」
    }
  },
  メソッド: {
    タイトルを変更する(){
      this.$emit('titleChanged','西安郵電大学');
    }
  }
}
</スクリプト>

<スタイルスコープ>
 h1{
   背景色: 緑黄色;
 }
</スタイル>

<テンプレート>
  <div id="アプリ">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{{ タイトル }}</h2>
  </div>
</テンプレート>
<スクリプト>
Son を "@/components/Son" からインポートします。
エクスポートデフォルト{
  名前:「父」
  データ（）{
    戻る {
      タイトル: 「渡されるのは値です」
    }
  },
  メソッド: {
    タイトルを更新(e){
      this.title = e
    }
  },
  コンポーネント:{
    息子、
  }
}
</スクリプト>