Vue 快速入門

Vue 即 Vue.js，它是流行的前端開發框架，目前已經發展成爲優秀的前端生態。

學習 Vue 以前，須要具有：HTML, CSS, JavaScript 基礎知識，最好還擁有使用這些技術開發過網站的經驗。

若是不熟悉 JavaScript，基本上沒法理解 Vue.js。因此讀者朋友，請根據本身的狀況，作好學習 Vue.js 的準備工做吧。

一旦具有基礎知識後，便開始搭建環境，一邊使用一邊學習。

毫無疑問，一邊動手一邊看書，是掌握一門應用技能的最佳方法。

安裝

針對於小型項目，只需將 Vue.js 庫用於引用到項目中便可。

針對於大型項目，官方建議使用 NPM 安裝 Vue.js 以及配套的各類擴展工具。

引用

下面是官方提供的可供引用的方法：

#測試環境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

#生產環境-指定版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

#原生 ES Modules 環境
<script type="module">
  import Vue from https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

安裝

NPM 是 JS/Node 的一個包管理工具，Vue 配套工具利用 NPM 安裝其餘相關的 JS 包到本地項目。

下面列出從零開始的 Vue 安裝過程：

#安裝 Node 版本管理工具 [nvm](https://github.com/nvm-sh/nvm)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

#安裝最新版 Node
nvm install node

#安裝

原理

想作到把握 Vue 的本質，須要緊緊記住以下幾個要點：

虛擬DOM

虛擬 DOM 即虛擬出來的 DOM 元素，並不須要提早在 HTML 節點樹中定義。而是先充分把虛擬 DOM 想作的事情「構建」出來，再掛載到真實的 HTML 結構中，這樣便實現了所謂的前端的MVC化。

Vue 的根本原理是虛擬 DOM 技術。

根對象

無論你有沒有學習過 JS，你必定要明白，在 JS 中，一切皆對象。一個變量，一個類，一個函數，都具有對象的特徵。

Vue 所謂的根實例，就是一個最基本的對象，對於 Vue 對象中定義的其餘子項來講，Vue 根實例就是它們的父對象。

通常用 this 表示根實例自己。

格式 JSON 化

Vue 根實例中，主要將「數據+函數組選項」經過JSON格式展示出來。其中，data 能夠寫成對象，也能夠寫成函數（Vue 組件中必須寫成函數）

var app = new vue({
    el: '#app',
    
    data:{
      message: 'hello World'
      },
    
　　data: function() {
　　　　return {
　　　　　　mess: 'hello World'
　　　　},
    
    created: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    methonds: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    mounted: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    beforeDestory: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    filters: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    computed: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      }, 
}
)

Vue 生命週期

Vue 實例具備一個生命週期，具體參考下圖：

靈活的數據綁定

Vue 實例是一塊兒的根本，但須要必須與 HTML 的節點發生鏈接，才能產生做用。

這個鏈接過程，咱們稱之爲數據綁定。

Vue 技術體系中，與數據綁定相關的技術要素包括：

1. 指令：v-model, v-on:click | dblclick | keyup | mousemove, v-bind, v-html, v-if, v-pre, 等。。
2. 插值：{{ message }}, {{ message | filter }} 等。

本文由Websoft9原創發佈，轉載請註明出處。創做不易，歡迎討論，感謝支持！