# 1、模板语法 {#_1、模板语法}

# 1.1 指令 {#_1-1-指令}

{{msg}}/v-text   # 文本插值
v-html   # 原始html
v-once   # 只渲染一次
v-show   # css控制显示隐藏
v-if     # 根据表达式渲染元素   # 用 key 管理可复用的元素
v-else/v-else-if # 紧跟v-if的else
v-for    # 列表渲染  可以循环数字、数组、对象和对象数组
v-on     # 事件渲染
v-bind   # 动态绑定属性 :是缩写
v-model  # 表单输入绑定
v-slot   # 插槽 限用于<template>/组件
v-pre    # 不编译，显示源码
v-cloak  # 隐藏未编译直到实例完成

# 1.2 v-on {#_1-2-v-on}

@[event].stop   # @是v-on的缩写  [event]是动态事件  .stop是修饰符
.stop    # 调用 event.stopPropagation()。停止冒泡
.prevent    # 调用 event.preventDefault()。阻止默认行为
.capture    # 添加事件侦听器时使用 capture 模式。
.self    # 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}    # 只当事件是从特定键触发时才触发回调。
.native    # 监听组件根元素的原生事件。
.once    # 只触发一次回调。
.left    # (2.2.0) 只当点击鼠标左键时触发。
.right    # (2.2.0) 只当点击鼠标右键时触发。
.middle    # (2.2.0) 只当点击鼠标中键时触发。
.passive    # (2.3.0) 以 { passive: true } 模式添加侦听器

# 1.3 v-bind {#_1-3-v-bind}

#:class和:style绑定样式
:class="[ 'red', 'thin', isactive ? 'active' : '' ]" # 1.使用数组、三元表达式
:class="[ 'red', 'thin', { 'active', isactive } ]" # 2.使用嵌套对象
:class="{ red: true, italic: true, active: true }" # 3.使用对象

:[key]="value" # :是v-bind的缩写  [key]是动态特性名  value可以属性/表达式/数组/组合/json对象
.prop     # 被用于绑定 DOM 属性 (property)。
.camel     # (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync     # (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

# 1.4 v-for {#_1-4-v-for}

# 1.循环数组和对象数组
<p v-for="(item, i) in list">{{item.name}},{{i}}</p>  
# 2.循环对象
<p v-for="(val, key, i) in user">{{val}},{{key}},{{i}}</p>   
# 3.迭代数字
<p v-for="count in 10">{{count}}</p>   
# 在组件中使用 v-for 时，必须添加key(=string/number)。

# 1.5 v-model {#_1-5-v-model}

.lazy     # 取代 input 监听 change 事件
.number     # 输入字符串转为有效的数字
.trim     # 输入首尾空格过滤

# 1.6 自定义指令 {#_1-6-自定义指令}

钩子函数：bind/inserted/update/componentUpdated/unbind 函数参数：el、binding、vnode 、 oldVnode

<input v-focus>
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
# 函数简写(只在 bind 和 update 时触发相同行为)
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

# 2、API简要 {#_2、api简要}

# 2.1 全局API {#_2-1-全局api}

Vue.extend( options )   # 构造器扩展
Vue.directive( id, [definition] )   # 注册或获取全局指令。
Vue.set( target, key, value )   # 全局操作
Vue.component( id, [definition] )   # 注册或获取全局组件。
Vue.nextTick( [callback, context] )   # 在下次 DOM 更新循环结束之后执行延迟回调。
Vue.delete( target, key )   # 删除对象的属性。
Vue.filter( id, [definition] )   # 注册或获取全局过滤器。
Vue.use( plugin )   # 安装 Vue.js 插件。
Vue.mixin( mixin )   # 全局注册一个混入
Vue.compile( template )   # 在 render 函数中编译模板字符串。
Vue.observable( object )   # 让一个对象可响应。v2.6.0+
Vue.version   # 获取Vue 安装版本号。可根据不同版本号制定不同策略。

# 2.2 选项-生命周期 {#_2-2-选项-生命周期}

beforeCreate(){}    // 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created(){}         // 组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount(){}     // 未执行渲染、更新，dom未创建
mounted(){}         // 初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate(){}    // 更新前，可用于获取更新前各种状态
updated(){}         // 更新后，所有状态已是最新
beforeDestroy(){}   // 销毁前，可用于一些定时器或订阅的取消
destroyed(){}       // 组件已销毁，作用同上
activated(){}       // keep-alive 缓存的组件激活时
deactivated(){}     // keep-alive 缓存的组件停用时
errorCaptured(){}   // 子孙组件的错误时被调用

# 2.3 选项-数据 {#_2-3-选项-数据}

data: Object|Function  # Vue 实例的数据对象。
props: Array<string>|Object   # 用于接收来自父组件的数据。
propsData: {[key:string]:any}   # 创建实例时传递 props。只用于 new 创建的实例中。
computed: {[key:string]:Function|{get:Function,set:Function}}   # 计算属性
methods: {[key:string]:Function}   # 方法
watch: {[key:string]:string|Function|Object|Array}   # 监听器

# 2.4 选项-DOM {#_2-4-选项-dom}

el: string|Element   # 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
template: string   # 模板
render: (createElement: () => VNode) => VNode   # 渲染函数
renderError: (createElement: () => VNode, error: Error) => VNode   # render函数错误提供另一种渲染输出

# 2.5 选项-资源 {#_2-5-选项-资源}

directives: Object   # 私有指令
filters: Object   # 私有过滤器
components: Object   # 私有组件

# 2.6 选项-组合 {#_2-6-选项-组合}

parent: Vue instance   # 指定已创建的实例之父实例，在两者之间建立父子关系。
mixins: Array<Object>   # 混入
extends: Object|Function   # 继承
provide / inject   # 为高阶插件/组件库提供用例。

# 2.7 选项-其他 {#_2-7-选项-其他}

name: string   # 只有作为组件选项时起作用。
delimiters: Array<string>   # 改变纯文本插入分隔符。只在完整构建版本中的浏览器内编译时可用
functional: boolean   # 使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。
model: { prop?: string, event?: string }   # 允许一个自定义组件在使用 v-model 时定制 prop 和 event。
inheritAttrs: boolean   #
comments: boolean   # 是否保留且渲染html注释

# 2.8 实例属性 {#_2-8-实例属性}

vm.$data: Object   # Vue 实例观察的数据对象。
vm.$props: Object   # 当前组件接收到的 props 对象。
vm.$el: Element   # Vue 实例使用的根 DOM 元素。
vm.$options: Object   # 用于当前 Vue 实例的初始化选项。
vm.$parent: Vue instance   # 父实例，如果当前实例有的话。
vm.$children: Array<Vue instance>   # 当前实例的直接子组件。
vm.$slots: { [name: string]: ?Array<VNode> }   # 用来访问被插槽分发的内容。
vm.$scopedSlots: { [name: string]: props => Array<VNode> | undefined }   # 用来访问作用域插槽。
vm.$refs: Object   # 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。
vm.$isServer: boolean   # 当前 Vue 实例是否运行于服务器。
vm.$attrs: { [key: string]: string }   # 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
vm.$listeners: { [key: string]: Function | Array<Function> }   # 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

# 2.9 实例方法 {#_2-9-实例方法}

vm.$watch( expOrFn, callback, [options] )    #监听器
vm.$set( target, key, value )   # 全局 Vue.set 的别名。
vm.$delete( target, key )   # 全局 Vue.delete 的别名。

vm.$on( event, callback )   # 监听当前实例上的自定义事件。
vm.$once( event, callback )   # 监听一个自定义事件，但是只触发一次.
vm.$off( [event, callback] )   # 移除自定义事件监听器。
vm.$emit( eventName, [...args] )   # 触发当前实例上的事件。

vm.$mount( [elementOrSelector] )   # -生命周期-挂载实例
vm.$forceUpdate()   # -生命周期-重新渲染
vm.$nextTick( [callback] )   # -生命周期-将回调延迟到下次 DOM 更新循环之后执行。
vm.$destroy()   # -生命周期-销毁实例

# 2.10 内置组件 {#_2-10-内置组件}

component   # 渲染一个"元组件"为动态组件。依 is 的值，来决定哪个组件被渲染。
transition   # 为单个元素/组件的过渡效果。
transition-group   # 为多个元素/组件的过渡效果。
keep-alive   # 动态组件
slot   # 为组件模板之中的内容分发插槽。

# 2.11 特殊特性 {#_2-11-特殊特性}

key: number | string   # 设置唯一的值
ref: string   # 用来给元素或子组件注册引用信息。
is: string | Object (组件的选项对象)   # 用于动态组件且基于 DOM 内模板的限制来工作。
slot/slot-scope(已废弃)：v-slot指令替代
scope(已移除)

# 3、其他 {#_3、其他}

# 3.1 计算属性和侦听器 {#_3-1-计算属性和侦听器}

• 计算属性computed具有缓存性，适合做筛选，不可异步。多用于多对一场景，一些值变化时，生成一个计算值。
• 侦听器watch适合做异步或开销较大的操作。多用于一对多场景，监听某个值变化时，处理相应的变化。

# 3.2 插件 {#_3-2-插件}

Vue.use(MyPlugin)   // 使用插件
// 开发插件
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    // ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    // ...
  })
  //  4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

# 3.3 过滤器 {#_3-3-过滤器}

常用于文本格式化，用在双花括号插值和 v-bind 表达式中。

{{ message | capitalize }}
<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('dateFormat', function (time,format) {
	let t = new Date(time);
	let tf=(str)=>(str.toString().padStart(2,'0'));
	return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
		switch(a){
			case 'yyyy':
				return tf(t.getFullYear());
				break;
			case 'MM':
				return tf(t.getMonth() + 1);
				break;
			case 'mm':
				return tf(t.getMinutes());
				break;
			case 'dd':
				return tf(t.getDate());
				break;
			case 'HH':
				return tf(t.getHours());
				break;
			case 'ss':
				return tf(t.getSeconds());
				break;
		}
	})
})

# 4、组件 {#_4、组件}

• 组件是可复用的 Vue 实例，带有一个名字，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
• 组件的data必须是函数。
• 每个组件必须只有一个根元素。

# 4.1 组件注册 {#_4-1-组件注册}

• 全局注册 Vue.component(name, options)

• 局部注册

• 在模块系统中局部注册

  var ComponentA = { /* ... */ } import ComponentB from 'ComponentB' new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })

• 基础组件的自动化全局注册

# 4.2 Prop {#_4-2-prop}

• prop传值为单向数据流，子组件可通过新定义参数接受改值

• prop类型、默认值、校验

• prop 可以通过 v-bind 动态赋值

  Vue.component('my-component', { props: { propA: Number, // 基础的类型检查 (null 和 undefined 会通过任何类型验证) propB: [String, Number], // 多个可能的类型 propC: { type: String, required: true }, // 必填的字符串 propD: { type: Number, default: 100 }, // 带有默认值的数字 propE: { type: Object, default:()=> { message: 'hello' }}, // 对象或数组默认值必须从一个工厂函数获取 propF: { validator: (value)=> ['success', 'warning', 'danger'].indexOf(value) !== -1 }, // 自定义验证函数 } })

# 4.3 event 自定义事件 {#_4-3-event-自定义事件}

• 事件名：使用 kebab-case
• 自定义组件的 v-model : 需要实现内部input的:value和@input
• .native 修饰符 将原生事件绑定到组件
• .sync 修饰符 双向绑定
• 监听子组件事件

# 4.4 插槽slot {#_4-4-插槽slot}

- 插槽内容
- 编译作用域
- 后备内容：可在slot内定义默认内容
- 具名插槽：用name特性定义额外插槽，用带有v-slot的<template>提供内容;v-slot:header可缩写为#header
- 作用域插槽：如<slot v-bind:user="user">{{ user.lastName }}</slot>
- 动态插槽名：如<template v-slot:[dynamicSlotName]></template>
- 将插槽转换为可复用的模板：模板基于输入的 prop 渲染出不同的内容

# 4.5 动态组件 {#_4-5-动态组件}

• is特性：实现动态组件
• keep-alive：包裹动态组件时，会缓存不活动的组件实例
• 异步组件：...
• 处理加载状态: v2.3.0+ 新增

# 5、过渡与动画 {#_5、过渡与动画}

# 5.1 过渡的类名 {#_5-1-过渡的类名}

v-enter    进入过渡的开始状态。# 在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active    进入过渡生效时的状态。# 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
v-enter-to    进入过渡的结束状态。# 在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave    离开过渡的开始状态。# 在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active    离开过渡生效时的状态。# 在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
v-leave-to    离开过渡的结束状态。# 在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
# 自定义过渡的类名
enter-class    enter-active-class    enter-to-class
leave-class    leave-active-class    leave-to-class

# 5.2 显性的过渡持续时间 {#_5-2-显性的过渡持续时间}

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

# 5.3 JavaScript 钩子 {#_5-3-javascript-钩子}

# 这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用
<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: {   # 当与 CSS 结合使用时, 回调函数 done 是可选的
  beforeEnter: function (el){// ...},
  enter: function (el, done) {// ... done() }, 
  afterEnter: function (el){// ...},
  enterCancelled: function (el) {// ...},

  beforeLeave: function (el) {// ...},
  leave: function (el, done) {// ... done() }, 
  afterLeave: function (el) {// ...},
  leaveCancelled: function (el) {// ...}  # leaveCancelled 只用于 v-show 中
}

# 使用 Velocity.js 
  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 })
    }
  }

# 5.4 初始渲染的过渡 {#_5-4-初始渲染的过渡}

# 可以通过 appear 特性设置节点在初始渲染的过渡
<transition
  appear
  # 自定义 CSS 类名
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class"
  # 自定义 JavaScript 钩子
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>...</transition>

# 5.5 其他 {#_5-5-其他}

多个元素的过渡：key 特性
过渡模式： mode="out-in" mode="in-out"
多个组件的过渡：使用动态组件
列表过渡：使用transition-group  组件
列表的排序过渡：v-move 特性
表的交错过渡：通过 data 属性与 JavaScript 通信
可复用的过渡：将 transition 或者 transition-group 作为根组件，然后将任何子组件放置在其中 
动态过渡：通过 name 特性来绑定动态值。 v-bind:name="transitionName"

# 5.6 状态过渡 {#_5-6-状态过渡}

对于据元素本身的动效：数字和运算、颜色的显示、SVG 节点的位置、元素的大小和其他的属性

# 使用第三方库来实现切换元素的过渡状态
数值：TweenMax.min.js
CSS的color值：Tween.js和Color.js
动态状态过渡
把过渡放到组件里