25.06.2018 Views

Full-Stack Vue.js 2 and Laravel 5

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Render functions<br />

Rather than supplying a string template for your component, you can instead<br />

supply a render function. Without underst<strong>and</strong>ing the syntax, you can probably tell<br />

from the following example that the render function is generating a semantically<br />

equivalent template to the string template in the previous example. Both define a<br />

div with an id attribute of my-component <strong>and</strong> with inner text of My component:<br />

<strong>Vue</strong>.component('my-component', { render(createElement) {<br />

createElement('div', {attrs:{id:'my-component'}}, 'My component'); //<br />

Equivalent to My component } })<br />

Render functions are more efficient because they don't require <strong>Vue</strong> to first<br />

compile the template string. The downside, though, is that writing a render<br />

function is not as easy or expressive as markup syntax, <strong>and</strong>, once you get a large<br />

template, will be difficult to work with.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!