Vue.extend(options)

*参数：

{Object}options

*用法：

使用基础Vue构造器，创建一个子类。参数是一个包含组件选项的对象。data选项是特例，组要注意，在Vue.extend()中它必须是函数。

    
//创建构造器var Profile = Vue.extend({    template:`
{
   {firstName}} {
   {lastName}} aka {
   {alias}}
`,    data:function(){        return {            firstName:'Walter',            lastName:'White',            alias:'Heisenberg'        }    }})//创建Profile实例，并挂载到一个元素上。new Profile().$mount('#mount-point')

结果如下：

Walter White aka Heisenberg

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');

实例：

var Profile = Vue.extend({    template:`
{
   {firstName}} {
   {lastName}} aka {
   {alias}}
`,    data:function(){        return {            firstName:'Walter',            lastName:'White',            alias:'Heisenberg'        }    },    created(){        console.log('one');    }})

为了后面更好的使用Vue.extend()中的options，直接把上面示例中的一些选项提出来，这些选项其实就是前面所说的预设选项：

let baseOptions = {    template:`
{
   {firstName}} {
   {lastName}} aka {
   {alias}}
`,    data(){        return {            firstName:'Walter',            lastName:'White',            alias:'Heisenberg'        }    }}

这时可以这样使用：

let baseExtend = Vue.extend(baseOptions);

可以使用new关键字来声明这个构造器：

new baseExtend()

这个和new Vue()有点类似，除了我们预设的一些东西之外，Vue还给其预设了很多其它的东西。Vue的实例最终要挂载到一个元素上，那么Vue.extend也是一样，也需要挂载到一个元素上：

new baseExtend().$mount('#app');

尝试像Vue的实例挂载的方法：

let app = new baseExtend({    el:'#app'})

最终得到的效果是一样的。除此之外，还可以将其挂载到自定义的标签上，比如：

    
     
      new baseExtend().$mount('custom-element')
     
    

Vue.extend的作用：

Vue.extend常和Vue的组件配合在一起使用。简单点说：vue.extend是构造一个组件的语法器，你给这个构造器预设一些参数，而这个构造器给你一个组件，然后这个组件你就可以用到Vue.component这个全局注册方法里，也可以在任意Vue模板里使用这个构造器。基于上面的实例，咱们通过Vue.extend构建了一个baseExtend()构造器，这个构造器具有baseOptions设置的参数。咱们先忽略上面这段描述，来看Vue.component()创建的组件：

Vue.component('base-component',baseOptions)//自动调用Vue.extend()let app = new Vue({    el:'#app'})
    
    
    
     
    

如果我们把Vue.component()中的baseOptions换成前面已创建的扩展器baseExtend：

Vue.component('base-component',baseExtend)//等同于Vue.component('base-component',Vue.extend(baseOptions))//等同于Vue.component('base-component',baseOptions)

测试可以看到效果是相同的。

理解Vue.extend()和Vue.component()是很重要的。由于Vue本身是一个构造函数(constructor),Vue.extend()是一个继承与方法的类(class),参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并返回相应的构造函数。而Vue.component()实际上是一个类似于Vue.directive()和Vue.filter()的注册方法，它的目的是给指定的一个构造函数与一个字符串ID关联起来。之和Vue可以把它用作模板，实际上当你直接传递选项给Vue.component()的时候，它会在背后调用Vue.extend().

extends

*类型：

Object|Function

*详细：

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用Vue.extend。这主要是为了便于扩展单文件组件。

*示例：

var Compa = {...}//在没有调用Vue.extend时候继承CompAvar CompB = {    extends:CompA,}

const extend = {      data(){return{        aaaa:2      }},      created(){        console.log('extends')      },      methods:{        abc(){          console.log(1)        }      }    }    const extend1 = {      created(){        console.log('extends1')      },      extends:extend    }    const extend2 = {      extends:extend1    }    new Vue({      el:'#app',      extends:extend2,      created(){        console.log('created')        this.abc()        console.log(this.aaaa)      }    })    //extends    //extends1    //created    //1    //2

mixins

*类型：

Array

*详细：

mixins选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，它们将在Vue.extend()里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子函数而创建组件本身也有一个，两个函数将被调用。Mixin钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

示例：

var mixin = {    created:function(){console.log(1)}}var vm = new Vue({    created:function(){console.log(2)},    mixins:[mixin]})//=>1//=>2

Vue.directive( id, [definition] )

*参数：

{string} id{Function | Object} [definition]

*用法：

注册或获取全局指令。

//注册Vue.directive('ny-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')

示例。

当页面加载时，该元素将获得焦点（注意：autofocus在移动版Safari上不工作）。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

//注册一个全局自定义指令'v-focus'Vue.directive('foucs',{    //当被绑定的元素插入DOM中时    inserted:function(el){        //聚焦元素        el.foucs()    }})//如果想注册局部指令，组件中也接受一个directives的选项：directives:{    focus:{        //指令的定义        inserted:function(el){            el.foucs()        }    }}

然后你可以在模板中任何元素上使用新的v-focus属性，如下：

钩子函数:

一个指令定义对象可以提供如下几个钩子函数(均为可选)：bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已经被插入文档中）。update:所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用。unbind:只调用一次，指令与元素解绑时调用。接下来我们来看一下钩子函数的参数（即el、binding、vnode和oldVnode）钩子函数参数：指令钩子函数会被传入以下参数：el:指令所绑定的元素，可以用来直接操作DOM。binding:一个对象，包含以下属性：

name:指令名，不包括v-前缀。value:指令的绑定值，例如：v-my-directive="1+1"中，绑定值为2.oldValue:指令的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1+1"中，表达式为‘1+1’。arg:传给指令的参数，可选。例如：v-my-directive：foo中，参数为foo。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}.

vnode:Vue编译生成的虚拟节点。

oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。

除了el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。