腳手架檔案結構

├── node_modules 
	├── public
	│   ├── favicon.ico: 頁籤圖示
	│   └── index.html: 主頁面
	├── src
	│   ├── assets: 存放靜態資源
	│   │   └── logo.png
	│   │── component: 存放元件
	│   │   └── HelloWorld.vue
	│   │── App.vue: 彙總所有元件
	│   │── main.js: 入口檔案
	├── .gitignore: git版本管制忽略的配置
	├── babel.config.js: babel的配置檔案
	├── package.json: 應用包配置檔案 
	├── README.md: 應用描述檔案
	├── package-lock.json：包版本控制檔案
 

ref屬性

1. 被用來給元素或子元件註冊引用資訊（id的替代者）
2. 應用在html標籤上獲取的是真實DOM元素，應用在元件標籤上是元件例項物件（vc）
3. 使用方式：
    1. 打標識：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
    2. 獲取：```this.$refs.xxx```

//獲取dom元素

<h1 v-text="msg" ref="title"></h1>

mounted() {
    console.log("ref=>",this.$refs.h1)
}
 

//獲取元件的vue compone物件

<todoHeader :addTodo="addTodo" ref="todoHeader"></todoHeader>

mounted() {
    console.log("ref=>",this.$refs.todoHeader)
}

props配置

1. 功能：讓元件接收外部傳過來的資料
2. 傳遞資料：```<Demo name="xxx"/>```
3. 接收資料：
    1. 第一種方式（只接收）：```props:['name'] ```
    2. 第二種方式（限制類型）：```props:{name:String}```
    3. 第三種方式（限制類型、限制必要性、指定預設值）：

        ```js
        props:{
           name:{
           type:String, //型別
           required:true, //必要性
           default:'老王' //預設值
           }
        }
        ```
    > 備註：props是隻讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中一份，然後去修改data中的資料。