三，vue的基础语法之插值操作
程序员文章站
2022-03-11 16:08:13
前面通过简单的案例，了解了vue的基本能使用，现在我开始记录一些关于Vue的基础语法，以便于后来在创建Vue的项目的时候，对于Vue有一个更加深刻的理解。这个章节介绍插值操作，像前面案例中{{message}}就是一个最基础的文本插值插值操作主要是包括Mustache语法，v-once，v-text, v-pre, v-html, v-clock等指令的使用一，Mustache语法数据绑定中，最常见的形式就是使用‘Mustache’语法（双大括号）的文本插值{{mess...
前面通过简单的案例，了解了vue的基本能使用，现在我开始记录一些关于Vue的基础语法，以便于后来在创建Vue的项目的时候，对于Vue有一个更加深刻的理解。
这个章节介绍插值操作，像前面案例中{{message}}就是一个最基础的文本插值
插值操作主要是包括Mustache语法，v-once，v-text, v-pre, v-html, v-clock等指令的使用
一，Mustache语法
- 数据绑定中，最常见的形式就是使用‘Mustache’语法（双大括号）的文本插值
<span>{{message}}</span>
Mustache标签将会被替代成data()中的message值，无论何时，绑定的数据对象中的message发生改变，插值处的内容也会发生相应的改变。
随之Mustache语法格式也会做一些简单的拼接，运算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{lastName}} {{firstName}}</p>
<p>{{lastName+' '+firstName}}</p>
<p>{{count*2}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
el: "#app",
data: {
firstName: "James",
lastName: "LeBron",
count: 100
}
})
</script>
</body>
</html>
二，v-once指令的使用
- 当然如果你只想插值处的内容发生一次改变，这个时候就可以使用v-once指令。
<span v-once>{{message}}</span>
三，v-html指令的使用
- 当你在项目中，想要使用一些例如超链接的时候，Mustache语法会将这些链接解释成文本语言，这个时候，就可以使用v-html指令来输出真正的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<p v-html="href"></p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
el: "#app",
data: {
message: "hello vue",
href: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
四，v-text指令的使用
- 如果你不想使用Mustache语法的时候，你可以使用v-text来代替{{}} 但是通常v-text接收String类型的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<p v-text="message"></p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
el: "#app",
data: {
message: "hello vue"
}
})
</script>
</body>
</html>
五，v-pre指令的使用
- 当你使用Mustache语法的时候，想要显示的是原本的Mustache的内容，这个时候你就可以使用v-pre指令
- v-pre会跳过这个元素和子元素的编译过程，直接显示原本的Mustache的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<p v-pre>{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app= new Vue({
el: "#app",
data: {
message: "hello vue"
}
})
</script>
</body>
</html>
六，v-clock指令的使用
- 在某些时候，由于数据的延迟，缓存等原因，数据会先显示原本的内容，当使用v-clock指令的时候，会隐去此时的显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
[v-clock]{
display: none;
}
</style>
<body>
<div id="app">
{{message}}
<p v-clock>{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
setTimeout(function(){
var app= new Vue({
el: "#app",
data: {
message: "hello vue"
}
})
},1000)
</script>
</body>
</html>
简单记录了基础语法中的插值操作，下一章节将会介绍基础语法中的动态绑定属性
本文地址：https://blog.csdn.net/weixin_44731169/article/details/107304113