vue.js快速上手。

什麼是Vue.js

　　Vue.js是一個構建數據驅動的web界面的庫。技術上，它重點集中在MVVM模式的ViewModel層，所以它很是容易學習，很是容易與其它庫或已有項目整合。

　　Vue.js的目標是經過儘量簡單的API實現響應的數據綁定和組合的視圖組件。

　　Vue.js 的核心是一個響應的數據綁定系統，它讓數據與DOM保持同步很是簡單。在使用jQuery手工操做DOM時，咱們的代碼經常是命令式的、重複的與易錯的。Vue.js擁抱數據驅動的視圖概念。通俗地講，它意味着咱們在普通HTML模板中使用特殊的語法將DOM 「綁定」到底層數據。

安裝

獨立版本

　　直接下載並用 < script > 標籤引入，Vue會被註冊爲一個全局變量。以下代碼，這樣就能夠在腳本中使用Vue.js了。

<script src="lib/vue.js"></script>

CDN

　　也能夠在 jsdelivr或 cdnjs獲取 (版本更新可能會略滯後)。

NPM

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

$ npm install vue
`# 獲取CSP兼容版本：
`$ npm install vue@csp
`# 獲取最新開發版本(來自於GitHub):
$ npm install yyx990803/vue#dev

Hello World

　　如今就讓咱們來寫第一個vue.js的實例。以下代碼：

html代碼：

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

JavaScript代碼:

new Vue({
  el: '#demo',
  data: {
    message: 'Hello World!'
  }
})

　　上面代碼中div中的部分 {{ message }}爲數據綁定，咱們將會在後面的學習中講到。而vue.js代碼是實例化一個Vue對象。在使用vue以前必需要實例化。

構造器

　　每一個Vue.js應用的起步都是經過構造函數Vue建立一個Vue的根實例：

var vm = new Vue({
  // 選項
})

　　一個Vue實例其實正是一個MVVM模式中所描述的 ViewModel - 所以在文檔中常常會使用vm這個變量名。

屬性與方法

　　每一個Vue實例都會代理其data對象裏全部的屬性，以下代碼：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
//vm.a === data.a  -> true
// 設置屬性也會影響到原始數據
vm.a = 2
// data.a  -> 2
// ... 反之亦然
data.a = 3
//vm.a -> 3

　　注意只有這些被代理的屬性是響應的。若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。

　　除了前面這些數據屬性，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 (newVal, oldVal) {
  // 這個回調將在 `vm.a`  改變後調用
})

插值

　數據綁定最基礎的形式是文本插值，使用 {{}} 語法（雙大括號）：

<span>Message: {{ msg }}</span>

　　{{ msg }} 標籤會被相應數據對象的 msg 屬性的值替換。每當這個屬性變化時它也會更新。

　　也能夠只處理單次插值，從此的數據變化就不會再引發插值更新了：

<span>This will never change: {{* msg }}</span>

以下JavaScript代碼:

var data={msg:'Hello Vue.js!'};
new Vue({
  el: '#demo',
  data: data
 })
data.msg="Hello World!";

原始的HTML

　　雙大括號標籤將數據解析爲純文本而不是HTML。爲了輸出真的HTML字符串，須要用三大括號標籤：

<div>{{{ msg }}}</div>
　　以下javascript代碼：

var data={msg:'<p>Hello Vue.js!</p>'};
new Vue({
    el: '#demo',
    data: data
   })

HTML特性

　　雙大括號標籤也能夠用在 HTML 特性 (Attributes) 內：

<div id="{{ id }}"></div>
javascript代碼以下：

var data={id:'demo'};
new Vue({
  el: 'div',
  data: data
 })

咱們去查看HTML源碼，是否是id已經變成咱們設置的id了。

JavaScript表達式

　　Vue.js 在數據綁定內支持全功能的JavaScript表達式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

過濾器

　　Vue.js 容許在表達式後添加可選的「過濾器 (Filter) 」，以「管道符(|)」指示。過濾器本質上是一個函數，這個函數會接收一個值，將其處理並返回。

{{ message | uppercase }}

　　這裏咱們將表達式 message 的值「管輸（pipe）」到內置的 uppercase 過濾器，這個過濾器其實只是一個 JavaScript 函數，返回大寫化的值。Vue.js 提供數個內置過濾器，在後面咱們會談到如何開發本身的過濾器。

　　能夠串聯多個過濾器：

{{ message | filterA | filterB }}
html代碼：　　
{{ message | filterA | filterB }}
html代碼：　　

<div id='demo'>
<span>{{msg | lowercase | capitalize}}</span>
</div>
javaScript代碼：

 var data={msg:'heLLO!'};
 new Vue({
  el: '#demo',
  data: data
 })

運行結果爲：Hello

指令

　　Vue.js指令 (Directives) 是特殊的帶有前綴 v- 的特性。本質是模板中出現的特殊標記，讓處理模板的庫知道須要對這裏的DOM元素進行一些對應的處理。指令的職責就是當其表達式的值改變時把某些特殊的行爲應用到 DOM 上。

<p v-if="msg">Hello!</p>

　　這裏 v-if 指令將根據表達式 msg 值的真假刪除/插入 < p > 元素。

　　在Vue.js中爲咱們提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同窗們能夠去查看Vue.js的指令api(cn.vuejs.org/api/#指令)。

javascript代碼：

var data={msg:0};
 new Vue({
  el: '#demo',
  data: data
 })

計算屬性

　　在模板中表達式很是便利，可是它們實際上只用於簡單的操做。模板是爲了描述視圖的結構。在模板中放入太多的邏輯會讓模板太重且難以維護。這就是爲何 Vue.js 將綁定表達式限制爲一個表達式。若是須要多於一個表達式的邏輯，應當使用計算屬性。

　　在 Vue.js 中，你能夠經過 computed 選項定義計算屬性：

<div id="example">
  a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一個計算屬性的 getter
    b: function () {
      // `this` 指向 vm 實例
      return this.a + 1
    }
  }
})

運行結果爲：a=1,b=2。

更多內容如 Class 與 Style 綁定、 渲染指令、 表單控件綁定、 自定義指令和過濾器、 方法與事件處理器、組件等請參考： //www.hubwiz.com/course/566e67417e7d40946afc5ddc/