Vue 之render函数的学习与使用

「爱情、让人受尽委屈。」 2022-05-17 23:29 323阅读 0赞

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

  1. <h1>{ { blogTitle }}</h1>

在渲染函数中:

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

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

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

  1. createElement(
  2. // {String | Object | Function}
  3. // 一个 HTML 标签字符串,组件选项对象,或者
  4. // 解析上述任何一种的一个 async 异步函数,必要参数。
  5. 'div',
  6. // {Object}
  7. // 一个包含模板相关属性的数据对象
  8. // 这样,您可以在 template 中使用这些属性。可选参数。
  9. {
  10. // (详情见下一节)
  11. },
  12. // {String | Array}
  13. // 子节点 (VNodes),由 `createElement()` 构建而成,
  14. // 或使用字符串来生成“文本节点”。可选参数。
  15. [
  16. '先写一些文字',
  17. createElement('h1', '一则头条'),
  18. createElement(MyComponent, {
  19. props: {
  20. someProp: 'foobar'
  21. }
  22. })
  23. ]
  24. )

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

  1. addSearch (h, {column}) {
  2. let inputValue = {}
  3. return h('Input', {
  4. props: {
  5. placeholder: 'Search' + ' ' + column.label,
  6. icon: 'ios-search-strong'
  7. },
  8. style: {
  9. paddingRight: '5px'
  10. },
  11. on: {
  12. input: val => {
  13. inputValue = val
  14. if (!inputValue) {
  15. this.vaildInputValue(column.label, inputValue)
  16. }
  17. },
  18. class: 'ivu-input-icon',
  19. 'on-click': () => {
  20. this.vaildInputValue(column.label, inputValue)
  21. },
  22. 'on-enter': () => {
  23. console.log('enter')
  24. this.vaildInputValue(column.label, inputValue)
  25. }
  26. }
  27. })
  28. },

如果是element UI

  1. addSearch (h, {column}) {
  2. let inputValue = {}
  3. return h('el-input', {
  4. attrs: {
  5. placeholder: 'Search',
  6. 'suffix-icon': 'el-icon-search'
  7. },
  8. style: {
  9. paddingRight: '5px'
  10. },
  11. on: {
  12. input: val => {
  13. inputValue = val
  14. if (!inputValue) {
  15. this.vaildInputValue(column.label, inputValue)
  16. }
  17. },
  18. 'change': () => {
  19. console.log('click')
  20. this.vaildInputValue(column.label, inputValue)
  21. },
  22. 'enter': () => {
  23. console.log(enter)
  24. this.vaildInputValue(column.label, inputValue)
  25. }
  26. }
  27. })

他们本身自带的定义事件可以让我们大大提高了工作效率

发表评论

表情:
评论列表 (有 0 条评论,323人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vuerender函数

    回忆Vue的一些基本概念 今天我们学习的目的是了解和学习Vue的`render`函数。如果想要更好的学习Vue的`render`函数相关的知识,我们有必要重温一下Vue中