vue從入門到進階：簡介（一）

前言

用了這麼久的vue了，可是一直沒有時間寫個系列文章，如今抽必定時間總結下vue的知識點。

首先，Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的瀏覽器。
下面總結的內容是在2.x的版本。

安裝

直接用 <script> 引入

直接下載並用 <script> 標籤引入，Vue 會被註冊爲一個全局變量。

在開發環境下不要使用壓縮版本，否則你就失去了全部常見錯誤相關的警告!

CDN

推薦：https://cdn.jsdelivr.net/npm/vue，會保持和 npm 發佈的最新的版本一致。能夠在 https://cdn.jsdelivr.net/npm/vue/ 瀏覽 npm 包資源。
也能夠從 unpkg 和 cdnjs 獲取 (cdnjs 的版本更新可能略滯後)。

NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

# 最新穩定版
$ npm install vue

命令行工具 (CLI)

快速搭建大型單頁應用,只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

開發版本

GitHub 倉庫的 /dist 文件夾只有在新版本發佈時纔會提交。若是想要使用 GitHub 上 Vue 最新的源碼，你須要本身構建！

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

第一個程序Hello Vue

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

如今數據和 DOM 已經被創建了關聯，全部東西都是響應式的。咱們要怎麼確認呢？打開你的瀏覽器的 JavaScript 控制檯 (就在這個頁面打開)，並修改 app.message 的值

vue核心最基本的功能

聲明式渲染

給某一個DOM元素綁定屬性，以下

<div id="app">
  <span v-bind:title="message">
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
</div>

JS代碼：

var app = new Vue({
  el: '#app',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})

其中上面用到的v-bind 特性被稱爲指令。

條件與循環

控制切換一個元素是否顯示也至關簡單：

<div id="app">
  <p v-if="seen">如今你看到我了</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

v-for 指令能夠綁定數組的數據來渲染一個項目列表：

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '整個牛項目' }
    ]
  }
})

在控制檯裏，輸入 app.todos.push({ text: '新項目' })，你會發現列表最後添加了一個新項目。

處理用戶輸入

Vue 提供了 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

組件化應用構建

重要：須要明白全部的 Vue 組件都是 Vue 實例，而且接受相同的選項對象 (一些根實例特有的選項除外)。

組件系統是 Vue 的另外一個重要概念，由於它是一種抽象，容許咱們使用小型、獨立和一般可複用的組件構建大型應用。仔細想一想，幾乎任意類型的應用界面均可以抽象爲一個組件樹：

在 Vue 裏，一個組件本質上是一個擁有預約義選項的一個 Vue 實例。在 Vue 中註冊組件很簡單：

// 定義名爲 todo-item 的新組件
Vue.component('todo-item', {
  template: '<li>這是個待辦項</li>'
})

如今你能夠用它構建另外一個組件模板：

<ol>
  <!-- 建立一個 todo-item 組件的實例 -->
  <todo-item></todo-item>
</ol>

可是這樣會爲每一個待辦項渲染一樣的文本，這看起來並不炫酷。咱們應該能從父做用域將數據傳到子組件纔對。讓咱們來修改一下組件的定義，使之可以接受一個 prop：

Vue.component('todo-item', {
  // todo-item 組件如今接受一個
  // "prop"，相似於一個自定義特性。
  // 這個 prop 名爲 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

如今，咱們可使用 v-bind 指令將待辦項傳到循環輸出的每一個組件中：

<div id="app">
  <ol>
    <!--
      如今咱們爲每一個 todo-item 提供 todo 對象
      todo 對象是變量，即其內容能夠是動態的。
      咱們也須要爲每一個組件提供一個「key」，稍後再
      做詳細解釋。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  // todo-item 組件如今接受一個
  // "prop"，相似於一個自定義特性。
  // 這個 prop 名爲 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其它什麼人吃的東西' }
    ]
  }
})

這個例子子單元經過 prop 接口與父單元進行了良好的解耦。咱們如今能夠進一步改進 <todo-item> 組件，提供更爲複雜的模板和邏輯，而不會影響到父單元。
在一個大型應用中，有必要將整個應用程序劃分爲組件，以使開發更易管理

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

組件與自定義元素的關係

你可能已經注意到 Vue 組件很是相似於自定義元素——它是 Web 組件規範的一部分，這是由於 Vue 的組件語法部分參考了該規範。例如 Vue 組件實現了 Slot API 與 is 特性。可是，仍是有幾個關鍵差異：

• Web 組件規範仍然處於草案階段，而且未被全部瀏覽器原生實現。相比之下，Vue 組件不須要任何 polyfill，而且在全部支持的瀏覽器 (IE9 及更高版本) 之下表現一致。必要時，Vue 組件也能夠包裝於原生自定義元素以內。
• Vue 組件提供了純自定義元素所不具有的一些重要功能，最突出的是跨組件數據流、自定義事件通訊以及構建工具集成。

剖析一個完整的vue實例

數據與方法

當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。

// 咱們的數據對象
var data = { a: 1 }

// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
  data: data
})

// 它們引用相同的對象！
vm.a === data.a // => true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

重要：當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被建立時 data 中存在的屬性纔是響應式的。也就是說若是你添加一個新的屬性，好比： vm.b = 'hi'

那麼對 b 的改動將不會觸發任何視圖的更新。若是你知道你會在晚些時候須要一個屬性，可是一開始它爲空或不存在，那麼你僅須要設置一些初始值。好比：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

咱們也可使用ES6標準中提供的一個方法Object.freeze(),其方法做用就是凍結對象，對對象中的屬性進行修改無效。也便是會阻止修改現有的屬性，也意味着響應系統沒法再追蹤變化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data () {
    return {
      obj
    }
  }
})

<div id="app">
  <p>{{ obj.foo }}</p>
  <!-- 這裏的 `obj.foo` 不會更新！ -->
  <button @click="obj.foo = 'baz'">Change it</button>
</div>

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個回調將在 `vm.a` 改變後調用
})

實例生命週期鉤子

每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。

好比 created 鉤子能夠用來在一個實例被建立以後執行代碼：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的鉤子，在實例生命週期的不一樣階段被調用，如 mounted、updated 和 destroyed。生命週期鉤子的 this 上下文指向調用它的 Vue 實例。

不要在選項屬性或回調上使用箭頭函數，好比 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。由於箭頭函數是和父級上下文綁定在一塊兒的， this 不會是如你所預期的 Vue 實例，常常致使 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

生命週期圖示

下圖展現了實例的生命週期。你不須要立馬弄明白全部的東西，不過隨着你的不斷學習和使用，它的參考價值會愈來愈高。

注：特別有用