【转】【Html】Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）

<div id="div1">
<child :level="2">Hello world!</child>
</div>

<script type="text/x-template" id="template">
  <div>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>

<script type="text/javascript">
    Vue.component(‘child‘, {
  template: ‘#template‘,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

    new Vue({
    el:"#div1"
})
</script>

<div id="div1">
<child :level="2">Hello world!</child>
</div>

//html
<div id="div1">
<child :level="3">Hello world!</child>
</div>

//script
<script type="text/javascript">
    Vue.component(‘child‘, {
  render: function (createElement) {
    return createElement(
      ‘h‘ + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

    new Vue({
    el:"#div1"
})
</script>

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签，组件设置，或一个函数
  // 必须 Return 上述其中一个
  ‘div‘,
  // {Object}
  // 一个对应属性的数据对象
  // 您可以在 template 中使用.可选项.
  {
    // (下一章，将详细说明相关细节)
  },
  // {String | Array}
  // 子节点(VNodes). 可选项.
  [
    createElement(‘h1‘, ‘hello world‘),
    createElement(MyComponent, {
      props: {
        someProp: ‘foo‘
      }
    }),
    ‘bar‘
  ]
)

{
  // 和`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
      }
    }
  ],
  // 如果子组件有定义 slot 的名称
  slot: ‘name-of-slot‘
  // 其他特殊顶层属性
  key: ‘myKey‘,
  ref: ‘myRef‘
}

用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot="foo" 中的内容将会在
vm.$slots.foo 中被找到）。default 属性包括了所有没有被包含在一个具名 slot 中的节点。
在使用 render 函数书写一个组件时，访问 vm.$slots 最有帮助。

createElement(‘a‘, {
          attrs: {
            name: headingId,
            href: ‘#‘ + headingId
          }
        }, this.$slots.default)

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join(‘‘)
}

var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, ‘-‘)
      .replace(/(^\-|\-$)/g, ‘‘)

<div id="div1">
    <child :level="1">
        Hello world!
        <h2>
            woqu
            <h3>what</h3>
        </h2>
    </child>
</div>

VNode1 = Hello world!
VNode2 = <h2>woqu</h2>
VNode3 = <h3>what</h3>

render: function (createElement) {
  var myParagraphVNode = createElement(‘p‘, ‘hi‘)
  return createElement(‘div‘, [
    // Yikes - duplicate VNodes!
    myParagraphVNode, myParagraphVNode
  ])
}

Vue.component(‘my-component‘, {
  functional: true,     //1
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {   //2
    // ...
  },
})

<div>
  <h1>I‘m a template!</h1>
  <p v-if="message">
    {{ message }}
  </p>
  <p v-else>
    No message.
  </p>
</div>   

//不使用JSX的情况下可能要这么写
render: function (h) {
  h(
  ‘div‘, 
  [
    h(‘span‘, ‘Hello‘),
    ‘ world!‘
  ]
)
}
//使用JSX可以像写xml或html这类标签语言一样直接写，是不是直观很多
render (h) {
    return (
      <div>
        <span>Hello</span> world!
      </div>
    )
  };