在Vue中有着一些特殊的“属性”，他们被称为指令。指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。那么我们来看看有哪些常用的指令吧。
当需要数据只需要加载一次可以使用 v-once , v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
孤狼 | 
2022-07-29 00:26:03 | 
954°C | 
0条评论 ]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue v-once</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="msg">
<div>{{s1}}</div>
<div v-once>{{s1}}</div>
<button id="c" v-on:click="cc">改变s1内容</button>
</div>
<script>
let ndata={
s1:'你好'
};
const v=new Vue({
el:"#msg",
data:ndata,
methods:{
cc:function(){
this.s1='变了';
}
}
});
</script>
</body>
</html>
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue v-html</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="msg">
<div>{{s1}}</div>
<div v-html="s1"></div>
</div>
<script>
let ndata={
s1:'<a href="http://www.paea.cn">PAEA</a>'
};
const v=new Vue({
el:"#msg",
data:ndata
});
</script>
</body>
</html>
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
v-text与直接使用Mustache标签一样，但不够Mustache灵活,一般不用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue v-text</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="msg">
<div>{{s1}}</div>
<div v-text="s1"></div>
<div>{{s1}},v-text无法这样直接拼接,所以一般不用</div>
</div>
<script>
let ndata={
s1:'你好'
};
const v=new Vue({
el:"#msg",
data:ndata
});
</script>
</body>
</html>
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
当不要处理或替换内容时使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue v-pre</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="msg">
<div v-pre>{{s1}}</div>
</div>
<script>
const v=new Vue({
el:"#msg",
data:{}
});
</script>
</body>
</html>
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。常用来处理加载缓慢时页面优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue v-cloak</title>
<script src="../vue.js"></script>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="msg">
<div v-cloak>系统当前在线人数:{{s1}}人</div>
</div>
<script>
setTimeout(() => {
let ndata={
s1:'522'
};
const v=new Vue({
el:"#msg",
data:ndata
});
}, 1500);
</script>
</body>
</html>
赞赏一个鸡腿
