课堂练习（一）

## 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)是事件绑定模板的例子。