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

1. 只有作为组件选项时起作用
2. 允许组件模板递归调用自身，注意，组件在全局用Vue.component()注册时，全局ID自动作为组件的name
3. 指定 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 注释。默认行为是舍弃它们。