Vue.js 指南-基礎

Installation

可以使用的方式：

script標簽方式加載vue.js

cdn https://unpkg.com/vue@2.0.5/dist/vue.js

npm

Introduction

通過指定的語法渲染js變量

DOM元素與變量綁定，同步更新，無需手動操縱DOM

通過vue標簽屬性，完成綁定data，綁定事件，條件語句以及循環等特性

創建自定義可復用的組件，可直接在html標簽中使用

The Vue Instance

Vue構造方法創建實例，并且可以擴展構造方法創建可重用的組件（繼承？）

每一個Vue實例都代理了data參數中所有的屬性，并且如果在Vue對象實例化之前你的自定義變量綁定到了data中，那么他們的值是時刻同步的

每個Vue對象在實例化的過程中，經歷了一系列的過程，就是有它的生命周期

Template Syntax

Vue使用基于HTML的語法，允許你將渲染到DOM中元素與Vue實例中的data數據綁定

Vue把模板數據編譯到虛擬DOM的渲染方法中，根據app不同的狀態，實現最少量的組件的重新渲染

{{}}法上可以渲染文本、可以支持javascript表達式，可以通過管道實現過濾

Computed Properties and Watchers

{{}}語法中可以使用js表達式，但是并不推薦，不易于維護，不利于調試，引入 computed屬性，compulted屬性依賴于現有的屬性，只要依賴值沒變，其值不變，頁面中多處使用可以直接返回計算好的值，與之對應的用方法實現，每次都要執行一遍

對于數據和頁面的rective,compluted可以滿足大多數情形，當你需要完成異步并且有大量的數據計算響應等操作，可以使用watch選項

總結：compluuted與watch的目的都是監聽Vue實例數據的變化，并作出響應

Class and Style Bindings

使用Vue定義的屬性v-bind:class可以進行樣式類的綁定，支持豐富的格式，可以使用對象的方式在vuedata option中定義，可以使用數組傳遞多個類名，可以依賴于現有的data使用compluted屬性，可以跟現有的html標簽類混用等等

v-bind:style可直接綁定書寫行內樣式，支持對象方式、數組方式

Conditional Rendering

條件標簽v-if ,v-show,可以做條件判斷來進行html元素的顯示

不同點在于v-if根據值的變化每次重新渲染，v-show等價于display:show|none也就是元素是在頁面中渲染好的

Event Handling

v-on標簽綁定各種事件，可以做v-on:click="counter += 1"這種簡單的處理，也可以調用Vue中方法（方法可將原生的DOM event通過$event傳遞）

經常用到的阻止事件冒泡或阻止事件的默認行為在Vue中可以與v-on搭配使用點語法.stop .prevent .capture .self來實現，不需要再去關心具體的DOM事件細節

針對鍵盤的key值監聽，Vue提供也提供了簡單的綁定語法v-on:keyup.鍵值,也可使用vue提供的定義好的常用鍵值的別名

Form Input Bindings

v-model可以處理基本的用戶輸入（input）、復選框、單選框等的值賦值給v-model指定的變量

僅僅使用v-model只可以獲取用戶輸入的字符串或者true false(單、富選框)，可以使用v-bind將input的value與vue的屬性綁定，這樣可以動態的修改

Components

組件用來擴展現有的html標簽并進行封裝重用

使用自定義components需要在實例化Vue對象之前確保組件已經注冊

除注冊為全局組件之外，可以注冊為某一個vue實例的本地組件

在頁面中直接使用自定義組件時，瀏覽器會無法解析，需要使用is=組件名

組件中的data option必須為一個function,否則console 報 warnning

組件復用不可避免的需要不同組件嵌套使用，涉及到數據的向下傳遞，Vue通過props option傳遞【注：props在js中的駝峰命名在html中需要改為連字符】

對于組件需要接收的參數，Vue提供了參數驗證

子組件與父組件的通信是通過customer events即自定義事件

v-on:事件名來監聽子組件可能觸發的事件

v-on:click.native=""同樣可以監聽原生的JavaScript事件

非父子關系的組件也可以通過hook的方式完成通訊