vue中常用的v-指令

1、v-cloak 解决“闪动”问题

1，提供样式
[v-cloak]{
    display:none
}
2，在差值表达式所在的标签中添加v-cloak指令
原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果，解决了“闪动”问题。
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

2、v-text 的作用和差值表达式一样，更简洁一些，不存在“闪动问题”，推荐使用v-text而不推荐使用差值表达式。

3、v-html 的作用是能直接渲染出html的样式，但是很不安全，慎重使用，容易遭到xss跨站脚本攻击；本网站内部数据可以使用，第三方数据不能使用。

4、v-pre 的作用是能渲染出html原始信息，不进行编译。

<div id="app">
    <div>{{msg}}</div> 
    <div v-text='msg'></div>
    <!-- 输出结果是Hello world vue -->
    <div v-html='msg1'></div>
    <!-- 输出h1标签大小的HTML字符串 -->
    <div v-pre>{{msg}}</div>
    <!-- 输出{{msg}} -->
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello world vue",
            msg1:'<h1>HTML</h1>'
        }
    });
</script>

5、v-once 只编译一次，显示内容后不再具有数据响应式。对于某些不需要修改的数据来说，使用v-once能提高性能，因为不需要监听它的变化。

6、v-model 数据双向绑定主要用于input输入框，无论是修改输入框里的内容还是data模型数据里的数据，都会产生变化。

7、v-on 使用v-on进行事件绑定。