vue.js快速上手

馬拉喀什發表於2017-09-15
Vue.js

什麼是Vue.js

　　Vue.js是一個構建資料驅動的web介面的庫。技術上，它重點集中在MVVM模式的ViewModel層，因此它非常容易學習，非常容易與其它庫或已有專案整合。

　　Vue.js的目標是通過儘可能簡單的API實現響應的資料繫結和組合的檢視元件。

　　Vue.js 的核心是一個響應的資料繫結系統，它讓資料與DOM保持同步非常簡單。在使用jQuery手工操作DOM時，我們的程式碼常常是命令式的、重複的與易錯的。Vue.js擁抱資料驅動的檢視概念。通俗地講，它意味著我們在普通HTML模板中使用特殊的語法將DOM “繫結”到底層資料。

這裡寫圖片描述

最近剛推出了vue.js 2系列，大家可以看看去。
vue.js 2 教程

安裝

獨立版本

　　直接下載並用 < 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程式碼：　　

<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 繫結、 渲染指令、 表單控制元件繫結、 自定義指令和過濾器、 方法與事件處理器、元件等請參考：
http://www.hubwiz.com/course/566e67417e7d40946afc5ddc/

分享Vue.js的入門級全家桶系列教程：

1.vue.js 入門與提高: http://xc.hubwiz.com/course/vue.js
2.vuex 2 入門與提高: http://xc.hubwiz.com/course/vuex
3.vue-router 入門與提高: http://xc.hubwiz.com/course/vuerouter
4.vue.js 工程化實踐: http://xc.hubwiz.com/course/vuegch


相關文章