vue2 这段代码是什么意思呀

Question

一下代码有些不明白的地方，求大神解答：

return (
      <table
        class="el-table__body"
        cellspacing="0"
        cellpadding="0"
        border="0">
        <colgroup>
          {
            this._l(this.columns, column =>
              <col
                name={ column.id }
                width={ column.realWidth || column.width }
              />)
          }
        </colgroup>
        <tbody>
          {
            this._l(this.data, (row, $index) =>
              [<tr
                style={ this.rowStyle ? this.getRowStyle(row, $index) : null }
                key={ this.table.rowKey ? this.getKeyOfRow(row, $index) : $index }
                on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
                on-click={ ($event) => this.handleClick($event, row) }
                on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
                on-mouseenter={ _ => this.handleMouseEnter($index) }
                on-mouseleave={ _ => this.handleMouseLeave() }
                class={ [this.getRowClass(row, $index)] }>
                {
                  this._l(this.columns, (column, cellIndex) =>
                    <td
                      class={ [column.id, column.align, column.className || '', columnsHidden[cellIndex] ? 'is-hidden' : '' ] }
                      on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                      on-mouseleave={ this.handleCellMouseLeave }>
                      {
                        column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.context || this.table.$vnode.context })
                      }
                    </td>
                  )
                }
                {
                  !this.fixed && this.layout.scrollY && this.layout.gutterWidth ? <td class="gutter" /> : ''
                }
              </tr>,
                this.store.states.expandRows.indexOf(row) > -1
                ? (<tr>
                    <td colspan={ this.columns.length } class="el-table__expanded-cell">
                      { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
                    </td>
                  </tr>)
                : ''
              ]
            )
          }
        </tbody>
      </table>
    );

1. this._l是什么意思呀

2. on-mouseenter={ => this.handleMouseEnter($index) } ，箭头前的 又是什么意思

Answer 1

this._l是vue的v-for。on-mouseenter是绑定mouseenter事件

Answer 2

这个是 JSX + ES6 要了解这段内容，你需要掌握 这些知识。
这个不好讲解咯，需要你自己去学习。关键词就是 JSX 和 ES6

Answer 3

我是查this._l是什么进来的，已经在src/core/instance/render.js中找到了，其实就是对Array、Object遍历的一个封装。

楼主的第二个问题其实更简单：

on-mouseenter={ _ => this.handleMouseEnter($index) }
// 等于
on-mouseenter={ (_) => this.handleMouseEnter($index) }
// 等于
on-mouseenter={ var _this = this; function(_){ return _this.handleMouseEnter($index)} }

这样应该就能明白是什么东东了，其实就是es6的一些语法糖，写起来更好看些，不会到处都是function，另外也让this更容易明白实际所指。