1.5.1　第一個Vue應用

在學習和測試Vue的功能時，我們可以直接使用CDN的方式來進入Vue框架。本書將全部采用Vue 3.0.x的版本來編寫示例。首先，使用VSCode開發工具創建一個名為Vue1.html的文件，在其中編寫如下模板代碼：

其中，我們在head標簽中加入了一個script標簽，采用CDN的方式引入了Vue3的新版本。以之前編寫的計數器應用為例，我們嘗試使用Vue的方式來實現它。首先在body標簽中添加一個標題和按鈕，代碼如下：

上面使用到了一些特殊的語法，例如在h1標簽內部使用了Vue的變量替換功能，{{ count }}是一種特殊語法，其會將當前Vue組件中定義的count變量的值替換過來，v-on:click屬性用來進行組件的單擊事件綁定，上面的代碼將單擊事件綁定到了clickButton函數上，這個函數也是定義在Vue組件中的。定義Vue組件非常簡單，我們可以在body標簽下添加一個script標簽，在其中編寫如下代碼：

如以上代碼所示，我們定義Vue組件時實際上定義了一個JavaScript的對象，其中data方法用來返回組件所需要的數據，methods屬性用來定義組件所需要的方法函數。在瀏覽器中運行上面的代碼，當單擊頁面中的按鈕時，計數器會自動增加。可以看到，使用Vue實現的計數器應用比使用JavaScript直接操作HTML元素方便得多，我們不需要獲取指定的組件，也不需要修改組件中的文本內容，通過Vue這種綁定的編程方式，只需要專注于數據邏輯，當數據本身修改時，綁定這些數據的元素也會同步修改。