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&