Vue例項詳解

阿新 • • 發佈：2019-02-07

Vue例項初始化的選項配置物件詳解

前面我們已經用了很多次 new Vue({…})的程式碼，而且Vue初始化的選項都已經用了data、methods、el、computedd等,估計您看到這裡時，應該已經都明白了他們的作用，我們就詳細講解一下他們的使用情況。更詳細的請參考官網內容

Vue例項的的data物件

介紹
Vue的例項的資料物件data 我們已經用了很多了，資料繫結離不開data裡面的資料。也是Vue的核心屬性。
它是Vue繫結資料到HTML標籤的資料來源泉，另外Vue框架會自動監視data裡面的資料變化，自動更新資料到HTML標籤上去。本質原理是：Vue會自動將data裡面的資料進行遞迴抓換成getter和setter，然後就可以自動更新HTML標籤了，當然用getter和setter所以老的瀏覽器Vue支援的不夠好。
data物件的型別：

1) 型別是Object或者Function。
2) 如果是元件物件中，data必須是Function型別。【後面學了元件後就明白了，暫時對元件先放放。】

例項：

// 建立普通的Vue例項
var vm = new Vue({
  data: data
})

// 元件定義【後面會詳細講的】
// Vue.extend() 中 data 必須是函式
var Component = Vue.extend({
  data: function () {   //這裡必須是函式！！！！
    return { a: 1 }
  }
})

Vue例項的computed

介紹
Vue的計算屬性（computed)的屬性會自動混入Vue的例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 Vue 例項。這就很強大了，再計算屬性中定義的函式裡面可以直接使用指向了vue例項的this，異常方便的啊。
型別

{ 鍵：函式}
{ [key: string]: Function | { get: Function, set: Function
 } }

當然，可以省略setter,如果省略了setter，那麼值就可以是普通函式，但是必須有返回值。

官方的例項

var vm = new Vue({
data: { a: 1 
 },
computed: {
  // 僅讀取，值只須為函式
  aDouble: function () {
    return this.a * 2
  },
  // 讀取和設定
  aPlus: {
    get: function () {
      return this.a + 1
    },
    set: function (v) {
      this.a = v - 1
    }
  }
}
})
vm.aPlus   // -> 2
vm.aPlus = 3
vm.a       // -> 2
vm.aDouble // -> 4

methods

型別 :

{ [key: string]: Function }

詳細:

methods 將被混入到 Vue 例項中。可以直接通過 VM 例項訪問這些方法，或者在指令表示式中使用。方法中的 this 自動繫結為 Vue 例項。

注意，不應該使用箭頭函式來定義 method 函式 (例如 plus: () => this.a++)。理由是箭頭函式綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 例項，this.a 將是 undefined。

示例:

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

watch

型別

{ [key: string]: string | Function | Object }

詳細:
一個物件，鍵是需要觀察的表示式，值是對應回撥函式。值也可以是方法名，或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch()，遍歷 watch 物件的每一個屬性。
示例:

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    // 監控a變數變化的時候，自動執行此函式
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // -> new: 2, old: 1
//注意，不應該使用箭頭函式來定義 watcher 函式 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函式綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 例項，this.updateAutocomplete 將是 undefined。

參考綜合案例：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之資料監控</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ number }}</p>
    <input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()">
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        number: 1
      },
      methods: {
        // 事件響應方法的邏輯程式碼
        getNumber: function (e) {
          this.number += 1;   // 不管是內聯方法呼叫，還是繫結事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
        }
      },
      watch: {
        // 監控number的變化，並自動執行下面的函式
        number: function (val, oldVal) {
          console.log('val:' + val + ' - oldVal: ' + oldVal);
        }
      }
    });
  </script>
</body>
</html>

設定el的詳解

型別

string | HTMLElement

限制： 只在由 new 建立的例項中遵守。

詳細：

提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標,也就是說Vue繫結資料到哪裡去找。可以是CSS選擇器，也可以是一個 HTMLElement例項。

在例項掛載之後(生命週期的內容後面會詳細講的奧)，元素可以用 vm.$el 訪問。

如果這個選項在例項化時有作用，例項將立即進入編譯過程，否則，需要顯式呼叫 vm.$mount() 手動開啟編譯。

// 幾乎所有例子都用到這個，所以就不再贅述
var app = new Vue({         
  el: '#app',
  ...
});

Vue例項的全域性配置

這一塊都是一些小的知識點，我就不贅述了，直接copy 官網
Vue.config 是一個物件，包含 Vue 的全域性配置。可以在啟動應用之前修改下列屬性：

silent

型別：

 boolean

預設值： false

用法：

Vue.config.silent = true
//取消 Vue 所有的日誌與警告。

optionMergeStrategies

型別：

{ [key: string]: Function }

預設值： {}

用法：

Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
// Profile.options._my_option = 2
//自定義合併策略的選項。
//合併策略選項分別接受第一個引數作為父例項，第二個引數為子例項，Vue例項上下文被作為第三個引數傳入。

devtools

型別：

 boolean

預設值： true (生產版為 false)

用法：

// 務必在載入 Vue 之後，立即同步設定以下內容

Vue.config.devtools = true

//配置是否允許 vue-devtools 檢查程式碼。開發版本預設為 true，生產版本預設為 false。生產版本設為 true 可以啟用檢查。

errorHandler

型別：

 Function

預設值： 預設丟擲錯誤

用法：

Vue.config.errorHandler = function (err, vm) {
// handle error
}
//指定元件的渲染和觀察期間未捕獲錯誤的處理函式。這個處理函式被呼叫時，可獲取錯誤資訊和 Vue 例項。
//Sentry, an error tracking service, provides official integration using this option.

ignoredElements

型別 :

 Array<string>

預設值: []

用法:

Vue.config.ignoredElements = [
'my-custom-web-component', 'another-web-component'
]

須使 Vue 忽略在 Vue 之外的自定義元素 (e.g., 使用了 Web Components APIs)。否則，它會假設你忘記註冊全域性元件或者拼錯了元件名稱，從而丟擲一個關於 Unknown custom element 的警告。

keyCodes

型別：

{ [key: string]: number | Array<number> }

預設值： {}

用法：

Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}
//給 v-on 自定義鍵位別名。

Vue的全域性API

Vue的全域性API提供大量的功能，我這裡就給大家羅列幾個常用的結果，其他的還是參考官網.

Vue.nextTick

語法：

 Vue.nextTick( [callback, context] )

引數：    
{Function} [callback]
{Object} [context]

用法：
在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。


// 修改資料
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

Vue.set

語法：

Vue.set( object, key, value )

引數：
{Object} object
{string} key
{any} value
返回值： 設定的值.

用法：

設定物件的屬性。如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法主要用於避開 Vue 不能檢測屬性被新增的限制。
注意物件不能是 Vue 例項，或者 Vue 例項的根資料物件。

Vue.compile

語法：

Vue.compile( template )

引數：

{string} template

用法：

//在render函式中編譯模板字串。只在獨立構建時有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})

全域性API總結

其實還有幾個其他的全域性API，不打算在這裡講了，比如擴充套件元件Vue.extend 的用法、Vue.use載入外掛、Vue.filter載入過濾器、Vue.directive自定義指令等
後面再講其他Vue的知識點的時候，再加上這些，全域性API其實就是Vue型別的靜態方法，全域性範圍內都可以使用的，某些例項的方法本質也是呼叫了這些全域性的，後面用到時候再說。

Vue事件處理

監聽事件的Vue處理

Vue提供了協助我們為標籤繫結時間的方法，當然我們可以直接用dom原生的方式去繫結事件。Vue提供的指令進行繫結也是非常方便，而且能讓ViewModel更簡潔，邏輯更徹底。所以還是推薦大家使用的。
Vue提供了v-on指令幫助我們進行事件的繫結。
基本的內聯事件處理方法[官方demo]：


<div id="example-1">
  <!-- 為按鈕繫結點選事件，執行counter += 1的任務。 -->
  <button v-on:click="counter += 1">增加 1</button>
  <p>這個按鈕被點選了 {{ counter }} 次。</p>
</div>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>

事件處理方法整合到Vue物件

內聯的方式繫結的事件，只能處理簡單的事件的處理邏輯。複雜的情況還是封裝到js中最方便，也不容易出錯。
Vue物件中可以新增methods屬性，開發者可以把事件處理函式的邏輯放到methods中。


<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之動態顯示錶格</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ number }}</p>
    <input type="button" name="btnGetNumber" value="增加[繫結事件處理器]" v-on:click="getNumber">
    <input type="button" name="btnGetNumber" value="增加[內聯方法呼叫]" v-on:click="getNumber()">
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        number: 1
      },
      methods: {
        // 事件響應方法的邏輯程式碼
        getNumber: function (e) {
          this.number += 1;   // 不管是內聯方法呼叫，還是繫結事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
        }
      }
    });
  </script>
</body>
</html>

事件修飾符

官網上寫的非常好，這塊就直接用管網的吧。在事件處理程式中呼叫 event.preventDefault()或 event.stopPropagation() 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的資料邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題， Vue.js 為 v-on 提供了事件修飾符。通過由點(.)表示的指令字尾來呼叫修飾符。


.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 新增事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

按鍵修飾符

在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符：

<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：

.enter
.tab
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

事件繫結的簡寫

Vue中屬性的繫結的簡寫直接是 : === 'v-bind:'
而事件的縮寫是直接變成@. 也就是說：v-on: === @
看下面的例子：

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

事件繫結總結

Vue為了方便大家進行開發，提供了事件的相關的封裝，可以讓我們方便我們用Vue對事件進行開發，尤其是v-on指令的非常方便的跟Vue物件中methods進行配合進行復雜的事件處理，非常方便。

Vue例項詳解

Vue例項初始化的選項配置物件詳解

Vue例項的的data物件

Vue例項的computed

methods

watch

設定el的詳解

Vue例項的全域性配置

Vue的全域性API

全域性API總結

Vue事件處理

事件繫結總結

Vue例項詳解

Vue鉤子函式生命週期例項詳解

vue 元件高階用法例項詳解

例項詳解Vue專案使用eslint + prettier規範程式碼風格

27.28. VUE學習之--事件修飾符之stop&capture&self&once例項詳解

【Vue】詳解Vue生命周期

【Vue】詳解Vue組件系統

關於Vue.use()詳解

Vue-multiselect詳解（Vue.js選擇框解決方案）

[譯]例項詳解防抖與節流（乾貨！！！）

C#資料結構之單鏈表(LinkList)例項詳解

android平臺下OpenGL ES 3.0例項詳解頂點屬性、頂點陣列

android平臺下OpenGL ES 3.0例項詳解頂點緩衝區物件(VBO)和頂點陣列物件(VAO)

expect學習筆記及例項詳解

Vue Router詳解

例項詳解js閉包（一）閉包基本概念及其作用推導

Vue 指令詳解

JavaScript中立即執行函式例項詳解轉載作者：李牧羊

javascript中this用法例項詳解

js事件監聽器用法例項詳解

Vue例項詳解

Vue例項初始化的選項配置物件詳解

Vue例項的的data物件

Vue例項的computed

methods

watch

設定el的詳解

Vue例項的全域性配置

Vue的全域性API

全域性API總結

Vue事件處理

事件繫結總結

相關推薦