## Backbone ### 實驗目的 1. 理解前端框架的路由組件（`router`）的作用 ### 操作步驟 1. 瀏覽器打開[`demos/backbone-demo/index.html`](https://github.com/ruanyf/jstraining/blob/master/demos/backbone-demo/index.html) 2. 點擊頁面上的鏈接，注意瀏覽器 URL 的變化 3. 仔細查看[`js/main.js`](https://github.com/ruanyf/jstraining/blob/master/demos/backbone-demo/js/main.js)的源碼，看懂 Router 組件的使用方式 ## Angular ### 實驗目的 1. 理解 Angular 的雙向綁定機制 ### 操作步驟 1. 瀏覽器打開[`demos/angular-demo/index.html`](https://github.com/ruanyf/jstraining/blob/master/demos/angular-demo/index.html) 2. 在輸入框填入內容，注意頁面變化 3. 查看[`index.html`](https://github.com/ruanyf/jstraining/blob/master/demos/angular-demo/index.html)的源碼，理解 Angular 對 HTML 標簽的增強 ## Vue ### 實驗目的 1. 理解 Vue 的模板與數據的雙向綁定 ### 操作步驟 1. 瀏覽器打開[`demos/vue-demo/index1.html`](https://github.com/ruanyf/jstraining/blob/master/demos/vue-demo/index1.html) 2. 在輸入框填入內容，注意頁面變化 3. 查看[`app1.js`](https://github.com/ruanyf/jstraining/blob/master/demos/vue-demo/app1.js)，理解 Vue 組件的基本寫法 ### 注意事項 1. [`index2.html`](https://github.com/ruanyf/jstraining/blob/master/demos/vue-demo/index2.html)是一個稍微復雜的例子，模板如何綁定數據對象的一個字段。 2. [`index3.html`](https://github.com/ruanyf/jstraining/blob/master/demos/vue-demo/index3.html)是事件綁定模板的例子。