vue-learning：12-vue获取模板内容的方式

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区别