您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 常用指令

《和小米一起学Vue.js》— 常用指令

[ 孤狼 | 2022-07-29 00:26:03 | Vue | 1232°C | 0条评论 ]

在Vue中有着一些特殊的“属性”,他们被称为指令。指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。那么我们来看看有哪些常用的指令吧。


v-once

当需要数据只需要加载一次可以使用 v-once , v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

案例

<!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>



v-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>



v-text

更新元素的 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>



v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 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>



v-cloak

这个指令保持在元素上直到关联实例结束编译。和 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>





转载请注明出处:http://gl.paea.cn/n.php?n=169
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索