vue基础知识之v-pre & v-cloak & v-once指令实例
1、显示结果
2、v-others.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-pre & v-cloak & v-once实例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
<h1>v-pre & v-cloak & v-once实例啦</h1>
<hr>
<div id="app" >
<!-- 模板的输出方式，把message变量渲染到模板里，v-pre是原样渲染/v-cloak 是加载渲染后再显示/v-once在第一次进行渲染 -->
<div v-pre> v-pre {{message}} </div>
<div v-cloak> v-cloak，渲染完成后才显示！ </div>
<!-- 双向数据绑定 -->
<div v-once> v-once {{message}} </div>
<div> <input type='text' v-model='message'> </div>
<div> 最初 {{message}} </div>
</div>
<script type='text/javascript'>
//声明变量且实例化(生成器)
var app =new Vue({
el:'#app',
data:{
message:'欢迎进入机器学习的世界！'
}
})
</script>
</body>
</html>