Vue中的渲染方式总结可分四种:
- 原有模板语法，挂载渲染
- 使用render属性，createElement函数直接渲染
- 使用render属性，配合组件的template属性，createElement函数渲染
- 使用render属性，配合单文件组件，createElement函数渲染
方式一
原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestVue</title>
</head>
<body>
<div id="app">
<input v-model="message">
<p>Message is: {
{ message }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
var v = new Vue({
el: '#app',
data: {
message: '这是内容'
}
});
</script>
</html>
特点
当页面返回时html中的v-model等属性并没有被渲染，保持不变发给客户端，客户端直到加载了Vue，创建了实例之后才会将这些标识渲染出来。
v-if显示后消失或消失后显示造成跳变
这种方式的缺点是明显的：浏览器第一时间无法识别这些标识！这会使得在某些情况下出现奇怪的现象，下面我修改代码以做演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestVue</title>
</head>
<body>
<div id="app">
<template v-if="type === '1'">
<div style="width: 400px;height: 300px;background-color: blue;"></div>
</template>
<div style="width: 400px;height: 200px;background-color: red;"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
var v = new Vue({
el: '#app',
data: {
type: '1'
}
});
</script>
</html>
可以看到上面的第一个div在type为1时应该显示，但是它在页面初始加载是不会显示的，一个html并没有<template>标签，整个标签会被跳过，那么这个页面展示的结果就会有一个一瞬间的跳变。
这个过程非常短，但是人眼是绝对识别得到的，在谷歌浏览器下使用Ctrl&
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
