vue獲取模板內容的方式
目錄
- outerHTML獲取內容
- template屬性獲取內容
- ES6的字符串模板
<template>標簽<srcipt type="text/x-template></script>
- render()函數
render(createElement => createdElement(標簽名稱，數據對象，子節點列表))- JSX語法：
render(() => {return (JSX)})
vue遵循數據驅動的理念，在視圖層通過模板處理數據在頁面的顯示。所以vue至少要獲取到數據和模板內容。數據在VUE實例化時通過配置項的options對象的data屬性傳入，即options.data，那模板內容即頁面HTML內容如何獲取到呢？
我們先看下官方文檔中，VUE的生命周期圖解：
在vue實例化過程中，會先判斷配置對象options是否有提供template屬性值，如果沒有就使用原生DOM方法el.outerHTML()獲取掛載元素中的DOM內容作為模板內容，如果有提供template屬性值，就直接使用其值，並覆蓋el元素中的內容。
另外，vue所獲取到的template內容最終都需要傳入render()渲染，所以vue 2.0之后，也直接將render方法暴露出來，可以直接使用。
所以，最終vue獲取HTML內容有三種方式：outerHTML() / template / render()，其中每種方法又有一些各自的寫法。
html寫法
<div id="example_outerHTML">
<div>{{ msg }}</div>
</div>
<script>
new Vue({
el: "#example_outerHTML",
data: {
msg: "HELLO VUE by outerHTML"
}
})
</script>
template 屬性寫法
<div id="example_template_string"></div>
<script>
new Vue({
el: "#example_template_string",
data: {
msg: "HELLO VUE by template string"
},
// 簡單HTML直接使用字符串拼接，也可以使用ES6模板字符串換行書寫，更直觀
// template: "<div>{{ msg }}</div>",
template: `<div>
<span>{{ msg }}</span>
</div>`,
})
<script>
template 標簽寫法
<div id="example_template_tag"></div>
<template id="temp_tag">
<div>{{ msg }}</div>
</template>
<script>
new Vue({
el: "#example_template_tag",
data: {
msg: "HELLO VUE by template tag"
},
// 使用<template>標簽寫法
template: "#temp_tag",
})
</script>
script x-template類型
<div id="example_script"></div>
<script id="temp_script" type="text/x-template">
<div>{{ msg }}</div>
</script>
<script>
new Vue({
el: "#example_script",
data: {
msg: "HELLO VUE by template script"
},
template: "#temp_script"
})
</script>
render(createElement)
<div id="example_render_createElement"></div>
<script>
new Vue({
el: "#example_render_createElement",
data: {
msg: "HELLO VUE by render createElement"
},
// 寫法一：
// render: function (createElement) {
// return createElement("div", this.msg)
// },
// 寫法二： 約定 const h = this.$createElement，所以簡寫
render: function (h) {
return h("div", this.msg)
},
// 寫法三：使用ES6語法，同名對象的簡寫
// render: h => h("div", this.msg)
})
</script>
JSX
<div id="example_render_JSX"></div>
<script>
// JSX語法需要安裝插件
// npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
new Vue({
el: "#example_render_JSX",
data: {
msg: "HELLO VUE by render JSX"
},
render: function () {
return (
<div>{{ msg }}</div>
)
}
})
</script>
在實際開發中，都采用.vue的單文件組件寫法，所以HTML內容固定寫法是在<template></tempate>標簽內，但此類文件需要安裝vue-loader解析插件。
在main.js中new Vue()實例化時，獲取全局的APP.vue組件時都采用render()形式。
延伸擴展知識（點擊查看）
vue的render(tagName, data, childNode)詳解
JSX語法詳解
HTML5的template元素：內容模板元素
原生DOM的方法：outerHTML/innerHTML/outerText/innerText/textContent區別