事件绑定

v-on 指令

用于进行元素的事件绑定。

Vue.js 还为 v-on: 指令提供了简写方式: @

<body>
  <div id="app">
    <p>{{ content }}</p>
    <button v-on:click="content='这是新的内容'">按钮</button>
    <button @click="content='这是按钮2设置的内容'">按钮2</button>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        content: '这是默认内容'
      }
    })
  </script>
</body>

设置函数

事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。

this指代的是vue实例

事件对象

设置事件处理程序后，可以从参数中接收事件对象。event不是一个固定值, 也可以是e或者其他的.

    new Vue({
      el: '#app',
      data: {
        content: '这是默认内容'
      },
      methods: {
        fn(event) {
          console.log(event);
          this.content = '这是设置的内容';
        }
      }
    })

在视图中可以通过$event访问事件对象。$event是vue.js内部提供的一个名称, 不能随意更改, 当vue.js在进行模板内容解析时, 看到$event就会将事件对象进行传入.

在vue.js中允许对事件进行传参, 如果希望自己对参数进行传入并同时也能使用时间对象的话.

    <button @click="fn2(200, $event)">按钮</button>
    
    
    new Vue({
      el: '#app',
      methods: {
        fn2(value, event) {
          console.log(value, event);
        }
      }
    })

表单输入绑定 v-model 指令

用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。

输入框绑定

输入框分为单行输入框 input 与多行输入框 textarea。
输入框中输入的内容会存储到value1和value2中.

<body>
  <div id="app">
    <p>input 输入框的内容为： {{ value1 }}</p>
    <input type="text" v-model="value1">

    <p>textarea 输入框的内容为： {{ value2 }}</p>
    <textarea v-model="value2"></textarea>
  </div>
  
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value1: '',
        value2: ''
      }
    });
  </script>
</body>

单选按钮绑定

单选按钮的双向数据绑定方式如下:

绑定的信息会存储到value3中.

<body>
  <div id="app">
    <p>radio 的内容为： {{ value3 }}</p>
    <input type="radio" id="one" value="1" v-model="value3">
    <label for="one">选项1</label>

    <input type="radio" id="two" value="2" v-model="value3">
    <label for="two">选项2</label>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value3: ''
      }
    });
  </script>
</body>

复选框绑定

复选框绑定分为单个选项与多个选项两种情况，书写方式不同。

单个选项, data中的value是个空字符串
多个选项, data中value是个数组

<body>
  <div id="app">
    <!-- 单个复选框进行双向数据绑定的演示 -->
    <p>单个复选框的值： {{ value4 }}</p>
    <input 
      type="checkbox" 
      value="选项内容" 
      id="one" 
      v-model="value4">
    <label for="one">选项内容</label>


    <!-- 多个复选框进行双向数据绑定的演示 -->
    <p>多个复选框的值：{{ value5 }}</p>
    <input 
      type="checkbox"
      id="cb1"
      value="选项1"
      v-model="value5"
      >
    <label for="cb1">选项1</label>
    <input 
      type="checkbox"
      id="cb2"
      value="选项2"
      v-model="value5"
      >
    <label for="cb2">选项2</label>
    <input 
      type="checkbox"
      id="cb3"
      value="选项3"
      v-model="value5"
      >
    <label for="cb3">选项3</label>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value4: '',
        value5: []
      }
    });
  </script>
</body>

需要注意的问题:

单个复选框中选中的值是个布尔值, 也就是value4中存储的值是个布尔值: 选中为true, 未选中为false; 而不是存储value="选项内容"中的值. 但value="选项内容"的value也要设置, 因为操作表单的时候是靠value传递信息的.

<p>单个复选框的值： {{ value4 }}</p>
    <input type="checkbox" value="选项内容" id="one" v-model="value4">
    <label for="one">选项内容</label>

多个复选框中需要用数组存储绑定值, 而且存储的是当前元素中设置的value的值

选择框绑定

选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同.

单选绑定声明空字符串;
多选绑定声明数组.

两种方式存储的都是当前元素value中设置的值, 而不是布尔值.

<body>
  <div id="app">
    <!-- 单选选择框 -->
    <p>单选选择框的内容: {{ value6 }}</p>
    <select v-model="value6">
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>

    <!-- 多选选择框 -->
    <p>多选选择框的内容：{{ value7 }}</p>
    <select v-model="value7" multiple>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value6: '',
        value7: []
      }
    });
  </script>
</body>

v-model 指令小结

• input 输入框：绑定字符串值。

• textarea 输入框：绑定字符串值。

• radio：绑定字符串值。

• checkbox：单个绑定布尔值，多个绑定数组。

• select：单选绑定字符串，多选绑定数组。

修饰符

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作。

事件修饰符

.prevent 修饰符

用于阻止默认事件行为，相当于 event.preventDefault()

<body>
  <div id="app">
    <!-- <a @click.prevent="fn" href="https://kaiwu.lagou.com/">链接</a> -->
    <a @click.prevent href="https://kaiwu.lagou.com/">链接</a>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn() {
          console.log('这是 a 标签的点击事件')
        }
      }
    });
  </script>
</body>

.stop 修饰符

用于阻止事件传播/阻止冒泡，相当于 event.stopPropagation()

<body>
  <div id="app">
    <div @click="fn1">
      <button @click.stop="fn2">按钮</button>
      <!-- <a @click.prevent.stop="fn2" href="https://kaiwu.lagou.com/">链接</a> -->
    </div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn1 () {
          console.log('div 的点击事件');
        },
        fn2 () {
          console.log('button 的点击事件');
          // console.log('a 的点击事件');

        }
      }
    })

修饰符是可以连写的. 比如这里的<a>既阻止了点击链接跳转又阻止了冒泡排序.

<a @click.prevent.stop="fn2" href="https://kaiwu.lagou.com/">链接</a>

.once 修饰符

用于设置事件只会触发一次。

按钮1的事件能多次触发, 但是按钮2的事件只能进行一次

<body>
  <div id="app">
    <button @click="fn">按钮1</button>
    <button @click.once="fn">按钮2</button>

  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn () {
          console.log('按钮被点击了');
        }
      }
    })
  </script>
</body>

按键修饰符

按键码

按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式。

keyCode已经在标准中被废弃了, 直接使用keyCode可能会导致不准确, 在不同的设备上可能会有不同的值.

数字和字母按键

可以使用keyCode或者直接使用字母.

@keyup="fn" 表示按下所有键都会触发fn()
@keyup.49="fn" 49是数字1的keyCode, 按下1触发fn()
@keyup.a="fn" 表示按下a触发fn()

<body>
  <div id="app">
    <input type="text" @keyup="fn"> 
    <input type="text" @keyup.49="fn">
    <input type="text" @keyup.a="fn">
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn (event) {
          console.log(event);
          console.log('输入了对应内容');
        }
      }
    });
  </script>
</body>

特殊按键

特殊按键指的是键盘中类似 esc、enter、delete 等功能按键，为了更好的兼容性，应首选内置别名。

例如:

.enter .tab .delete .esc .space .up .down .left .right

<body>
  <div id="app">
    <input type="text" @keyup.esc="fn">
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn (event) {
          console.log(event);
          console.log('输入了对应内容');
        }
      }
    });
  </script>
</body>

按键码可以连写, 表示的是或的关系. 只要满足其中一个就可以触发.

  <input type="text" @keyup.a.b.c="fn">

系统修饰符

系统按键指的是 ctrl 、alt 、shift 等按键。

一般不会单独使用, 单独点击系统操作符无效。

系统按键通常与其他按键组合使用 (与的关系)。

.ctrl 修饰符

必须和其他键一起使用.

@keyup.ctrl="fn"表示当有键与ctrl一起被按下时触发fn(), 控制台输出的是与Ctrl一起按下的键的信息. @keyup.ctrl.a="fn"表示只有当Ctrl与a一起按下时才触发fn()

例按下Ctrl+q清空输入框的内容.

<body>
  <div id="app">
    <input type="text" @keyup.ctrl.q="fn" v-model="inputValue">
  </div>
  
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: ''
      },
      methods: {
        fn (event) {
          // console.log(event);
          this.inputValue = '';
        }
      }
    });
  </script>
</body>

.alt 修饰符

与Ctrl类似

.shift 修饰符

于Ctrl类似

鼠标修饰符

用于设置点击事件由鼠标哪个按键来完成。

.left 修饰符只有左键点击才能触发

.right 修饰符只有右键点击才能触发

.middle 修饰符中间滚轮点击触发

<body>
  <div id="app">
    <button @click.left="fn">按钮1</button>
    <button @click.right="fn">按钮2</button>
    <button @click.middle="fn">按钮3</button>


  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn() {
          console.log('点击了元素');
        }
      }
    });
  </script>
</body>

v-model 修饰符

进行表单与数据的双向绑定.

.trim 修饰符

用于自动过滤用户输入内容首尾两端的空格。

  <div id="app">
    <input type="text" v-model.trim="inputValue">
    <p>{{ inputValue }}</p>
  </div>
  
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        inputValue: ''
      }
    });
  </script>

.lazy 修饰符

用于将 v-model 的触发方式由 input 事件触发更改为 change事件触发。指页面不会在输入框输入的时候同步刷新, 而是等焦点移出输入框后, 比较输入与就内容的比有没有发生变化, 如果发生变化, 就进行更新.

    <input type="text" v-model.lazy="inputValue">
    <p>{{ inputValue }}</p>

.number 修饰符

用于自动将用户输入的值转换为数值类型，如无法被parseFloat() 转换，则返回原始内容。

字母和数字同时存在时无法被转换, 会被忽略掉.

只输入字母, 不能发生转换, 会直接返回原始内容

    <input type="text" v-model.number="inputValue">
    <p>{{ inputValue }}</p>

vue(三) - 事件处理