一、基本介绍
常用内置指令：
| 指令 | 描述 |
|---|---|
| v-text | 更新元素的 textContent |
| v-html | 更新元素的 innerHTML |
| v-if | 如果为true, 当前标签才会输出到页面 |
| v-else | 如果为false, 当前标签才会输出到页面 |
| v-show | 通过控制display样式来控制显示/隐藏 |
| v-for | 遍历数组/对象 |
| v-on | 绑定事件监听, 一般简写为@ |
| v-bind | 强制绑定解析表达式, 可以省略v-bind |
| v-model | 双向数据绑定 |
| ref | 指定唯一标识, vue对象通过$els属性访问这个元素对象 |
| v-cloak | 防止闪现, 与css配合: [v-cloak] { display: none } |
二、代码示例：
1、ref
代码案例：
<body>
<div id="app">
<p ref="pNode">我是P标签</p>
<button @click="test">清除缓存</button>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data: {
dateStr: new Date()
},
methods:{
test(){
alert(this.$refs.pNode.innerHTML)
}
}
})
</script>2、v-cloak
代码案例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
visibility: hidden;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{dateStr}}</p>
<p v-cloak>{{dateStr}}</p>
<p v-cloak>{{dateStr}}</p>
<p v-cloak>{{dateStr}}</p>
<p v-cloak>{{dateStr}}</p>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data: {
dateStr: new Date()
}
})
</script>
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
