vue 03 指令

1. 常用内置指令

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对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

ref

    
    



    
abcd
    提示

结果：点击提示按钮

v-cloak 防止闪现表达式

    
    



    
{{msg}}

结果：当执行到alert时，vue实例还未解析，所以也无法解析大括号表达式，就会在页面上显示表达式。为了解决这种问题， 引入了v-cloak指令。

    
    
    



    
{{msg}}

结果: 指令属性v-cloak在vue解析之前存在，display样式为none，则p标签的内容不显示。