二、插值操作
01、Mustache
简单说即 “双括号” 语法，不仅仅可以直接写变量，也可以写一些简单的表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2> {{message}}</h2>
<h2> {{message}}，李银河 </h2>
<!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
<h2> {{ firstName + " " + lastName }} </h2>
<h2> {{ counter*2 }} </h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
firstName:"kobe",
lastName:"bryant",
counter: 100
},
});
</script>
</body>
</html>
02、v-once 语法
当执行第一次时进入响应式处理，并且只渲染一次，不会随着数据的更改而改变
<div id="app"> <h2> {{message}}</h2> <!--当执行第一次时 进入响应式处理，只渲染一次，不会随着数据的更改而改变--> <h2 v-once> {{message}}</h2> </div> <script> const app = new Vue({ el:"#app", data:{ message:"你好啊", }, }); </script>
03、v-html 语法
当执行的语句是 一个dom标签，并且需要按照基本的html的dom展示效果展示时，
<div id="app"> <!--v-html语法--> <h2 v-html="url"></h2> </div> <script> const app = new Vue({ el:"#app", data:{ message:"你好啊", url:'<a href="http://www.baidu.com">百度一下</a>', }, }); </script>
04、 v-text 语法
执行的返回结果为string语句时，但建议使用Mustache语法编写
<!--只接受string类型-->
<div id="app">
<h2> {{message}} ,李银河 </h2>
<!--此标签中的 ，李银河 会由于渲染的原因，将对此值进行替换，
最后显示的结果是 你好啊-->
<h2 v-text="message">，李银河</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
});
</script>
05、 v-pre 语法
不对html的dom元素进行任何的渲染，显示的结果为dom元素中的 所写的内容
<div id="app"> <h2> {{ message }} </h2> <!-- v-pre 不对标签进行任何渲染--> <h2 v-pre> {{ message }} </h2> </div> <script> const app = new Vue({ el:"#app", data:{ message:"你好啊" } }); </script>
06、 v-cloak 语法
在某些情况下，我们浏览器可能会直接显示出未编译成功的Mustrache标签
//在下面的示例中，将设置效果为没有渲染完成，则不进行dom元素中内容的最终显示‘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2> {{ message }} </h2>
</div>
<script>
//在vue解析之前，div中有一个属性v-cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(function() {
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
});
}, 1000);
</script>
</body>
</html>
