插值操作
这一章简单可以跟第三章一起学完。
插值操作有：v-once,v-html,v-text,v-pre等
上一章提到的mustache(双大括号语法)就是其中的插值操作。
v-once
v-once 表示元素跟组件只会被渲染一次，不会随着改变数据而改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message+name}}</h2>
<h2 v-once>{{message+name}}</h2>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: 'hailo',
name: 'hang'
}
})
</script>
</body>
</html>
v-pre
v-pre 跳过这个元素和它子元素的编译过程,跟html中的pre标签一样
<div id="app">
<h2>{{message+name}}</h2> <!-- 我会被渲染 -->
<h2 v-pre>{{message+name}}</h2> <!-- 我还是{{message+name}} -->
</div>
v-html
v-html 该命令后一般跟一个string，改名了会将此string的html进行解析并渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- v-html 该命令后一般跟一个string，会将此string的html进行解析并渲染 -->
<h2 v-html="url"></h2>
</div>
<!-- 还记得我吗，我是创建vue实例时一定要导入的文件 -->
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
v-text
v-text 作用跟mustache一样 (一般不用)
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
<!-- 效果一样 -->
</div>
tips:前面两个命令后面不用加表达式，后面两个命令则需要跟表达式
