1.0 Vue.directive

定义在全局的自定义指令，可以自己设置指令名称，指令逻辑，完成某种新功能 例如 <p v-colorful="colorName">我是自定义颜色指令<p>

<script>
       Vue.directive('colorful',function(el,binding){
             el.style = 'color:'+ binding.value
})
</script>

这里的directive里的第一个参数是自定义指令的名称，第二个是一个函数，函数里面有三个参数，第一个是el代表的是自定义指令对应的标签dom元素，第二个参数bingding则是一个对象，console.log(binding)的话，有很多属性，例如:

binding.name-----该例子的colorful,bingding.value----colorName在Vue实例对象里面实际的值,bingding.expression----colorful的名字,第三个参数vnode:是Vue编译的虚拟节点

自定义指令里面也有钩子函数，即生命周期，一共五个，

1.bind 只调用一次，指令第一个绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始动作2.inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

3.update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

5.unbind 至调用一个 指令与元素解绑时候调用

 2.0 Vue.extend

拓展实例构造器，经常用在组件功能上，在其模版中遇到该组件名称作为标签的自定义元素时，会自动调用‘拓展实例构造器’来生产组件实例，并挂载到自定义元素上

下面举个例子

html中有一段<author></author>script标签中代码


var authorExp = Vue.extend({
           template: '<p><a :href="authorUrl">{{authorName}}</a></p>',
           data: function(){
           return {
                authorUrl : 'http://www.baidu.com',
                 authorName: 'BorderBox'
     }
}
})

这里需要注意的是与实例对象Vue不同，这里的data和Vue的实例对象里的data是不同的，这里要写个function里面return一个对象，才可以输入对应的值


这样还不行，还得将该拓展实例构造器new一下然后挂载到对应的自定义标签上才可以


new authorExp().$mount('author')

这里的$mount意思就是挂载的意思,后面传入的参数和jquery是一样的,如果是派生标签,例如<p></p>,只要$mount('p')即可,如果是类标签,$mount('.类名'),如果是id,$mount('#id')即可实现

3.0 Vue.set


这里的Vue.set的意思是构造器外部操作构造器内部的数据、属性或者方法，这个方法主要拿来解决javascript长期的一个问题，就是如果只处理数组的下标，或者是处理数组的长度的话，vue不会更新数据

这里举个例子

html里面

<ul id="app">
    <li v-for="item in arr">{{item}}</li>
<ul><button οnclick="change()">通过改变数组的下标</button>script标签里面
<script>
       var app = new Vue({
              el : '#app',
              data : {
              arr: ['aaa','bbb','ccc','ddd']
        }})</script>
function change(){
         Vue.set(app.arr,1,'eee')
}

这里的就显示出Vue.set的价值出来了，如果change()里面直接加app.arr[1] = 'eee'的话，vue是不会更新数据的

4.0 Vue的生命周期


beforeCreate 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '1-beforeCreate 初始化之后' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  created 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '2-created 创建完成' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  beforeMount 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '3-beforeMount 挂载之前' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  mounted 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '4-mounted 搭载之后' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  beforeUpdate 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '5-beforeUpdate 数据更新前' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  updated 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '6-updated 被更新后' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  activated 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '7-activated' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  deactivated 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '8-deactivated' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  beforeDestroy 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '9-beforeDestroy 销毁之前' 
  ) 
  ;
 
 
             
  } 
  ,
 
 
             
  destroyed 
  : 
  function 
  ( 
  ) 
  {
 
 
                 
  console 
  . 
  log 
  ( 
  '10-destroyed 销毁之后' 
  )
 
 
             
  }


钩子能用到很多场景，比如说在beforeCreate加一个loading效果，再在mounted搭载之后取消loading效果，这样就可以提高用户体验,当然还有很多例子

5.0 template模版的使用

template是一个Vue实例对象的一个选项（例如data,el这都是选项）

1.0可以直接在template里面写模版

2.0还可以在<template id="id名"></template>里面写模版    template: '#id名'来实现

3.0可以在script标签里面加,<script type="x-template" id="id名"></script>里面加模版  template: '#id'来实现