1.5　第一個Vue.js程序

【例1.1】第一個Vue.js程序。（實例位置：資源包\TM\sl\1\01）

創建第一個Vue.js程序，在WebStorm工具中編寫代碼，在頁面中輸出“I like Vue.js”。具體步驟如下。

（1）啟動WebStorm，如果還未創建過任何項目，會彈出如圖1.14所示的歡迎界面。

（2）選擇圖1.14中的New Project選項，彈出創建新項目對話框，如圖1.15所示。在該對話框中選擇項目存儲路徑，并輸入項目名稱sl，將項目文件夾存儲在計算機的E盤中，然后單擊Create按鈕創建項目。

（3）在項目名稱sl上右擊，然后依次選擇New→Directory選項，如圖1.16所示。

（4）選擇Directory選項，彈出新建目錄對話框，如圖1.17所示，在文本框中輸入新建目錄的名稱1作為本章實例文件夾，然后按Enter鍵，完成文件夾的創建。

（5）按照同樣的方法，在文件夾1下創建第一個實例文件夾01。

（6）在第一個實例文件夾01上右擊，然后依次選擇New→HTML File選項，如圖1.18所示。

（7）選擇HTML File選項，彈出新建HTML文件對話框，如圖1.19所示，在文本框中輸入新建文件的名稱index，然后按Enter鍵，完成index.html文件的創建。此時，開發工具會自動打開剛剛創建的文件，結果如圖1.20所示。

（8）接下來，就可以構建一個簡單的Vue.js程序。Vue的起步非常簡單，安裝Vue.js之后，使用Vue.createApp創建一個應用程序實例。在創建實例時會調用data()函數，該函數會返回一個數據對象，最后通過mount()方法指定一個DOM元素作為裝載應用程序實例的根組件，實現數據的雙向綁定，具體代碼如下：

使用瀏覽器運行“E:\TM\sl\1\01”目錄下的index.html文件，在瀏覽器中將會看到運行結果，如圖1.21所示。