举例详解：VUE常用指令

VUE常用指令

一、v-model指令

v-model在表单控件或者组件上创建双向绑定，本质上是负责监听用户的输入事件（onchange，onkeyup，onkeydown等）以更新数据，并对一些极端场景进行一些特殊处理

例如：

      <div id="dd">

        <input type="text" value="" v-model='user'>
        <!-- 双向绑定 -->
        <p>{{user}}</p>

    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#dd',
            data: {
                user: "this  is  v-model"
            }
        })
    </script>

vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

当删除input中的文字时，p文本也相应删除

二、v-on指令

v-on:指令就是给元素进行事件绑定
例如：有个按钮，当点击的时候执行一些操作

    <div id="ddd">
        <input type="text" v-model='num'><br/>
        <input type="button" v-on:click="add" value="加一">
        <input type="button" @click="dda" value="减一">
         //在input中加入一个button并绑定一个点击事件
    </div>
    <script src="vue.js"></script>
    <script>
var vm =new  Vue({
el:"#ddd",
data:{
num:1
},
methods:{
    add:function(){
  this.num+=1
    },
    dda:function(){
        this.num-=1 
    }
}
})
    </script>

运行结果：当点击加减时，出现相应效果

语法

<标签 v-on:click="事件处理函数名" ></标签>
 
简写形式(v-on: 指令可以简写成 @)
 
<标签 @click="事件处理函数名" ></标签>   

三、v-pre指令

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始标签。跳过大量没有指令的节点会加快编译

   <script src="vue.js"></script>
    <div id="add">
        <p v-pre>{{msg}}</p>
        <!-- 不被编译 -->
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#add',
            data: {
                msg: '666'
            }
        })
    </script>

运行结果：

四、v-text和v-html指令

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新（v-text可以简写为{{}},并且支持逻辑运算）

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

       <div id="dd">
        <div v-text='user'> </div>
        <div v-html='user2'> </div>
    </div>

    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#dd',
            data: {
                user: "<h3 style='color: red;'>这是v-text</h3>",
                user2: "<h3 style='color: red;'>这是v-html</h3>"
            }
        })
    </script>

运行结果：

v-text绑定后是直接显示文本，也就是说你绑定的是什么内容就直接显示什么内容，不作任务的翻译

而v-html从名字上就可以看出，把绑定的文本内容尽量的翻译成html的标签

五、v-bind指令

v-bind用于绑定数据和元素属性

   <div id="ddd">
        <a v-bind:href="url">点击跳转</a>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: '#ddd',
            data: {
                url: "https://www.baidu.com"
            }
        });
    </script>

运行结果：

v-bind绑定了a标签的href属性，当点击a标签时，会根据对应vue中的对应的url数据进行跳转

六、v-cloak指令
v-cloak指令保持在元素上直到关联实例结束编译。和CSS规则如

[v-cloak] {display:none}

一起用时，可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
例子：

    <script src="vue.js"></script>
    <div id='ddd'>
        {{msg}}
    </div>
    <script>
setTimeout(()=>{
    new Vue({
        el:"#ddd",
        data:{
msg:'this  is  vue'
        }
    })
},2000)
    </script>

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。

我们可以使用 v-cloak 指令来解决这一问题。

  <div id='ddd' v-cloak>
        {{msg}}
    </div>