適用于初學者的 Vue.js

必要條件

需要先在Windows或Windows子系統Linux版上安裝Vue.js。建議在 Windows上安裝初學者來學習，專業人員安裝在 WSL上。

搭配 Visual Studio Code 使用 NodeJS

安裝VS Code。 無論您是否打算在Windows或WSL上使用 Vue。

1. 開啟命令列並建立新目錄： mkdir HelloVue ，然後輸入目錄： cd HelloVue
2. 安裝 Vue CLI： npm install -g @vue/cli
3. 建立您的 Vue 應用程式： vue create hello-vue-app
4. 開啟新的 hello vue 應用程式的目錄： cd hello-vue-app
5. 嘗試在您的網頁瀏覽器中執行新的 Vue 應用程式： npm run serve，在瀏覽器中看到「歡迎使用您的 Vue.js 應用程式」。 可以按下 Ctrl+C 停止 vue cli-服務伺服器。
6. 請嘗試在 VS Code 中開啟 Vue 應用程式的原始程式碼，以更新歡迎訊息，然後輸入：code .
7. VS Code 將會啟動並顯示檔案總管中的 Vue 應用程式。 再次在終端機中執行您的應用程式 npm run serve ，並將網頁瀏覽器開啟至 localhost，讓您可以看到顯示的 Vue 頁面歡迎使用頁面。 App.vue在 VS Code 中尋找檔案。 請嘗試將「歡迎使用您的 Vue.js 應用程式」變更為「歡迎使用蛙！」。 儲存變更後，您就會看到 Vue 應用程式「熱重載」。

組件

組件是Vue最為強大的特性之一。為了更好地管理一個大型的應用程式，需要將應用切割為小而獨立、具有復用性的組件。在Vue中，組件是基礎HTML元素的拓展，可方便地自訂其資料與行為。下方的代碼是Vue組件的一個範例，彩現為一個能計算滑鼠點擊次數的按鈕。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

模板

Vue使用基於HTML的模板語法，允許開發者將DOM元素與底層Vue實例中的資料相繫結。所有Vue的模板都是合法的HTML，所以能被遵循規範的瀏覽器和HTML解析器解析。在底層的實現上，Vue將模板編譯成虛擬DOM彩現函式。結合回應式系統，在應用狀態改變時，Vue能夠智慧型地計算出重新彩現組件的最小代價並應用到DOM操作上。
此外，Vue允許開發者直接使用JSX語言作為組件的彩現函式，以代替模板語法。以下為可計算點擊次數的按鈕的JSX彩現版本（需組態相應Babel編譯器）：

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    "onclick": function() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }

回應式設計

回應式是指MVC模型中的視圖隨著模型變化而變化。在Vue中，開發者只需將視圖與對應的模型進行繫結，Vue便能自動觀測模型的變動，並重繪視圖。這一特性使得Vue的狀態管理變得相當簡單直觀。

過渡效果

Vue在插入、更新或者移除DOM時，提供多種不同方式的應用過渡效果。包括以下工具：

• 在CSS過渡和動畫中自動應用class
• 可以配合使用第三方CSS動畫庫，如Animate.css
• 在過渡勾點函式中使用JavaScript直接操作DOM
• 可以配合使用第三方JavaScript動畫庫，如Velocity.js

單檔案組件

為了更好地適應複雜的專案，Vue支援以.vue為副檔名的檔案來定義一個完整組件，用以替代使用Vue.component註冊組件的方式。開發者可以使用 Webpack或Browserify等構建工具來打包單檔案組件。