#### vue元件 ##### fetch請求元件 `fetch` > XMLHttpRequest是一個設計粗糙的API, 配置和呼叫方式非常混亂,而且基於事件的非同步模型寫起來不友好,相容性不好. ```vue 獲取影片資訊

• {{ data.name }}

  

``` ##### axios請求元件 ```vue 正在熱映

• {{ data.name }}

  

``` #### vue計算屬性 ```go /* 複雜邏輯,模板難以維護 1. 基礎例子 2. 計算快取 VS methods - 計算屬性是基於他們的依賴進行快取的. - 計算屬性只有在他的相關依賴發生改變時才會重新求值 3. 計算屬性VS watch - v-model */ ``` `Example1` ```vue {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}

計算屬性:{{ getMyName }}

普通方法:{{ getMyNameMethod() }}

也需要計算結果

計算屬性:{{ getMyName }}

普通方法:{{ getMyNameMethod() }}

``` `Example2` ```vue

• {{ data }}

``` #### vue元件 > 元件（Component）是 Vue.js 最強大的功能之一。 > > 元件可以擴充套件 HTML 元素，封裝可重用的程式碼。 > > 元件系統讓我們可以用獨立可複用的小元件來構建大型應用，幾乎任意型別的應用的介面都可以抽象為一個元件樹：  ##### 全域性元件 `所有例項都能使用全域性元件` ```vue ``` ##### 區域性元件 `我們可以在實力選項中註冊區域性元件,這樣元件只能在這個例項中使用` `Example1` ```vue ``` ##### 元件編寫方式與Vue例項的區別 ```go /* 1. 自定義元件需要有一個root element 2. 父子元件的data是無法共享的 3. 元件可以有data,methods,computed.., 但是data必須是一個函式