Vue插值语法
一、Mustache语法
- Mustache也叫做双大括号语法
- mustache：胡须的意思，因为两个大括号很像胡须，所以这样命名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-Mustache语法</title>
</head>
<body>
<div id = "app">
<h2>{{message}}</h2>
<h2>{{message}},李银河</h2>
<!-- mustache语法中，不仅可以直接写变量，也可以写简单的表达式 -->
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + " " + lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message : "你好",
firstName : "kobe",
lastName : "bryant",
counter : 100
},
})
</script>
</body>
</html>
二、v-once指令的使用
- 有些场景中，我们需要一个数据只在刚开始的时候渲染一次，然后后面不随着变量值的改变而改变，这时我们就可以通过
v-once指令来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-v-once语法</title>
</head>
<body>
<div id = "app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message : "你好",
},
})
</script>
</body>
</html>
- 在开发者工具中的控制台输入
app.message = "哈哈",可以看到第二行的你好并没有改变
v-html指令的使用
- 某些情况下，我们从服务器请求到的数据本身就是一个html代码
- 如果我们使用{{}}来输出，会将html代码一起输出。
- 但是我们希望的是按照html格式进行解析，并且显示对应的内容。
- 如果我们希望解析出HTML展示
- 该指令后面往往会跟上一个string类型
- 会将string的html解析出来并进行渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-v-html语法</title>
</head>
<body>
<div id = "app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message : "你好",
url: '<a href="http://www.baidu.com">百度一下</a>'
},
})
</script>
</body>
</html>
v-text指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04-v-text语法</title>
</head>
<body>
<div id = "app">
<h2>{{message}},李银河</h2>
<!-- 会覆盖后面的内容，不够灵活，所以一般不用 -->
<h2 v-text="message">,李银河</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message : "你好",
url: '<a href="http://www.baidu.com">百度一下</a>'
},
})
</script>
</body>
</html>
v-pre指令的使用
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>05-v-pre</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- 不解析，将内容按照原本的样子输出 -->
<h2 v-pre>{{message}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message: "你好",
},
methods:{}
});
</script>
</body>
</html>
v-cloak指令的使用
- 当网络比较卡的时候，js文件可能没加载出来，就会导致div先渲染出来，然后在加载js，页面就会出现闪动，先显示未处理后的页面，然后再重新渲染，这种用户体验是不好的，可以看一下下面这个页面的效果
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-cloak指令的使用</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
setTimeout(function(){
const app = new Vue({
el:'#app',
data:{
message:"你好",
},
methods:{}
});
},1000)
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-cloak指令的使用</title>
<script src="../js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{message}}
</div>
<script>
setTimeout(function(){
const app = new Vue({
el:'#app',
data:{
message:"你好",
},
methods:{}
});
},1000)
</script>
</body>
</html>