前言
本篇做了一些对不被常用的指令的汇总。了解即可,知道他们能做什么就好了
v-once
-
该指令后面不需要跟任何表达式
-
该指令表示元素和组件只渲染一次,不会随着数据的改变而改变
<div id="app">
message只会渲染一次,数据改变后也不能更新
<h2 v-once>{{message}}</h2>
</div>
这个还是算没那么不常用的,还是有一定的应用的场景。
v-html
- 该指令后面往往会跟上一个string类型
- 会将string的html解析出来并且进行渲染
<div id="app">
<h2 v-html="url"></h2> //会直接渲染成a标签
</div>
<script>
const app = new Vue({
el:"#app",
data:{
//服务器返回url时,可能不止返回url,可能会把整个a标签返回,如下
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
v-text
- v-text作用和Mustache比较相似:都是用于数据显示在界面中
- v-text通常情况下,接受一个string类型
- v-text不够灵活,一般开发中,就是用Mustache语法插值
div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"Hello Ting,I am Key!"
}
})
</script>
v-pre
- v-pre用于跳过这个元素和它子元素的编译过程,用于显示原来的Mustache语法
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"Hello Ting,I am Key!"
}
})
</script>
v-cloak
- 某些情况下,浏览器可能会直接显示出未编译的Mustache标签
<style>
[v-cloak]{
display: none;
}
</style>
<template>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
</template>
<script>
//延迟一秒钟创建app实例对象
//在vue解析之前,div中有一个属性v-cloak
//在vue解析之后,v-cloak属性被擦除。
setTimeout(function (){
const app = new Vue({
el:"#app",
data:{
message:"Hello Ting,I am Key!"
}
})
},1000)
</script>