Day 5 of Vue.js

Named Slots

<slot></slot> is the default slot. Any content in the component tag will go into the slot.
If you have multiple sections in the component that you want to have custom content in them, use named slots.

In javascript template:

<slot name="header"></slot>

In HTML:

<template slot="header"> my header</template>

Using <template> will get rid of the tag around ‘my header’ in the final rendered html. But of course you can put whatever tag around it if necessary.

Named Slot in conjunction with Default Slot

You can use default slot with named slot together. If you have an unnamed slot, the content in your html without any tags around them will go into the unnamed slot.

PS: You can have content in your template slots. The content will only show up if you don’t have anything in the slot in html.

Inline single-use Templates

If you need to have a single-use component in your page, constructing every detail in your javascript seems unnecessary and can make your file looks messy.
Use inline-template attribute in your component and the component will use what is provided in the components’ tag as the template.

Single-use templates can be useful for server side applications.

<progress-view inline-template>     
        <progress class="progress" :value="completionProgress" max="100">15%</progress>
    </progress-view>
Vue.component('progress-view', {
    data () {
        return {
            completionProgress: 50
        };
    }
});

Inline-template components must have exactly one child element.
You might need to wrap your inline-template in a div or something.

Vue + Laravel

In the first example in Laracast Jeffrey simply put the main vue javascipt in app.js under the public folder. In the main blade file, we can import the vue.js and axios.js to perform simple http requests.

new Vue({
    el: '#root',

    data: {
        skills: []
    },
    mounted() {
        axios.get('/skills').then(response => this.skills = response.data);
    }
})

Another thing to take note is that, {{ something }} will be interpreted as a blade syntax, so in order to let Vue handle it, we can use @{{ something }} to indicate that. Or use v-text="something".

<li v-for="skill in skills">@{{ skill }}</li>
<li v-for="skill in skills" v-text="skill"></li>

Leave a Reply

Your email address will not be published. Required fields are marked *