vue/test/functional/fixtures/template.html

<meta charset="utf-8">

<div id="usa" v-partial="global"></div>
<div id="conditional" v-partial="{{ok ? 'global' : 'nope'}}"></div>
<div id="japan">{{> local}}</div>
<div id="repeat">{{> repeat}}</div>
<div id="yielder"><x-yielder><p>{{a}}</p><p>{{b}}</p></x-yielder></div>

<script type="text/v-template" id="test">
    <p>{{hi}}!</p>
</script>

<script type="text/v-template" id="repeat-template">
    <p v-repeat="items">{{title}}</p>
</script>

<script type="text/v-template" id="yield-template">
    <h1>before</h1>{{>yield}}<h2>after</h2>
</script>

<script src="../../../dist/vue.js"></script>
<script>

    Vue.config({
        debug:true
    })

    // direct usage
    var china  = new Vue({
        id: 'china',
        template: '#test'
    })
    document.body.appendChild(china.$el)
    // setting value after compile also works,
    // as long as it has appeared in the template
    china.hi = '你好'

    // extended usage
    var Hawaii = Vue.extend({
        id: 'hawaii',
        template: '#test'
    })
    var hawaii = new Hawaii()
    document.body.appendChild(hawaii.$el)
    hawaii.hi = 'Aloha'

    // global partial
    Vue.partial('global', '#test')
    var usa = new Vue({
        el: '#usa'
    })
    usa.hi = 'Hi dude'

    // conditional partial
    Vue.partial('nope', '<p>nope</p>')
    new Vue({
        el: '#conditional'
    })

    // direct partial
    var japan = new Vue({
        el: '#japan',
        partials: {
            local: '#test'
        }
    })
    japan.hi = 'こんにちは'

    var repeat = new Vue({
        el: '#repeat',
        partials: {
            repeat: '#repeat-template'
        },
        data: {
            items: [{ title: 'Repeat' }]
        }
    })

    Vue.component('x-yielder', {
        template: '#yield-template',
        data: {
            a: 'A', b: 'B'
        }
    })

    new Vue({el:'#yielder'})
</script>