Vue v-pre指令

Vue v-pre指令教程

Vue v-pre 指令用于跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编译，使用 Vue v-pre 这个指令可以加快编译速度。

案例

Vue v-pre

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-pre 指令</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<p>{{msg}}</p>
		<p v-pre>{{msg}}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello HaiCoder'
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

46 vue vpre.png

我们看到，第一个 p 标签没有使用 Vue v-pre 标签修饰，因此 msg 的内容被解析了。第二个 p 标签我们使用了 Vue v-pre 标签修饰，因此 msg 的内容没有被解析，而是原样显示了。

Vue v-pre指令总结

Vue v-pre 指令用于跳过这个元素和它的子元素的编译过程。