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>