25.06.2018 Views

Full-Stack Vue.js 2 and Laravel 5

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Single-file components<br />

Single-File Components (SFCs) are files with a .vue extension that contain the<br />

complete definition of a single component <strong>and</strong> can be imported into your <strong>Vue</strong>.<strong>js</strong><br />

app. SFCs make it simple to create <strong>and</strong> use components, <strong>and</strong> come with a variety<br />

of other benefits which we'll soon explore.<br />

SFCs are similar to HTML files but have (at most) three root elements:<br />

template<br />

script<br />

style<br />

The component definition goes inside the script tag <strong>and</strong> will be exactly like any<br />

other component definition except:<br />

It will export an ES module<br />

It will not need a template property (or a render function; more on that later)<br />

The component's template will be declared as HTML markup inside the template<br />

tag. This should be a welcome relief from writing cumbersome template strings!<br />

The style tag is a feature unique to SFCs <strong>and</strong> can contain any CSS rules you need<br />

for the component. This mostly just helps with the organization of your CSS.<br />

Here's an example of the declaration <strong>and</strong> usage of a single-file component.<br />

MyComponent.vue: {{ title }}<br />

export default { data() { title: 'My Component' } };<br />

.my-component { color: red; } <br />

app.<strong>js</strong>: import 'MyComponent' from './MyComponent.vue'; new <strong>Vue</strong>({ el: '#app',<br />

components: { MyComponent } });

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

Saved successfully!

Ooh no, something went wrong!