vue从入门到进阶：渲染函数 & JSX（八）

<h1>
  a name="hello-world" href="#hello-world">
    Hello world!
  </a>
>

anchored-heading :level="1">Hello world!anchored-heading>

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

Vue.component('anchored-heading',{
  template: '#anchored-heading-template'true
    }
  }
})

Vue.component('anchored-heading'function (createElement) {
    return createElement(
      'h' + this.level,// tag name 标签名称
      this.$slots.default  子组件中的阵列
    )
  },1)">
    }
  }
})

div>My title
  Some text content
  <!-- TODO: Add tagline -->
>

>{{ blogTitle }}>

render:  (createElement) {
  return createElement('h1',1)">this.blogTitle)
}

this.blogTitle)

 @returns {VNode}
createElement(
   {String | Object | Function}
   一个 HTML 标签字符串，组件选项对象，或者一个返回值
   类型为 String/Object 的函数，必要参数
  'div' {Object}
   一个包含模板相关属性的数据对象
   这样，您可以在 template 中使用这些属性。可选参数。
  {
     (详情见下一节)
  },1)"> {String | Array}
   子节点 (VNodes)，由 `createElement()` 构建而成，
   或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字'),createElement(MyComponent,{
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

{
   和`v-bind:class`一样的 API
  'class': {
    foo: false
  },1)"> 和`v-bind:style`一样的 API
  style: {
    color: 'red' 正常的 HTML 特性
  attrs: {
    id: 'foo' 组件 props
  props: {
    myProp: 'bar' DOM 属性
  domProps: {
    innerHTML: 'baz' 事件监听器基于 `on`
   所以不再支持如 `v-on:keyup.enter` 修饰器
   需要手动匹配 keyCode。
  on: {
    click: .clickHandler
  },1)"> 仅对于组件，用于监听原生事件，而不是组件内部使用
   `vm.$emit` 触发的事件。
  nativeOn: {
    click: .nativeClickHandler
  },1)"> 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
   赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive''1 + 1'
      }
    }
  ],1)"> Scoped slots in the form of
   { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span' 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot' 其他特殊顶层属性
  key: 'myKey'
}

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

Vue.component('anchored-heading' create kebabCase id
    var headingId = getChildrenTextContent(default)
      .toLowerCase()
      .replace(/\W+/g,'-')
      .replace(/(^\-|\-$)/g,'')

    .level,[
        createElement('a' headingId
          }
        },1)">)
      ]
    )
  },1)">
    }
  }
})

render: var myParagraphVNode = createElement('p','hi')
  return createElement('div' 错误-重复的 VNodes
    myParagraphVNode,myParagraphVNode
  ])
}

render: null,{ length: 20 }).map( () {
      return createElement('p',1)">)
    })
  )
}

ul v-if="items.length"li v-for="item in items">{{ item.name }}liulp v-else>No items found.p>

render: if (.items.length) {
    return createElement('ul',1)">this.items.map( (item) {
      return createElement('li'else {
    )
  }
}

render: var self = this
  return createElement('input' (event) {
        self.value = event.target.value
        self.$emit('input'事件 & 按键修饰符



Modifier(s)
Prefix



.passive
&


.capture
!


 .once
~


.capture.once or .once.capture
 ~!





on: {
  '!click': .doThisInCapturingMode,'~keyup': .doThisOnce,`~!mouSEOver`: .doThisOnceInCapturingMode
}




Modifier(s)
Equivalent in Handler



.stop
event.stopPropagation()


.prevent 
event.preventDefault()


.self 
if (event.target !== event.currentTarget) return


Keys:.enter,.13


if (event.keyCode !== 13) return (change 13 to another key code for other key modifiers)


Modifiers Keys:.ctrl,.alt,.shift,.meta


if (!event.ctrlKey) return (change ctrlKey to altKey,shiftKey,or metaKey,respectively)





on: {
  keyup:  (event) {
     如果触发事件的元素不是事件绑定的元素
     则返回
    if (event.target !== event.currentTarget) return
     如果按下去的不是 enter 键或者
     没有同时按下 shift 键
    if (!event.shiftKey || event.keyCode !== 13)  阻止 事件冒泡
    event.stopPropagation()
     阻止该元素默认的 keyup 事件
    event.preventDefault()
     ...
  }
}

插槽


render:  `<div><slot></slot></div>`
  return createElement('div',1)">)
}



render:  `<div><slot :text="msg"></slot></div>`
  this.$scopedSlots.({
      text: .msg
    })
  ])
}



render (createElement) {
   pass `scopedSlots` in the data object
       in the form of { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default:  (props) {
          return createElement('span'JSX


createElement(
  'anchored-heading'
    }
  },[
    createElement('span','Hello'
  ]
)



span>Hello world!
>



import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo' (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})







Vue.component('my-component' 为了弥补缺少的实例
   提供第二个参数作为上下文
  render:  (createElement,context) {
     Props 可选
  props: {
      }
})




template functionaltemplate>



props：提供 props 的对象
children: VNode 子节点的数组
slots: slots 对象
data：传递给组件的 data 对象
parent：对父组件的引用
listeners: (2.3.0+) 一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。





程序化地在多个组件中选择一个
在将 children,props,data 传递给子组件之前操作它们。



var EmptyList = { /* ... */ }
var TableList = { var OrderedList = { var UnorderedList = {  }

Vue.component('smart-list' appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)            EmptyList
      typeof items[0] === 'object')  TableList
      if (context.props.isOrdered)       OrderedList

       UnorderedList
    }

     createElement(
      appropriateListComponent(),context.data,context.children
    )
  },props: {
    items: {
      type: Array,1)">
    },isOrdered: Boolean
  }
})

slots() 和 children 对比


my-functional-componentslot="foo"
    first
  >second>