第三章 實作方法
3.2 重構既有網頁 (Vue 版本元件)
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.2
重構既有網頁 (Vue 版本元件)
3.2.1 JSAV 元件
有 Angular 版本的 JSAV 元件後嘗試將轉換到 Vue 框架上，首先將 JSAV 相關的函 式庫載入到 App Component，如圖3.21。在 template 的部份和 Angular 差異不大，只是 在符號寫法上有所不同，樣式內容還是和官方文件上相同，圖如3.22。
圖 3.21: 引入相關函式庫
圖 3.22: JSAV 樣板
在 App Component 中的客製化元素 BinarySearch 透過屬性綁定，將陣列大小用動態 方式傳入子元件中，如圖3.23。子元件接收到大小數值後產生一個排序好的陣列，再 執行 Binary Search 演算法。Angualr 和 Vue 在 Binary Search 基本上都是使用相同的程式 碼，主要差別在語法差異和元件的生命週期 (lifecycle) 命名的不同，我將 Angular 演算 法放在 ngAfterViewInit() 這個方法中，當畫面都做完初始化後執行。在 Vue 中則是放在 mounted() 方法中。
Angular 和 Vue 在實作元件上，演算法的程式碼差異不大，主要是在語法上的差異，
之後可以朝向自動化轉換的方式產生不同框架的程式碼。
圖 3.23: Binary Search 客製化元件
‧
以 Angular Footer 元件為基礎，轉換至 Vue 框架之下。在 Template 的部分大致相同，
只有在元素條件判斷的寫法上與變數綁定的部份上有所差異。在 Angular 做條件判斷時 可以使用 *ngIf 來決定是否要顯示這個元素，若為 True 則顯示反之則不顯示。在 Vue 上若要做條件判斷則是使用 v-if，在概念上是相同的，就只是語法使用上的差異。在變 數綁定方面，Angular 使用 {{variable}} 的形式表示，而 Vue 是以 v-bind=”variable” 的形 式做表示。
3.2.3 Slide Show 元件
同樣以 Angular 版本元件為基礎來轉換至 Vue 版本元件，在傳遞陣列資料到子元件 的寫法 Angular 是寫為 [arrdatas]=”[data1,data2,...]” 在 Vue 則是寫為:arrdatas=”[data1,data2-,...]”，在傳遞資料的寫法上有所差異。在函式的寫法上也有很大的差異，在 Angular 如果要建立一個函式，可以直接在 class 中宣告一個 myfunction(props){ ... }，而在 Vue 中函式必須要放在 class 的 methods 欄位中，且宣告方法必須寫為 myfunction: function (props){ ... }。在事件處理上如 click 事件，在 Angualr 寫法為 <a (click)=”myfunction()”>
</a>，而在 Vue 寫為 <a v-on:click=”myfunction()”></a>。
3.2.4 JSON 表格元件
以 Angular 版本的 JSON 表格元件元件為基礎轉換至 Vue 版本元件。在 template 部 分語法上幾乎都相同，Angular 與 Vue 的 template 都是以 HTML 語法作為基礎並加上自 己的 Directive。我們只需要將這些 Directive 的語法稍做修改變就能夠完成 Vue 元件的 template，例如在 Angular 使用的是 ngFor 的 Directive，在 Vue 就必須要修改為 v-for。
3.2.5 透過地圖輸入方式呈現郵遞區號
以 Angular 版本的透過地圖輸入方式呈現郵遞區號元件為基礎轉換至 Vue 版本元 件。由於在製作 Angular 元件內的方法時，主要還是使用 JavaScript 語法，所以也能 夠在 Vue 中的 Script 做使用。主要的差異只是元件的時間週期命名差異，例如在這 邊我們將 Angular 中的初始化時間週期方法 ngOnInit() 對應到 Vue 時間週期方法中的 beforeMount()；在 Angular 中使用的時間週期方法 ngAfterViewInit() 對應到 Vue 中的時 間週期方法 mounted()。只需要將時間週期做好對應，並將參數綁定的語法稍做修改就 可以將 Angular 版本透過地圖輸入方式呈現郵遞區號元件製作為 Vue 版本透過地圖輸入 方式呈現郵遞區號元件。
DOI:10.6814/NCCU201900017
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.2.6 台灣行政區資料元件
此章節與3.2.5章節同樣是地圖的應用。同樣是由 Angular 版本的透過地圖輸入方 式呈現郵遞區號元件為基礎轉換至 Vue 版本元件。除了需要修改 Angular 與 Vue 時間 週期的差異，我們也需要修改參數綁定的部分。台灣行政區資料元件在使用上會接 收一個稱為 info 的參數，這個 info 參數是一個陣列的形式，陣列中的第一個參數會 接收一個 JSON 檔案，這個 JSON 檔案內容為縣市對應的資料。陣列中的第二個參數 為 JSON 檔案資料的意義，以此範例來說我們在 info 第一個參數傳入台灣各縣市人 口的資料，info 第二個參數傳入人口數的標題。在地圖上就能夠呈現各縣市人口數的 資訊。Vue 與 Angular 在傳遞參數語法上也略有差異，以此元件為例，在使用 Angular 元件語法為 <app-populationmap [info]=”[’/assets/populations.json’, ’ 人口數’]”>< /app-populationmap>。在使用 Vue 元件語法為 <app-populationmap :info=”[’/populations.json’,
’ 人口數’]”>< /app-populationmap>。主要差在輸入參數部分的語法差異。