软糖

Vue2-4 template

Posted on |

Template slot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
    <div id="root">
        <task>
            <template slot="title">hello</template>
            this will go to nameless slot tag
        </task>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./order.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
Vue.component('task', {
    template: `
    <li>
        <slot name="title"></slot>
        <slot>Default content</slot>
    </li>`
})
new Vue({
    el: '#root',
})

Note: template tag will be deleted when rendered in html page

1
2
3
<div id="root">
    <task><li>hello</li></task>
</div>

Note: other tag will be kept.

Inline template

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
    <div id="root" class="container">
        <progress-view inline-template>
            <h1>Your progress is {{ completionRate }}</h1>
        </progress-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./order.js"></script>
</body>
</html>