v-clock和v-text和v-html和v-pre详解
v-clock用法
1.使用样式
[v-cloak]{display: none;}
2.在插值表达式所在的标签中添加v-cloak指令
3.原理：
先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果，只替换{{ msg }}占位符里面的内容；
4.样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
v-text用法
1.v-text指令用于将数据填充到标签中，覆盖元素中原来的整个内容，作用于插值表达式类似，但是没有闪动问题
2.样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
v-html用法
1.v-html指令用于将HTML片段填充到标签中，可以添加html标签，但是可能有安全问题。
2.样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-html='msg1'></div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg1: '<h1>HTML</h1>'
}
});
</script>
</body>
</html>
v-pre用法
1.用于显示原始信息
2.样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-pre>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>