vue总结2

1. 给router-link添加事件

之前用v-link 现在用 router-link 添加事件要用原生的.native修饰v-on

<my-component v-on:click.native="doTheThing"></my-component>

2.$on 与 $emit

3. 跳过css检测 v-bind:css="false"

4. key值绑定实现数据变化重新渲染整个元素  场景：比如父组件控制子组件重新渲染

5. ref标记组件

6.render函数

createElement接受三个参数：

• {String | Object | Function}即一个HTML标签 | 组件选项 | 一个函数，必须返回上述其中一个

• {Object}一个对应HTML标签属性的数据对象（可选）

• {String | Array}子节点（VNode）（可选）

• {
    // 和`v-bind:class`一样的 API
    'class': {
      foo: true,
      bar: false
    },
    // 和`v-bind:style`一样的 API
    style: {
      color: 'red',
      fontSize: '14px'
    },
    // 正常的 HTML 特性
    attrs: {
      id: 'foo'
    },
    // 组件 props
    props: {
      myProp: 'bar'
    },
    // DOM 属性
    domProps: {
      innerHTML: 'baz'
    },
    // 事件监听器基于 "on"
    // 所以不再支持如 v-on:keyup.enter 修饰器
    // 需要手动匹配 keyCode。
    on: {
      click: this.clickHandler
    },
    // 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。
    nativeOn: {
      click: this.nativeClickHandler
    },
    // 自定义指令. 注意事项：不能对绑定的旧值设值
    // Vue 会为您持续追踨
    directives: [
      {
        name: 'my-custom-directive',
        value: '2'
        expression: '1 + 1',
        arg: 'foo',
        modifiers: {
          bar: true
        }
      }
    ],
    // Scoped slots in the form of
    // { name: props => VNode | Array<VNode> }
    scopedSlots: {
      default: props => h('span', props.text)
    },
    // 如果子组件有定义 slot 的名称
    slot: 'name-of-slot'
    // 其他特殊顶层属性
    key: 'myKey',
    ref: 'myRef'
  }