什麼是 vue

vue是Vue.js的簡稱，是一個用來建立使用者介面的開源JavaScript框架，也是一個建立單頁應用程式的網路應用程式框架；vue所關注的核心是MVC模式中的視圖層，同時它也能方便地取得資料更新，並透過元件內部特定的方法實現視圖與模型的交互作用。

本教學操作環境：windows7系統、vue2.0版，DELL G3電腦。

【相關文章推薦：vue.js】

Vue.js（/vjuː/，或簡稱Vue）是一個用於建立使用者介面的開源JavaScript框架，也是一個創建單頁應用程式的網頁應用程式框架。

Vue.js是一款流行的JavaScript前端框架，旨在更好地組織與簡化Web開發。 Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地取得資料更新，並透過元件內部特定的方法實現視圖與模型的交互作用。

特性

元件

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

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
})

範本

Vue使用基於HTML的範本語法，讓開發者將DOM元素與底層Vue實例中的資料綁定。所有Vue的模板都是合法的HTML，所以能被遵循規範的瀏覽器和HTML解析器解析。在底層的實作上，Vue將模板編譯成虛擬DOM渲染函數。結合響應式系統，在應用狀態改變時，Vue能夠聰明地計算出重新渲染元件的最小代價並應用到DOM操作上。 [12]

此外，Vue允許開發者直接使用JSX語言作為元件的渲染函數，以取代模板語法。 [13]以下為可計算點擊次數的按鈕的JSX渲染版本（需配置對應Babel處理器）：

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (Clicked {this.count} times)
  },
  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等建置工具來打包單一檔案元件。

核心外掛

vue-router
vuex
vue-loader
vueify 
vue-cli

以上是什麼是 vue的詳細內容。更多資訊請關注PHP中文網其他相關文章！