zoukankan      html  css  js  c++  java
  • vue2.0之render函数

    虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数。

    虚拟DOM

    Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。请近距离看一下这行代码:

    return createElement('h1', this.blogTitle)

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

    render方法会传入一个createElement函数,它是一个用于创建DOM元素或者用于实例化其他组件的构造方法。render方法必须返回一个createElement函数的调用结果,也就是模版内的顶层元素(这个方法在vue2的习惯性使用中经常用h来命名)。

    eg:

      render示例:

    export default {

      render (createElement){

        const menu_items = ["首页","搜索","分类","系统"]

        return createElement('ul',{

          {

            class:{'uk-nav':true}

          },

        menu_items.map(item=>createElement('li',item)))

    }

      }

    }

    上述render方法用template来写的话如下:

        <template>

          <ul>

            <li v-for="item in menu_items">

              {{ item }}

            </li>

          </ul>

        </template>

    正是因为vue2中render只能返回一个createElement,所以vue2一定要有顶层元素。

    render方法内不能再使用任何指令标记。其次,对组件或网页元素之间的属性赋值是通过createElement函数的第二个参数data进行的,domProps会向元素传递标准的DOM属性,而propsDate则用于对其他的Vue组件的自定义属性(props内的定义)进行赋值。

    ------------------------------------------------------------------------------------

    createElement的定义

    createElement(tag,data,children)

    返回值vNode(虚拟节点)

    参数说明:

        tag    类型:String/Object/Function     说明:一个HTML标签,组件类型,或一个函数

        Data    类型:Object                                        说明:一个对应属性的数据对象,用于向创建的节点对象设置属性值

        Children  类型:String/Array           说明:子节点

    向构造的VNode对象设置文本时可以直接传入字符串,例如:

        createElement('div','这是行内文本')

        输出结果就是:

        <div>这是行内文本</div>

    data对象属性表

    {
    // 和`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
    },
     // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
    // 赋值,因为 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 => createElement('span', props.text)
    },
     // 如果组件是其他组件的子组件,需为插槽指定名称
     slot: 'name-of-slot',
    // 其他特殊顶层属性
    key: 'myKey',
    ref: 'myRef'
    }
  • 相关阅读:
    百度之星资格赛1001——找规律——大搬家
    HDU1025——LIS——Constructing Roads In JGShining's Kingdom
    DP(递归打印路径) UVA 662 Fast Food
    递推DP UVA 607 Scheduling Lectures
    递推DP UVA 590 Always on the run
    递推DP UVA 473 Raucous Rockers
    博弈 HDOJ 4371 Alice and Bob
    DFS(深度) hihoCoder挑战赛14 B 赛车
    Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 2)
    DP(DAG) UVA 437 The Tower of Babylon
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/8313061.html
Copyright © 2011-2022 走看看