Vue构造类的选项(三)

directives(自定义指令)

// input框自动聚焦
// 全局自定义指令
Vue.directive('focus',{
    
    
  inserted: function(el){
    
    
    el.focus()
  }
})
// 局部自定义指令
directives:{
    
    
  focus: {
    
    
    inserted: function(el){
    
    
      el.focus()
    }
  }
}

钩子函数
bind: 只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用(仅仅保证父节点存在，但不一定被插入到文档中)
update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有，可以通过比较前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
unbind：只调用一次，指令与元素解绑时调用
钩子函数参数
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 来进行。
动态指令参数
eg: v-mydirective:[argument] = “value”

函数简写
bind和update时触发相同的行为，不关心其他钩子函数，则可以这么写：

Vue.directive('color-swatch',function(el,binding){
      
      
  el.style.backgroundColor = binding.value
})

mixins

混入对象的钩子将在组件自身钩子之前调用
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时(例如method方法重名时)，取组件对象的键值对

自定义合并策略
自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数

name

只有作为组件选项时起作用
允许组件模板递归调用自身，注意，组件在全局用Vue.component()注册时，全局ID自动作为组件的name
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

delimiters(分隔符)

限制：这个选项旨在完整构建版本中的浏览器内编译时可用
作用：改变纯文本插入分隔符
默认值：["{ {","}}"]

new Vue({
    
    
  delimiters: ['${','}']
})

model

允许一个自定义组件在使用v-model时定制prop和event。默认情况下，一个组件上的v-model会把value用作prop且把input用作event

Vue.component('my-checkbox', {
    
    
  model: {
    
    
    prop: 'checked',
    event: 'change'
  },
  props: {
    
    
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
    
    
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

// 上面代码相当于
<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

inheritAttrs

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

注意：这个选项不影响 class 和 style 绑定。

comments

限制：这个选项只在完整构建版本中的浏览器内编译时可用。
作用：当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。