SOURCE

new Vue({
    el: "#example_outerHTML",
    data: {
        msg: "HELLO VUE by outerHTML"
    }
})

new Vue({
    el: "#example_string",
    data: {
        msg: "HELLO VUE by template string"
    },
    // 简单HTML直接使用字符串拼接，也可以使用ES6模板字符串换行书写，更直观
    // template: "<div>{{ msg }}</div>",
    template: `<div>
				<span>{{ msg }}</span>
			</div>`,
})

new Vue({
    el: "#example_tag",
    data: {
        msg: "HELLO VUE by template tag"
    },
    // 使用<template>标签写法
    template: "#temp_tag",
    
})

new Vue({
    el: "#example_script",
    data: {
        msg: "HELLO VUE by template script"
    },
    template: "#temp_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)
})

// 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>
        )
    }
})

<div id="example_outerHTML">
    <div>{{ msg }}</div>
</div>

<div id="example_string">
    <div>在已有template属性值的情况下，此内容会被覆盖</div>
</div>

<div id="example_tag"></div>
<template id="temp_tag">
    <div>{{ msg }}</div>
</template>

<div id="example_script"></div>
<script id="temp_script" type="text/x-template">
	<div>{{ msg }}</div>
</script>

<div id="example_render_createElement"></div>

<div id="example_render_JSX"></div>