1-2.vue指令:mustache语法
mustache语法的解释
mustache语法主要运用于前端的框架中,根据数据的变化动态的展示数据里面的值。通过双花括号({{data}})来实现。vue里面展示数据通过mustache语法来展示
v-pre指令的使用
1.作用
在vue里面使用该标签后,将展示原始的mustache标签,不会动态的展示数据
2.代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='../js/vue.js'></script>
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- 此处使用v-pre标签,将显示原始的mustache标签 -->
<h2 v-pre>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '展示信息'
}
});
</script>
</body>
</html>
3.结果展示
v-once指令的使用
1.作用
使用v-once后,mustache只会显示最初的值,当该值变化后,mustache展示的内容不会随值一起变化
2.代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='../js/vue.js'></script>
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- 此处使用v-once标签,只会展示最初的值 -->
<h2 v-once>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '展示信息'
}
});
</script>
</body>
</html>