Vue入门
vue内部指令---------v-pre & v-cloak &v-once指令
- v-pre指令:跳过vue的编译,直接输出原始值。在标签中加入v-pre就不会输出vue中的data值了
- v-cloak指令:在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用,
- v-once指令:在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
v-pre指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-pre指令&v-cloak指令&v-once指令</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>这是data里面的数据:{{messages}}</p>
<p v-pre>这是data里面的数据,但是加了v-pre指令之后,直接跳过vue编译,所以直接显示内容: {{messages}}</p>
</div>
<script>
var demo=new Vue({
el:'#app',
data:{
messages:'我是一个v-pre指令测试'
}
})
</script>
</body>
</html>
运行结果:
使用了v-pre指令后,将直接输出原始值,不进行vue编译
v-cloak指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-pre指令&v-cloak指令&v-once指令</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>这是data里面的数据:{{messages}}</p>
<p v-cloak>这是data里面的数据,但是加了v-cloak指令之后,直接跳过vue编译,所以直接显示内容: {{messages}}</p>
</div>
<script>
var demo=new Vue({
el:'#app',
data:{
messages:'我是一个v-cloak指令测试'
}
})
</script>
</body>
</html>
运行结果:
附:
因为加载的原因,可能看不出v-cloak指令的效果,但是v-cloak指令是在整个DOM渲染完才显示的。
可以使用 v-cloak 指令来解决屏幕闪动的问题
例子:
在css中:
[v-cloak]{
display: none;
}
<div id="app" v-cloak>
{{context}}
</div>
v-once指令
v-once指令只进行一次渲染,渲染完成后就是静态的了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-pre指令&v-cloak指令&v-once指令</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<!--<p>这是data里面的数据:{{messages}}</p>
<p v-pre>这是data里面的数据,但是加了v-cloak指令之后,直接跳过vue编译,所以直接显示内容: {{messages}}</p>-->
<p v-once>这是vue的测试内容:{{messages}}</p>
<input type="text" v-model="messages"/>
<p>这是vue的测试内容,实现了数据源的绑定:{{messages}}</p>
</div>
<script>
var demo=new Vue({
el:'#app',
data:{
messages:'我是一个v-cloak指令测试'
}
})
</script>
</body>
</html>
运行结果: