前置條件

@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樣式沒有了,字不好看了,排版也有問題

不管怎麼說,能夠正常執行,我們開了個好頭...