Vue指令概述
Posted MikrokosmosRun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue指令概述相关的知识,希望对你有一定的参考价值。
v-cloak指令
1.提供样式
[v-clock]
display: none;
2.在插值表达式所在的标签中添加v-clock指令
背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果。
<style type="text/css">
[v-cloak]
display: none;
</style>
<div id="app">
<div>msg</div>
<!-- v-cloak:防闪烁 -->
<div v-cloak>msg</div>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
msg: 'Hello Vue'
);
</script>
数据绑定指令
1.v-text
用于填充纯文本。
没有闪烁问题,相比插值表达式v-cloak更加简洁好用。
<div id="app">
<div v-text='msg'></div>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
msg: 'Hello Vue'
);
</script>
2.v-html
用于填充HTML片段。
1.存在安全问题
2.本网站内部数据可以使用,来自第三方的数据不可以用。
<div id="app">
<div v-html='msg'></div>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
msg: '<h1>HTML</h1>'
);
</script>
3.v-pre
用于填充原始信息。
显示原始信息,跳过编译过程(分析编译过程)。
<div id="app">
<div v-pre>msg</div>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
msg: 'Hello Vue'
);
</script>
数据响应式
v-once
显示一次之后不再具有响应式的功能,即后续不会再修改其值。
v-once的应用场景:如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能。
<div id="app">
<div v-once>info</div>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
info: 'Hello!'
);
</script>
以上是关于Vue指令概述的主要内容,如果未能解决你的问题,请参考以下文章