<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基本指令</title>
</head>
<!--可以解决加载过程屏幕有闪动的情况-->
<style TYPE="text/css">
[v-cloak]{
display: none;
}
</style>
<body>
<!--v-cloak 不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS
的 display:none; 配合使用：-->
<div id="app" v-cloak>
{{ message }}
</div>
<!--v-once 也是一个不需要表达式的命令，作用是定义它的元素或组件只渲染一次，包括
元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容-->
<div id="app2">
<span v-once>{{ message}}</span>
<div v-once>
<span>{{ message }}</span>
</div>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'蜡笔小新，动感超人。。。嘿嘿嘿！！！'
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
message:'傀儡谣'
}
})
</script>
</body>
</html>
基本指令.png
网友评论