書名: Vue.js從入門到項目實踐(超值版)作者名: 聚慕課教育研發中心編著本章字數: 517字更新時間: 2022-07-29 14:27:32
2.3 創建一個Vue實例

使用HBuilder X編輯器可以創建Vue項目,還可以創建Vue實例。HBuilder X支持各種表達式語法,以及Script和Style支持的其他語言(如Less、CSS、TypeScript等),無須安裝插件。下面介紹創建簡單Vue實例的具體操作步驟。
(1)打開HBuilder X編輯器,單擊左上角的“文件”按鈕,在彈出的菜單中選擇“新建”命令,在右側彈出的子菜單中選擇“4.vue文件”,如圖2-10所示。

圖2-10 選擇新建vue文件的命令
(2)選擇vue文件后,會出現一個彈出框,在彈出框中第一行輸入項目名稱,在第二行輸入保存文件的路徑,如圖2-11所示。輸入完成后,單擊“創建”按鈕即可。

圖2-11 “新建vue文件”彈出框
(3)右擊新建的vueDemo項目,在彈出的快捷菜單中選擇“新建”→“html”文件,并在出現的彈出框中輸入文件名、文件保存路徑等,如圖2-12所示。

圖2-12 “新建html文件”彈出框
(4)創建index.html文件后,開始編寫代碼。代碼如下:

代碼編寫完成后,單擊HBuilder X編輯器中index.html頁面右上角的“預覽”按鈕,則會在右側“Web瀏覽器”窗格中輸出“Hello Vue!!!”,如圖2-13所示。

圖2-13 程序運行結果
至此,已經成功創建了第一個Vue應用程序,看起來與渲染一個字符串模板非常類似,Vue在背后做了大量工作。現在數據和DOM已經被建立了關聯,所有部分都是響應式的。如果修改demo變量中message的值,相應的值也會在右側預覽框中進行更新。
推薦閱讀
- 網頁設計實用教程
- 中文版Flash CC完全自學教程
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計基礎培訓
- Dreamweaver CS5+ASP動態網站設計實用手冊
- 園區網互聯及網站建設
- 網頁設計與制作:HTML+CSS+JavaScript標準教程
- Div+CSS網頁制作實戰教程
- 網頁美工
- 人人都玩開心網:Ext JS+Android+SSH整合開發Web與移動SNS
- Photoshop熱門手機APP與網頁游戲界面設計從入門到精通
- JavaScript網頁游戲制作輕松學
- Web程序設計
- Dreamweaver CS6網頁設計入門、進階與提高
- Dreamweaver CS4網頁制作入門、進階與提高
- CSS3藝術:網頁設計案例實戰