前置条件
@dojo/cli 命令行工具应该全局安装(参见学习笔记1)
编译和启动程序
在程序目录中运行
dojo build --mode dev --watch memory --serve或者运行简化代码
dojo build -m dev -w memory -s浏览http://localhost:9999 查看启动的网页(一头旋转的龙~~)
网页内容
删除初始化的内容
在src路径下修改index.html,title变为<title>我的第一个dojo2</title>,神奇的是:不用重启应用,第一次修改是自动刷新的,第二次修改需要手动刷新(这是怎么回事?)
然后,把"Hello, Dojo World!"修改为"你好!豆粥!"
/src/widgets中打开HelloWorld.ts
看到
v('div', { classes: css.label }, ['Hello, Dojo World!'])"先改成"你好!豆粥!"试下!(不用刷新,自动生效!与修改title不同的是,无论修改几次,都是自动生效的!)
v函数指示 Dojo 2 创建一个 HTML 元素，这段代码创建一个<div>元素， 并在其中添加文字"Hello, Dojo World!"。 教程中接下来将构建一个页面，在这个页面中能查看 Biz-E 公司的员工列表， 所以我们更新标签和信息。
现在，我们再回过头来看v函数。 我们有意避免使用document.createElement来创建 DOM 元素 (Document Object Model)。 这是因为我们不会直接创建 DOM 元素。 相反，我们创建一个视图(view)的中间层，然后 Dojo 2 能高效的将这个视图转换为 DOM 元素， 并在页面中渲染出来。 这个渲染技术就是所谓的 virtual DOM(虚拟dom)。
Dojo 2 中，我们使用 Maquette 这个 virtual DOM 库提供的很多高效的方法来与 DOM 元素交互。 使用 virtual DOM 的额外好处是它促使你编写出 reactive 风格的代码，而这种风格的代码会简化你的程序
在dojo教程最后部分，我们将学习如何为 virtual DOM 节点设置属性。
虚拟DOM 属性
现在我们将为早先创建的 HelloWorld.ts 文件中的 <h1> 元素增加属性。 这些属性可作为v 函数的第二个参数传入。
return v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]);注意，我们在 tag 和内容参数中间添加了一个参数。 第二个参数可以往元素中设置任意属性。 这种使用 JavaScript 或 TypeScript 创建 DOM 元素的方法被称为HyperScript， 这种技术应用在很多 virtual DOM 实现中。
但是,原来的css样式没有了,字不好看了,排版也有问题
不管怎么说,能够正常运行,我们开了个好头...