[JavaScript知识库]Vue2.0掌握这点就够了！！！

Vue方法

Vue.component(name,obj|function) 全局注册
Vue.minin(obj) 全局混入
Vue.extend(options) 扩展，可以合并参数，类似混入
Vue.directive(name,obj) 注册全局自定义指令
Vue.filter(name,function) 全局注册过滤器
Vue.use(plugin) 全局使用插件
Vue.set(obj,key,value) 添加响应式数据
Vue.nextTick(callback) 在下一次DOM更新循环结束之后执行延迟的回调

Vue.delete() 删除对象属性
Vue.compile() 将一个模板编译为render函数
Vue.observable() 让一个对象可响应


【实例方法】
$watch(propName,function)
$set(obj,key,value)
$delete(obj,key)

$on(eventName,eventHandler) 侦听一个事件，相当于v-on 
$once(eventName,eventHandler) 一次性侦听一个事件，可以用于程序化事件侦听器
$off(eventName,eventHandler) 停止侦听这个事件
$emit(eventName,args)

$mount() 手动挂载实例el
$nextTick(callback) 
$destory()

Vue属性

【数据】
data
props
propsData //只能用在new创建的实例上，给props传递数据，方便测试
computed
methods
watch

【选项/DOM】
el  //挂载vue实例用的(若render和template都不存在，则挂载的哪个dom元素会被当做模板)
template  //使用模板挂载元素（若存在render渲染函数，则模板被忽略）
render  //渲染函数
renderError //渲染函数错误时触发

【钩子】
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

【选项】
directives 局部自定义指令
filters 局部过滤器
components 局部注册组件

mixins 混入
extends 可以扩展另一个组件，和混入类似
provide/inject 依赖注入（父组件提供provide数据，子组件注入inject数据）
functional 配置当前是否是函数式组件

【实例属性】
$data
$props
$el
$options
$parents
$root
$children
$slots
$scopedSlots
$refs
$isServer
$attrs
$listeners

【特殊属性】用在标签里的
key 
ref
is 用在动态组件中

【Vue.nextTick()】
    // 修改数据
    vm.msg = 'Hello'
    // DOM 还没有更新
    Vue.nextTick(function () {
      // DOM 更新了
    })
【renderError】
    renderError (h, err) {
        return h('pre', { style: { color: 'red' }}, err.stack)
    }
【provide/inject】
// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}
【$once】
侦听到组件销毁之后，执行一次回调函数（可以做些移除操作）
this.$once('hook:beforeDestroy', function () {
	picker.destroy()
})
【$mount】
var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

【内置组件】
component 动态组件
transition 动画
transition-group 列表动画
keep-alive 缓存，会触发actived和deactived（max属性最大缓存数，include属性表示有条件地缓存）
slot 插槽

模板语法

• 插值

  - {{}}：在里面可以使用js表达式
  - v-once：会让{{}}这个语法不生效
  - v-html：将html结构字符串解析并替换当前元素
  - v-bind：绑定html属性
  

• 指令

  v-if v-else-if v-else v-show
  v-bind(:)  v-model
  v-on(@)
  v-html v-once 
  
  【动态参数】：用[]可以给指令绑定动态参数
  例:<a v-bind:[attributeName]="url"> ... </a>
  这样的话attributeName就是一个js表达式，可以动态求值，动态参数只能是小写（上面的会找attributename属性），空格、引号等字符在[]中无效（可以使用计算属性代替）
  
  【修饰符】：用 . 指出一个指令应该以特殊的方式绑定。
  例：<form v-on:submit.prevent="onSubmit">...</form>
  这样的话，当触发submit事件时，会调用event.preventDefault()来阻止浏览器的默认行为
  

计算属性和侦听属性

• 计算属性

  根据已知属性计算出另一个属性
  任何复杂的逻辑求值，应该用计算属性（来替代js表达式，方便阅读）
  计算属性会依赖于使用的其他属性（当其他属性改变时，计算属性随之改变）
  
  例：
  {{reverseMessage}}
  data:{
  	message:'Hello'
  }
  computed:{
  	reverseMessage(){
  		return this.message.split("").reverse().join("")
  	}
  }
  【计算属性VS方法】
  计算属性可以产生缓存（当依赖的属性没改变时，获取计算属性，不会重新求值，而是直接得到结果）
  方法不会（每次调用都会计算一遍）
  
  【计算属性VS侦听属性】
  当开销小时使用计算属性
  
  【计算属性的get和set】
  默认get，当需要set时，可指定
  computed:{
  	get:function(){},
  	set:function(){}
  }
  
  

• 侦听属性

  当侦听的属性发生变化时，触发方法
  当数据变化时需要执行异步，或者开销大时，需要watch侦听器
  
  例：
    data: {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    },
    watch: {
      firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
      }
    }
    这个例子，应该用计算属性直接计算出fullName更好。
  

Class与Style绑定

• class绑定

  【class绑定对象】
  //   可以与class合并         active是类名  isActive是变量，判断类名是否存在（boolean）
  <div class="static" :class="{ active: isActive ,'text-danger':hasError}"></div>
  data:{
  	isActive:true,
  	hasError:false
  }
  
  渲染结果=>
  <div class="static active"></div>
  
  【class绑定数组】
  //          属性：绑定的类名
  <div :class="[activeClass, errorClass]"></div>
  data:{
  	activeClass:'active',
  	errorClass:'text-danger'
  }
  渲染之后=>
  <div class="active text-danger"></div>
  
  可以使用三目
  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  可以在数组语法中使用对象
  <div v-bind:class="[{ active: isActive }, errorClass]"></div>
  

• style绑定

  【style绑定对象】
  <div :style="styleObject"></div>
  data: {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
  【style绑定数组】
  <div :style="[baseStyles, overridingStyles]"></div>
  

条件渲染

v-if
v-else-if
v-else
v-show

列表渲染

v-for
【遍历数组】
//      值    索引
v-for="(item,index) in items" 
【遍历对象】
//      键值   键名  索引
v-for="(value,name,index) in object"
尽量不要使用index作为key值

【组件上使用v-for】
<my-component
  v-for="(item, index) in items"
  v-bind:data="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

事件监听

v-on @
可以直接监听js代码
<button v-on:click="counter += 1">Add 1</button>
可以监听一个方法,可以传递一些参数
<button v-on:click="greet(...)">Greet</button>
可以传递特殊参数$event,来访问原始的dom事件
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}
【事件修饰符】
.stop  阻止事件继续传播
.prevent  阻止浏览器默认行为，比如<a @click.prevent="change"></a> //不会跳转a标签的连接
.capture  添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
.self  只有当event.target是自己时才触发
.once  事件只触发一次
.passive  默认行为立刻触发（当与.prevent一起使用时，.prevent会被忽略）
【按键修饰符】只能修饰按键事件：keydown/keyup/keypress
.enter 只有是enter键时触发，  @keyup.enter 当enter键弹起时触发
.tab
.delete
.space
.up
.down
.left
.right
.page-down 向下键触发
....

全局注册keyCodes
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 67
<input type="text" @keyup.f1="change" /> c弹起时触发

【系统修饰符】
.ctrl
.alt
.shift
.meta
    <!-- Alt + C -->
    <input v-on:keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div v-on:click.ctrl="doSomething">Do something</div>
.exact 精确的控制系统修饰符键，
	例：
	click.ctrl，ctrl和shift一起按下也会触发，不精确
	click.ctrl.exact 只在ctrl按下触发
【鼠标按钮修饰符】
.left
.right
.middle
<button @click.prevent.right="change">点击改变</button> //按下鼠标右键时触发(并且通过.prevent阻止了浏览器的默认弹框行为)

表单输入绑定

v-model双向绑定
会忽略表单元素原本的value、checked、selected属性，使用v-model绑定的数据来渲染

- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

【修饰符】
.lazy 不是input事件后更新了，而是在change事件后更新
	<input v-model.lazy="msg"> 在“change”时而非“input”时更新
.number 
	将用户输入转为数字类型，默认是转为string类型
.trim
	过滤首尾空白字符

【.sync修饰符】修饰v-bind的，也是语法糖

<Son2 :count="count" @update:count="newValue=>count=newValue"></Son2>
<!-- 语法糖（简写方式） -->
<Son2 :count.sync="count"></Son2>
儿子需要通过this.$emit("updata:count",2)这样向父亲传递数据

<Son2 v-bind.sync="obj"></Son2>  //这样可以将obj对象中所有属性进行双向绑定
data:{
	obj:{
		title:'biaoti',
		name:'gmh',
		age:'22'
	}
}
自组件中可以通过this.$emit('updata:title',...)、this.$emit('updata:name',...)、this.$emit('updata:age',...)向父组件传递数据

插槽

【默认插槽】
	<slot></slot>
【具名插槽】
	<slot name="first"></slot>
	
	使用：
	<template v-slot:first>
		...
	</template>
【作用域插槽】:在父组件中可以使用绑定在插槽上的、自组件中的数据
	<slot name="first" :row="item" :$index="index"></slot>
	
	使用
	<template v-slot:first="scope">
		{{scope.row}}
		{{scope.$index}}
	</template>

组件基础

组件的注册 全局注册(Vue.component方法)，局部注册(components属性)
组件的数据data是函数
组件必须有个根元素
父亲通过:绑定元素给儿子传递数据，儿子通过props接收
儿子通过$emit给父亲传递数据，父亲通过@事件监听器接收
组件v-model，是语法糖，儿子需要用props来接收value属性
通过插槽给子组件传递内容

【props写法】
  props:["propA","propB"]
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
   }
【自定义事件】
this.$emit('myevent')  @event="eventChange"
【将原生事件绑定到组件上】
	通过.native修饰符（有时候不太行）
	通过$listeners，直接将父组件的事件传递给自组件，绑定到对应的结构上
	比如：
	我想绑定到原生的input表单的focus事件上去
	父：<HelloWorld @focus="change"></HelloWorld>
	子：<input type="text" @focus="this.$listeners.focus" />

组件注册

//局部组件注册
import HelloWorld from "./components/HelloWorld.vue";
var componentA = {
  render: function(h, context) {
    console.log(context);
    return h("div", {}, ["我是局部组件1,谁注册我，谁就可以用我"]);
  },
};
export default {
  name: "App",
  components: {
    HelloWorld,
    componentA,
  },
// 注册全局组件
Vue.component("component-g", {
  render: function(h) {
    return h("div", {}, ["我是全局组件1，所有的子组件都可以用我"]);
  },
});
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  props:["title"]
  template: '<button v-on:click="count++">{{title}}You clicked me {{ count }} times.</button>'
})

动态组件&异步组件

【动态组件】
//会根据currentTabComponent动态渲染组件
<component v-bind:is="currentTabComponent"></component>
【在动态组件上使用keep-alive】
// 下面这个component组件，会根据currentTabComponent属性动态渲染，每次切换都要重新渲染，这样肯定是不好的。
//可以通过keep-alive标签对组件进行缓存
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
【keep-alive的作用】
	<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
【activated和deactivated】
	当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
【使用场景】
    <!-- 基本 -->
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>

    <!-- 多个条件判断的子组件 -->
    <keep-alive>
      <comp-a v-if="a > 1"></comp-a>
      <comp-b v-else></comp-b>
    </keep-alive>

    <!-- 和 `<transition>` 一起使用 -->
    <transition>
      <keep-alive>
        <component :is="view"></component>
      </keep-alive>
    </transition>
【异步组件】
	服务器端加载的模块，需要注册到本地使用
	Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
    【全局注册异步组件】
    Vue.component('async-example', function (resolve, reject) { //这个函数在组件被渲染时触发
      setTimeout(function () {
        // 向 `resolve` 回调传递组件定义
        resolve({
            render: function(h) {
        		return h("div", {}, ["我是异步组件"]);
      		},
        })
      }, 1000)
    })
    
    Vue.component(
      'async-webpack-example',
      // 这个动态导入会返回一个 `Promise` 对象。
      () => import('./my-async-component')
    )
	【局部注册异步组件】
      components: {
        'my-component': () => import('./my-async-component')
      }
    【异步组件工厂函数参数】
        const AsyncComponent = () => ({
        // 需要加载的组件 (应该是一个 `Promise` 对象)
        component: import('./MyComponent.vue'),
        // 异步组件加载时使用的组件
        loading: LoadingComponent,
        // 加载失败时使用的组件
        error: ErrorComponent,
        // 展示加载时组件的延时时间。默认值是 200 (毫秒)
        delay: 200,
        // 如果提供了超时时间且组件加载也超时了，
        // 则使用加载失败时使用的组件。默认值是：`Infinity`
        timeout: 3000
        })
    

组件之间的数据传递

props $emit 父子组件通信
$attrs $listeners
$root 访问根组件
$parent 访问父组件
$ref 访问子组件
provide reject 依赖注入
sessionStorage localStorage cookie
vuex

渲染函数和JSX

模板编译：一般情况下使用模板来创建我们的html元素。但是在一些场景中需要用到渲染函数。

模板编译实际上也是被编译成了渲染函数。

渲染函数：

createElement（它是render函数的第一个参数），可以将元素渲染为虚拟dom节点。

render：可以将虚拟的dom节点渲染为真实的dom节点，并且插入到页面中

使用js的语法，代替模板编译中的v-if、v-else、v-model等等

通过this.$slots访问静态插槽，通过this.$scopedSlots访问作用域插槽，传递数据需要scopedSlots属性

这样操作会显得代码臃肿，操作麻烦，就有了jsx语法

createElement(
//标签名
    "div",
//属性对象
    {}, 
//子节点
[
  "div1",
  createElment("li", {}, "li-我是div的第一个子节点"),
  createElement("li", {}, "我是div的第二个子节点 "),
  "我是div的第三个子节点（文本节点）",
]);

//createElment的属性对象
{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

函数式组件：组件中没有任何状态，也没有监听任何给它传递的状态，也没有生命周期方法。

一个只接受props的函数，也没有实例。也可以结合jsx来使用。

//结构
//函数式组件开销低
Vue.component('my-component', {
  //当前组件为
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // context对象，用来接受数据的,有以下数据
    // props：提供所有 prop 的对象
	// children：VNode 子节点的数组
    // slots：一个函数，返回了包含所有插槽的对象
    // scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
    // data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
    // parent：对父组件的引用
    // listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
    // injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。
  }
})

// 函数组件+jsx
//jsx语法
在{}里写js
在<>里写html
v-model  => vModel    vModel_trim    
v-on     => vOn       vOn:click_stop_prevent
v-html   => domPropsInnerHTML

子组件是vue文件，在script标签的渲染函数中使用render(){}  //this获取实例数据
{/* 默认插槽 */}
{this.$slots.default}
{this.$scopedSlots.default()}
{/* 具名插槽 */}
{this.$slots.header}
{this.$scopedSlots.header()}
{/* 作用域插槽 */}
{this.$scopedSlots.footer({
level: this.level,
})}

子组件是js文件，在函数式组件中的渲染函数中使用render(h,context){}  //context获取实例数据
{/* 默认插槽 */}
{context.scopedSlots.default ? context.scopedSlots.default() : ""}
{/* 具名插槽 */}
{context.scopedSlots.header ? context.scopedSlots.header() : ""}
{/* 作用域插槽 */}
{context.scopedSlots.footer
? context.scopedSlots.footer({
level: props.level,
title: props.title,
})
: ""}

export default ({ props }) => <p>hello {props.message}</p>

const HelloWorld = ({ props }) => <p>hello {props.message}</p>

例
【父】
// 函数式组件
export default {
  functional: true,
  props: ["title", "level"],
  render(h, context) {
    const { props } = context;
    // 具名插槽
    const html1 = `<h${props.level}>哈哈哈</h${props.level}>`;
    console.log(context, "hanshushi");
    return (
      <div>
        123
        {/* 默认插槽 */}
        {context.scopedSlots.default ? context.scopedSlots.default() : ""}
        {/* 具名插槽 */}
        {context.scopedSlots.header ? context.scopedSlots.header() : ""}
        {/* 作用域插槽 */}
        {context.scopedSlots.footer
          ? context.scopedSlots.footer({
              level: props.level,
              title: props.title,
            })
          : ""}
        <div domPropsInnerHTML={html1}></div>
        <p>我是函数式组件{props.title}</p>
      </div>
    );
  },
};
【子】
    <!-- 函数式组件 -->
    <H title="title：函数式组件" level="1">
      kjlk
      <template v-slot:header>
        header插槽（jsx）
      </template>
      <template v-slot:footer="scope"> footer，数据：{{ scope }} </template>
    </H>

过渡 & 动画

【过渡】 进入和离开
.v-enter .v-enter-active .v-enter-to
.v-leave .v-leave-active .v-leave-to

使用transition标签包裹需要过渡的元素
<transition name="fade">
	...
</transition>

【结合css过渡】 transition
.v-enter-active,
.v-leave-active {
  transition: 1s;
}
.v-enter,
.v-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
【结合css帧动画】animation
.v-enter-active {
  animation: bounce-in .5s;
}
.v-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
【duration】 指定进入和离开的时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
【js钩子】
可以结合Velocity来实现js动画
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
【过渡模式】 当一个进入，一个离开时，可以使用css的position实现同时进入和离开，可以使用mode属性实现过渡模式
mode属性
out-in:当前元素先过渡，完成之后新元素再过渡进入
in-out:新元素先过渡，完成之后当前元素再过渡离开
<transition name="fade" mode="out-in"></transition>
【列表动画】
  <transition-group name="list" tag="ul">
    <li v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </li>
  </transition-group>
  动画和上面一样，指定进入和离开动画就好
  
 【可复用的过渡】 将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了
 Vue.component('my-special-transition', {
  template: '\
    <transition\
      name="very-special-transition"\
      mode="out-in"\
      v-on:before-enter="beforeEnter"\
      v-on:after-enter="afterEnter"\
    >\
      <slot></slot>\
    </transition>\
  ',
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})
【动态过渡】
【gsap】
结合gasp可以实现对一个属性数值的更新动画
还可以通过这种方式，注册一个组件到全局，在组件中使用作用于应用这个组件的数值的数值

混入

混入对象可以混入到任意组件中，如果存在同名选项，优先组件数据。

【混入对象】
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
【混入到局部组件中】 通过组件的minin属性
var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

【全局混入】 通过Vue.minin()将混入对象合并到根组件
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
new Vue({
  myOption: 'hello!'
})
// => "hello!"

自定义指令

【全局注册自定义指令】Vue.directive()
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
【局部注册】directives属性
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

【使用】
<input v-focus>

【钩子函数】可以给指令绑定钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。
【钩子函数的参数】
假如一个指令格式这样的：v-demo:[direction]="200"
el        绑定的元素
binding   对象，可以获取指令的数据
	name 指令名 demo
	value 指令的绑定值 "200"（这个是js表达式，可以传对象、数组等）
	oldValue 指令的前一个绑定值 ""
	expression 字符串形式指令表达式（默认js表达式）
	arg 指令传递的参数 direction(这个是变量，可以接收任何值)
vnode     虚拟节点
oldVnode  上一个虚拟节点
【函数简写】在bind和update时触发相同的行为，而不关心其他钩子
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

插件

【使用插件】Vue.use()，在new Vue()之前启用

Vue.use(MyPlugin, { someOption: true })

someOption，会自动阻止多次注册相同的插件，多次调用只注册一次该插件

【开发插件】
Vue.js 的插件应该暴露一个 install 方法。（这样才可以使用Vue.use添加全局注册）
这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

过滤器

【使用】
<!-- 在双花括号中 -->
{{ message | capitalize(arg2,arg3) }} //message将作为过滤器的第一个参数

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

【局部注册】
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
【全局注册】
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
  // ...
})

响应式

vue中下面这种不会触发vue的响应式变化
this.obj2[this.obj2.length] = "d";
this.obj.newProp = "ccc";

需要通过set方法来给对象添加数据
【全局】
Vue.set(obj,key,value)
【局部】
vm.$set(obj,key,value)