本节知识点
概述
v-pre
- v-pre就是在模板中跳过vue的编译。直接输出原始的值，这样就不会输出data中的值
<div v-prev>{{message}}</div>
v-cloak (用的太少了)
- 在vue中渲染完指定的整个DOM后才显示，他必须和css样式一起使用
[v-cloak]{
display:none;
}
<div v-cloak>
{{message}}
</div>
v-once 指令
- 表示只渲染一次。这样以后在改变他的值也不随着data而改变
<div v-once>{{message}}</div>
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<style>
*{margin:0px;padding:0px;}
.red{color:red;}
.green{color:green;font-size:36px;}
.all{font-size:24px;}
</style>
<div id="app">
<img v-bind:src="imgsrc" alt="">
<div :class="classa">哈哈哈</div>
<div :class="flag?classa:classb">呵呵呵</div>
<div :class="[classa,classc]">合并所有的类</div>
<div :style="styleobj">对象方式的类</div>
<div v-once>{{message}}</div>
<div>{{message}}</div>
<input type="text" v-model="message">
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
imgsrc:"images/1.jpg",
classa:"red",
flag:false,
classb:"green",
classc:"all",
styleobj:{
fontSize:"36px",
color:"red"
},
message:"看看变化吗"
}
})
</script>
</html>
