课堂练习(一)

最后更新于:2022-04-01 23:31:54

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