vue使用组件

template

<div id="app">
    {{msg}}
    <test :test-msg="testMsg"></test>
</div>
<template id="tempTest">
    <h1>{{ testMsg }}</h1>
</template>

script

<div id="app">
    {{msg}}
    <test :test-msg="testMsg"></test>
</div>
<script type="x-template" id="tempTest">
    <h1>{{ testMsg }}</h1>
</script>

直接拼接字符串

var tempHtml = '<h1>{{ testMsg }}</h1>'

var comps = [
    {
        name: 'test',
        data: function() {
            return {
                // ...
            }
        },
        props: ['test-msg'],
        template: '#tempTest'
        // tempalte: 'tempHtml'
    }
]

comps.forEach(function(comp) {
    Vue.component(comp.name, comp)
})

new Vue({
    el: '#app',
    data: {
        msg: 'hello world',
        testMsg: 'hello test'
    }
})

单文件组件

#template