举例详解：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="加一">