VUE.JS渲染功能

Question

I´m studiying Vue.js and got stuck when using the bellow render function:

This is an javascript file that I called from my component.

import Button from './Button'

export default {
  functional: true,
    render(h) {
    return(
        <div id='toolbar'>
        <Button type='markup' tag='strong'> B </Button>
        <Button type='markup' tag='em'> I </Button>
        <Button type='section' tag='h1'> H1 </Button>
        <Button type='section' tag='h2'> H2 </Button>
        <Button type='section' tag='ul'> UL </Button>
        <Button type='section' tag='ol'> OL </Button>
        <slot />
      </div>
    )
  }
}

I need to export the above function, but I´m getting error.

      5 |     render(h) {
      6 |     return(
   >  7 |         <div id='mobiledoc-toolbar'>
        |         ^
      8 |         <Button type='markup' tag='strong'> B </Button>

I´m getting error when calling this function, not sure if this only works using backqouts/backticks

Answer 1

In redux, you can indeed mix HTML markup with JavaScript. But there's no such thing in Vue.js. The only way would be to wrap your HTML in template string:

return(`
    <div id='mobiledoc-toolbar'>
    ...
    </div>
`

or to use <template> template format for vue (if you're using webpack). Such components look like this:

<template>
  <div id="toolbar">
  </div>
</template>

<script>
    export default new Vue(

    );
</script>

<style lang="scss">
  // Your styles here
</style>

and then no render() method is necessary.

PS: Yes, as @Bert suggested, you can also use Babel JSX Transform plugin and use JSX syntax.