渲染页面的几种方式
直接方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div><span>{{ msg }}</span></div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello'
}
});
</script>
</html>
template方式
https://cn.vuejs.org/v2/api/#template
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type=“x-template”> 包含模板。
出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。
如果 Vue 选项中包含渲染函数，该模板将被忽略。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello'
},
template: '<div id="ccc"><span>aaa{{ msg }}</span></div>',
});
</script>
</html>
render方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="vue.js"></script>
<script>
var res = Vue.compile('<div><span>compile{{ msg }}</span></div>');
new Vue({
el: '#app',
data: {
msg: 'hello'
},
render: res.render
});
</script>
</html>
$mout挂载方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="vue.js"></script>
<script>
var app2 = document.createElement("div");
var msg = document.createTextNode("{{msg}}");
app2.id = "app2";
app2.appendChild(msg);
document.body.appendChild(app2);
new Vue({
// el: '#app',
data: {
msg: 'hello'
},
}).$mount(app2);
</script>
</html>