API(全局配置，全局API)

全局配置

• Vue.config是一个对象，包含Vue的全局配置

silent

• 类型：boolean

• 默认值：false

• 用法

    Vue.config.silent=true
  

• 取消Vue所有的日志与警告

devtools

• 类型：boolean

• 默认值:true(生成版为false)

• 用法

    // 务必在加载 Vue 之后，立即同步设置以下内容
    Vue.config.devtools = true
  

errorHandler

• 类型：Function

• 默认值：undefined

• 用法

    Vue.config.errorHandler = function (err, vm, info) {
      // handle error
      // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
      // 只在 2.2.0+ 可用
    }
  

warnHandler(2.4.0新增)

• 类型：function

• 默认值：undefined

• 用法

    Vue.config.warnHandler = function (msg, vm, trace) {
      // `trace` 是组件的继承关系追踪
    }
  

• 为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。

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 自定义键位别名。

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不能检测属性被添加的限制

在外部改变数据的三种方法

• 1、用Vue.set改变

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

• 2、用Vue对象的方法添加
  app.count++;

• 3、直接操作外部数据

    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>