API(全局配置，全局API)

時間 2019-11-13

標籤 api 全局配置简体版

原文原文鏈接

全局配置

Vue.config是一個對象，包含Vue的全局配置

silent

類型：boolean
默認值：false
用法javascript
```
Vue.config.silent=true
```
取消Vue全部的日誌與警告html

devtools

類型：boolean
默認值:true(生成版爲false)

用法vue

// 務必在加載 Vue 以後，當即同步設置如下內容
  Vue.config.devtools = true

errorHandler

類型：Function
默認值：undefined

用法java

Vue.config.errorHandler = function (err, vm, info) {
    // handle error
    // `info` 是 Vue 特定的錯誤信息，好比錯誤所在的生命週期鉤子
    // 只在 2.2.0+ 可用
  }

warnHandler(2.4.0新增)

類型：function
默認值：undefined

用法web

Vue.config.warnHandler = function (msg, vm, trace) {
    // `trace` 是組件的繼承關係追蹤
  }

爲 Vue 的運行時警告賦予一個自定義處理函數。注意這隻會在開發者環境下生效，在生產環境下它會被忽略。api

ignoreElements

類型： Array<string | RegExp>
默認值： []

用法數組

Vue.config.ignoredElements = [
    'my-custom-web-component',
    'another-web-component',
    // 用一個 `RegExp` 忽略全部「ion-」開頭的元素
    // 僅在 2.5+ 支持
    /^ion-/
  ]

keyCodes

類型：{[key:string] :number | Array }
默認值：{}

用法瀏覽器

Vue.config.keyCodes = {
    v: 86,
    f1: 112,
    // camelCase 不可用
    mediaPlayPause: 179,
    // 取而代之的是 kebab-case 且用雙引號括起來
    "media-play-pause": 179,
    up: [38, 87]
  }

  <input type="text" @keyup.media-play-pause="method">

給 v-on 自定義鍵位別名。app

performance(2.2.0新增)

類型：boolean
默認值：false(自2.2.3起)
用法：
設置爲 true 以在瀏覽器開發工具的性能/時間線面板中啓用對組件初始化、編譯、渲染和打補丁的性能追蹤。只適用於開發模式和支持 performance.mark API 的瀏覽器上。

productionTip(2.2.0新增)

類型：boolean
默認值：true
用法：
設置爲 false 以阻止 vue 在啓動時生成生產提示。

全局API

什麼是全局API？

全局API並不在構造器裏，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API。說的簡單些就是，在構造器外部用Vue提供給咱們的API函數來定義新的功能。函數

Vue.extend(options)
Vue.extend返回一個"擴展實例構造器"，也就是預設了部分選項的Vue實例構造器。常常服務於Vue.component用來生成組件，能夠簡單理解爲當模板中遇到該組件名稱爲標籤的自定義元素時，會自動調用"擴展實例構造器"來生產組件實例，並掛載到自定義元素上。
參數：{Object} options
用法：
使用基礎Vue構造器，建立一個「子類」。參數是一個包含組件選項的對象。

data選項是特例，須要注意在Vue.extend()中它必須是函數

<div id="mount-point"></div>
  // 建立構造器
  var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
        alias: 'Heisenberg'
      }
    }
  })
  // 建立 Profile 實例，並掛載到一個元素上。
  new Profile().$mount('#mount-point')

結果以下：
```
<p>Walter White aka Heisenberg</p>
```

Vue.nextTick([callback,context])

參數：
{function} [callback]
{Object} [context]
用法：

在下次DOM更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的DOM

// 修改數據
  vm.msg = 'Hello'
  // DOM 尚未更新
  Vue.nextTick(function () {
    // DOM 更新了
  })

  // 做爲一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)
  Vue.nextTick()
    .then(function () {
      // DOM 更新了
    })

2.1.0 起新增：若是沒有提供回調且在支持 Promise 的環境中，則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill，因此若是你的目標瀏覽器不原生支持 Promise (IE：大家都看我幹嗎)，你得本身提供 polyfill。

Vue.set(target,key,value)

Vue.set的做用就是在構造器外部操做構造器內部的數據，屬性或者方法。好比在vue構造器內部定義一個count爲1的數據，咱們構造器外部定義了一個方法，要每次點擊按鈕給值加1，就須要用到Vue.set.
參數
{Object | Array} target
{string | number} key
{any} value
返回值：設置的值
用法
設置對象的屬性，若是對象是響應式的，確保屬性被建立後也是響應式的，同時觸發視圖更新。這個方法主要用於避開Vue不能檢測屬性被添加的限制

在外部改變數據的三種方法

一、用Vue.set改變

function add(){
         Vue.set(outData,'count',4);
   }

二、用Vue對象的方法添加
app.count++;
三、直接操做外部數據
```
outData.count++;
```

爲何要有Vue.set的存在

因爲javascript的限制，Vue不能自動檢測如下變更的數組
當你利用索引值直接設置一個項時，Vue不會爲咱們自動更新
當你修改數組的長度時，Vue不會爲咱們自動更新

Vue.delete(target,key)

參數
{Object | Array} target
{string | number} key/index
用法
刪除對象的屬性。若是對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用於避開Vue不能檢測到屬性被刪除的限制，可是你應該不多會使用它。

Vue.directive(id,[definition])

參數
{string} id
{Function | Object} [definition]
用法：
註冊或獲取全局指令

js

// 註冊
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 註冊 (指令函數)
Vue.directive('my-directive', function () {
  // 這裏將會被 `bind` 和 `update` 調用
})

// getter，返回已註冊的指令
var myDirective = Vue.directive('my-directive')

Vue.filter(id,[definition])

參數：
{string} id
{Function} [definition]
用法：
註冊或獲取全局過濾器

/ 註冊
Vue.filter('my-filter', function (value) {
// 返回處理後的值
})

// getter，返回已註冊的過濾器
var myFilter = Vue.filter('my-filter')

Vue.component(id,[definition])

參數
{string} id
{Function | Object} [definition]
用法

註冊或獲取全局組件。註冊還會自動使用給定的id設置組建的名稱

/ 註冊組件，傳入一個擴展過的構造器
 Vue.component('my-component', Vue.extend({ /* ... */ }))

 // 註冊組件，傳入一個選項對象 (自動調用 Vue.extend)
 Vue.component('my-component', { /* ... */ })

 // 獲取註冊的組件 (始終返回構造器)
 var MyComponent = Vue.component('my-component')

局部註冊組件和全局註冊組件是相對應的，局部註冊的組件只能在組件註冊的做用域裏進行使用，其餘做用域使用無效

<h1>component組件</h1>
<hr>
<p>全局組件</p>
<div id="app">
    <reba></reba>
</div>
<p>局部註冊組件</p>
<div id="app1">
    <panda></panda>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    //註冊全局組件
    Vue.component('reba',{
        template:`<div style="color:red;">全局化註冊的reba標籤</div>`
    })
    var app=new Vue({
        el:'#app',
        data:{
        }
    })

    var app1 = new Vue({
        el: '#app1',
        components:{
            'panda':{
                template: `<div style="color:green;">局部組件化註冊的panda標籤</div>`
            }
        }
    })
</script>

<h1>component組件的props屬性設置</h1>
<hr>
<div id="app">
    <panda v-bind:here="message"></panda>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data:{
            message:'SiChuan'
        },
        components: {
            'panda':{
                template: `<div style="color: red;">panda 來自{{here}}</div>`,
                props: ['here']
            }
        }
    })
</script>

Vue.use(plugin)

參數：{Object | Function} plugin
用法：
安裝vue.js插件。若是插件是一個對象，必須提供install方法。若是插件是一個函數，它會被做爲install方法。install方法調用時，會將Vue做爲參數傳入。
當install方法被同一個插件屢次調用，插件將只會被安裝一次。

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
  })

template製做模板

方法1：直接寫在選項裏的模板

直接在構造器裏的template選項後邊編寫。這種寫法比較直觀，可是模板html代碼太多，不建議這麼寫

var app=new Vue({
       el:'#app',
       data:{
           message:'hello Vue!'
        },
       template:`
          <h1 style="color:red">我是選項模板</h1>
       `
  })

方法2：寫在`<template>`標籤裏的模板

這種方法更像是在寫html代碼，就算不會寫vue的人，也能夠製做頁面

<template id="demo2">
               <h2 style="color:red">我是template標籤模板</h2>
      </template>

      <script type="text/javascript">
          var app=new Vue({
              el:'#app',
              data:{
                  message:'hello Vue!'
              },
              template:'#demo2'
          })
      </script>

方法4：寫在 `<script>`標籤裏的模板

這種寫模板的方法，可讓模板文件從外部引入

<script type="x-template" id="demo3">
          <h2 style="color:red">我是script標籤模板</h2>
      </script>

      <script type="text/javascript">
          var app=new Vue({
              el:'#app',
              data:{
                  message:'hello Vue!'
              },
              template:'#demo3'
          })
      </script>