1、單文件組件
<template>
<div class="title">{{this.title}}</div>
</template>
<script>
export default {
data() {
return {title: '單文件組件' }
}
}
</script>
2葵第、x-template
另一個(gè)定義模板的方式是在一個(gè) <script>元素上，并為其帶上 text/x-template 的類(lèi)型合溺，然后通過(guò)一個(gè) id 將模板引用過(guò)去卒密。例如： 元素中，并為其帶上 text/x-template 的類(lèi)型棠赛，然后通過(guò)一個(gè) id 將模板引用過(guò)去 元素中哮奇，并為其帶上 text/x-template 的類(lèi)型膛腐，然后通過(guò)一個(gè) id 將模板引用過(guò)去 元素中
<script type="text/x-template" id="hello">
<div class="title">{title}}</div>
</script>
Vue.component('custom-component03',{
template: '#hello',
data() { return {title: 'x-template' } }
});
<custom-component03></custom-component03>
3、字符串
默認(rèn)情況下鼎俘，模板會(huì)被定義為一個(gè)字符串
Vue.component('custom-component01', {
template: `<div>{{title}}</div>`,
data() { return {title: 'Check me' } }
});
<custom-component01></custom-component01>
4哲身、模板字面量
ES6 模板字面量允許你使用多行定義模板，這在常規(guī) JavaScript 字符串中是不被允許的贸伐。此方式閱讀體驗(yàn)更佳勘天，并在許多現(xiàn)代瀏覽器中得到支持，不過(guò)安全起見(jiàn)你還是需要把代碼轉(zhuǎn)換成 ES5 捉邢。
Vue.component('custom-component02', {
template: `
<div>
<div class="title">{{this.title}}</div>
<div :class="{ checkbox: checkbox}"></div>
</div>`,
data() { return {title: '模板字面量' ,checkbox: true} }
});
<custom-component02></custom-component02>
5脯丝、內(nèi)聯(lián)模板inline-template
當(dāng) inline-template 這個(gè)特殊的特性出現(xiàn)在一個(gè)子組件上時(shí)，這個(gè)組件將會(huì)使用其里面的內(nèi)容作為模板歌逢，而不是將其作為被分發(fā)的內(nèi)容
<script>
Vue.component('custom-component04', {
data(){ return {title:'內(nèi)聯(lián)模板!'} }
})
</script>
<custom-component04 inline-template>
<div class="title">{{title}}</div>
</custom-component04>
不過(guò)巾钉，inline-template 會(huì)讓你模板的作用域變得更加難以理解
6、渲染函數(shù)(Render)
渲染函數(shù)需要你把模板當(dāng)作一個(gè)JavaScript對(duì)象來(lái)進(jìn)行定義秘案，它們是一些復(fù)雜并且抽象的模板選項(xiàng)。
然而潦匈，它的優(yōu)點(diǎn)是你定義的模板更接近編譯器阱高，你可以使用所有JavaScript方法，而不是指令提供的那些功能茬缩。
<script>
Vue.component('custom-component05', {
data(){
return { 'title':'渲染函數(shù)'}
},
render(createElement) {
return createElement( 'div', { attrs: { 'class': 'title' } }, [ this.title ] );
}
})
</script>
<custom-component05></custom-component05>
7赤惊、JSX語(yǔ)法
<script>
Vue.component('custom-component05', {
data(){
return { title:'我是jsx模板'}
},
render() {
return <div>
{this.title}
</div>
}
})
</script>
