Vueタイプファイルの基本構造の詳細------template、export、コンポーネントのマウント、および一部の値の呼び出し方法

VUE基本構造
一、基本構造
vueファイル
vueファイルの基本構造ここでは私が勝手にノックしたコードの内容(参考のみ)コードにコメントがあります

<template>
/*             ，    div  */
	<div>
/*  div         moustache  。
   script               
          。      num  */
	  <div class='name'>{{num}}</div>
	  <input :value='content'/>
	</div>
</template>
/*  sth.vue              export default   */
import sth from './spath/sth.vue'
<script>
  export default {
  /*  component          vue  */
    components: {
  	sth
   }
	data () {
		return {
		/*                     */
			num:10
		}
	},
	methods : {
	/*          template      
	    ,     changevalue      
	 input    value  */
	changevalue(value){}
	},
	computed: {
	}
				}
</script>
<style>
/*         name       */
 .name {
   display：block;
   width:200px;
   height:200px;
}
</style>

以上が1つのVueファイルの基本的な構成の各要素で、次の表で説明します.
要素名
要素の解釈
templateラベル
templateラベルはVueのテンプレートラベルで、vueコンポーネントがマウントされた後に表示される内容で、置換を表示する必要がある内容をこのラベルに書きます.templateの内容は少なくとも1つのDOM要素で包まなければならない(vueのテンプレートにはルートノードが1つしかないため、templateラベル内では、Vueはtempla内のノードである第1層ラベルしか読めないので、現実的なすべての内容を1つのラベルで包まなければならない)
scriptラベル
インタラクティブコンポーネントのインポートを担当するラベルは、さまざまな関数メソッドおよびオブジェクトに転送できます.
export default
デフォルトモジュールをエクスポートするには、オブジェクト内で複数のメソッドを転送して、外部ファイルの導入とコンポーネントのマウントを容易にします.data,methods.computedはexportを外部にエクスポートする方法です.(方法の詳細は複雑なので、これらの方法の詳細は他のブログに載せます)
スタイルラベル
テンプレートコンテンツの要素にcssカスタムスタイル、例えばvueのアニメーションコンポーネントを追加するには、クラス名の追加が使用されます.