Vue中常用的五种指令

vue代码

下面是我学习这五个指令过程中使用的vue代码仅供参考

 var vm=new Vue({
        el:'#app',//此属性是vue绑定的标签id
        data:{//此属性中定义当前vue中的参数和值
            mess:'123',
            msg:'<h1>我是最大的</h1>',
            mytitle:'这是自己定义的title'

        },
        methods:{//此属性中定义了当前Vue实例所有可用的方法
            show:function(){
                alert('hello')
            }
        }
    })    

v-cloak

该指令的主要作用是当我们使用插入值的时候，js代码运行过程中会先读取插值表达式，然后根据插值表达式的内容查找该值，将查找结果替换掉插值表达式。在这个过程中，如果网速过慢就会先显示插值表达式，然后显示我们想要显示的东西，这就是我们常说的闪烁问题。
v-cloak指令就是用来解决闪烁问题的。
如下图两行代码所示，在p标签中有一个插值表达式，为p标签设置一个v-cloak属性，然后为该属性添加一个display：none样式让改p标签隐藏。然后当插值表达式被替换的时候再显示替换内容，这样就解决了闪烁问题。

 <!--v-cloak,解决，插值表达式闪烁问题-->
        [v-cloak]{
            display: none;
        }

  <p v-cloak>{{mess}}</p>

v-text

此指令的主要功能是将vue中的值替换掉标签中的内容，注意此指令默认是没有闪烁问题的。此指令和插值表达式不同的地方在于：v-text会覆盖元素种原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。

 <p v-cloak>+++++++++{{mess}}-----------</p>
     
 <p v-text="mess">++++++++++++++++++++</p>

v-html

此指令是专门用来读取html语言的，当我们的字符串为“

我是最大的

”时，该指令读取的结果如下所示，而不是一个单纯的字符串。

v-bind

v-bind指令的主要功能是绑定属性，让属性的值变为参数，这样就可以在vue中定义属性的值。v-bind:指·令可以简写为：要绑定的属性，v-bind中，可以写合法的js表达式。

<input type="button" value="按钮"  v-bind:title="mytitle">
<input type="button" value="按钮"  :title="mytitle +'123'" >

v-on

此指令是为标签提供事件绑定机制的，可以为标签绑定事件；下面的代码就为改按钮绑定了click事件。

<input type="button" value="按钮"  :title="mytitle +'123'" v-on:click="show ">