1.v-once
- 只会渲染元素或组件一次，即使后续的数据修改了，也不会渲染到页面上；
<div id="app">
<p v-once>{{msg}}</p>
<p>{{msg}}</p>
<input type="text" name="" id="" v-model="msg" />
</div>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
msg:"今年他就开始东方航空"
}
})
</script>
3、v-pre
编译时，直接忽略这个元素和它子元素内容（基本上没用）
4、v-cloak
需要配合css使用
可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，
从绑定的 HTML 元素上被移除。
当网络缓慢，此时网页还在加载 Vue代码，页面来不及渲染，页面上就会闪现vue源代码。
我们可以使用 v-cloak 指令来解决这一问题。
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- v-cloak用来解决屏幕闪动的问题 -->
<div id="app">
<h1 v-cloak>{{inputVal}}</h1>
<!-- <h1 v-pre>{{inputVal}}</h1> -->
</div>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
inputVal:"今天阴天有点冷~",
}
})
</script>
</body>
本文详细介绍了Vue中三个重要的指令：v-once用于一次性渲染元素，避免后续数据变化时更新DOM；v-pre则跳过编译元素及其子元素，保留原始内容；v-cloak配合CSS解决Vue实例加载时的闪烁问题，确保在完全编译完成前隐藏未渲染的Vue代码。通过实例展示了这三个指令的用法和效果。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
