1.插值操作
1.1 Mustache语法
Mustache语法就是双大括号{{message}},数据是响应式的,但并非双向绑定。
基本使用
<div id="app">
{{message}}
<!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
<h2>{{lastName+firstName}}</h2>
<h2>{{lastName+' '+firstName}}</h2>
<h2>{{lastName}} {{firstName}}</h2>
<h2>{{counter * 2}}</h2>
<!-- 对标签不进行转义-->
<h2>{{one}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好",
lastName: 'xiao',
firstName: 'jiejie',
counter: 100,
one: '<h2>你好这个美丽的世界</h2>'
}
});
</script>
v-once
- 该指令后面不需要跟任何的表达式(如v-for后面需要跟有表达式)
- 该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。
代码演示
<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>
v-html
- 该指令后面会更上一个String类型,为data中的参数名字
- 会将参数的HTML解析出来并且进行渲染
代码展示
<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>
v-text
- v-text作用和Mustache比较相似:都适用于将数据显示在界面中
- v-text通常情况下,接受一个String类型参数
- 不灵活,不推荐使用
代码展示
<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: "你好"
}
});
</script>
v-pre
v-pre用于跳过这个元素和他子元素的编译过程,不解析Mustache,用于显示原本的Mustache语法。
代码展示
<div id="app">
<h2>{{message}}</h2>
<!-- 不解析mustache语法-->
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好"
}
});
</script>
v-cloak
在vue解析之前,div中会有v-cloak属性,该元素会不显示,在解析之后,v-cloak会在div属性中消失,元素显示
代码展示
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
//在vue解析之前,div中会有v-cloak属性
//在解析之后,v-cloak会在div属性中删除
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: "你好"
}
});
}, 1000)
</script>
END