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' }