前端学习-Vue事件与表单处理

事件处理

v-on 指令

• 用于进行元素的事件绑定。
• Vue.js 还为 v-on 指令提供了简写方式。
• 事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。
• 设置事件处理程序后，可以从参数中接收事件对象。
• 在视图中可以通过 $event 访问事件对象。

<div id="app">
    <p>{{ content }}</p>
    <button v-on:click="content='这是新的内容'">按钮</button>
    
    <!--简写法-->
    <button @click="content='这是按钮2设置的内容'">按钮2</button>

    <!--调用了methods中的fn方法-->
    <button @click="fn">按钮3</button>

    <!--函数需要接受自定义的参数时，接受事件对象需要手动传入$event-->
    <button @click="fn2(200, $event)">按钮4</button>
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        content: '这是默认内容'
      },
      methods: {
        fn (event) {
          console.log(event);
          this.content = '这是按钮3设置的内容';
        },
        fn2 (value, event) {
          console.log(value, event);
        }
      }
    })
</script>

表单输入绑定

v-model 指令

• 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。
• 首先我们来体验一下双向数据绑定的效果。

输入框绑定

• 输入框分为单行输入框 input 与多行输入框 textarea。

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

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

单选按钮绑定

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

<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>
    var vm = new Vue({
      el: '#app',
      data: {
        value3: ''
      }
    });
</script>

复选框绑定

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

<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>
    var vm = new Vue({
      el: '#app',
      data: {
        value4: '',
        value5: []
      }
    });
</script>

选择框绑定

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

<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>
    var vm = new Vue({
      el: '#app',
      data: {
        value6: '',
        value7: []
      }
    });
</script>

v-model 指令小结

• input 输入框:绑定字符串值。
• textarea 输入框:绑定字符串值。
• radio:绑定字符串值。
• checkbox:单个绑定布尔值，多个绑定数组。
• select:单选绑定字符串，多选绑定数组。

修饰符

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

事件修饰符

prevent 修饰符

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

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

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

stop 修饰符

• 用于阻止事件传播，相当于 event.stopPropagation()。
• Vue.js 中允许修饰符进行连写，例如:@click.prevent.stop

<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>
    new Vue({
      el: '#app',
      data: {

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

once 修饰符

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

<div id="app">
    <button @click="fn">按钮1</button>
    <button @click.once="fn">按钮2</button>
</div>
<script>
    new Vue({
      el: '#app',
      data: {

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

按键修饰符

按键码

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

  特殊按键

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

<div id="app">
    <input type="text" @keyup="fn">
    <input type="text" @keyup.49="fn">
    <input type="text" @keyup.a="fn">
    <input type="text" @keyup.esc="fn">
    <input type="text" @keyup.a.b.c="fn">
</div>
<script>
    new Vue({
      el: '#app',
      data: {

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

系统修饰符

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

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

鼠标按键修饰符

.left 修饰符 .right 修饰符 .middle 修饰符

<div id="app">
    <button @click.left="fn">按钮1</button>
    <button @click.right="fn">按钮2</button>
    <button @click.middle="fn">按钮3</button>
</div>
<script>
    new Vue({
      el: '#app',
      data: {

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

v-model 修饰符

• .trim 修饰符
  用于自动过滤用户输入内容首尾两端的空格。
• .lazy 修饰符
  用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发。
• .number 修饰符
  用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容。

<div id="app">
    <input type="text" v-model.trim="inputValue">
    <p>{{ inputValue }}</p>

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

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