Vue 之render函数的学习与使用-蒲公英云

Vue 之render函数的学习与使用

render渲染函数
我们可以生成DOM元素在template中，但是我们也可以使用render渲染函数

<h1>{ { blogTitle }}</h1>

在渲染函数中：

render: function (createElement) { 
  return createElement('h1', this.blogTitle)
}

在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。

虚拟 DOM
createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
createElement参数

createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数，必要参数。
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },
  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

生成数据表的每列的tablesearch功能，是动态生成input 输入框，用iview的组件实现的会比较好，因为组件给我们绑定了一些事件，我们呢直接调用就可以。

addSearch (h, {column}) {
      let inputValue = {}
      return h('Input', {
        props: {
          placeholder: 'Search' + ' ' + column.label,
          icon: 'ios-search-strong'
        },
        style: {
          paddingRight: '5px'
        },
        on: {
          input: val => {
            inputValue = val
            if (!inputValue) {
              this.vaildInputValue(column.label, inputValue)
            }
          },
          class: 'ivu-input-icon',
          'on-click': () => {
            this.vaildInputValue(column.label, inputValue)
          },
          'on-enter': () => {
            console.log('enter')
            this.vaildInputValue(column.label, inputValue)
          }
        }
      })
    },

如果是element UI

addSearch (h, {column}) {
      let inputValue = {}
      return h('el-input', {
        attrs: {
          placeholder: 'Search',
          'suffix-icon': 'el-icon-search'
        },
        style: {
          paddingRight: '5px'
        },
        on: {
          input: val => {
            inputValue = val
            if (!inputValue) {
              this.vaildInputValue(column.label, inputValue)
            }
          },
          'change': () => {
            console.log('click')
            this.vaildInputValue(column.label, inputValue)
          },
          'enter': () => {
            console.log(enter)
            this.vaildInputValue(column.label, inputValue)
          }
        }
      })