• vue2技能树（6）-事件处理和表单输入绑定

    目录

    👍 点赞，你的认可是我创作的动力！

    ⭐️ 收藏，你的青睐是我努力的方向！

    ✏️ 评论，你的意见是我进步的财富！

    Vue 2 事件处理详解

    Vue.js 2 提供了强大的事件处理机制，使你可以在Vue实例中处理DOM事件，以实现用户界面的交互性。以下是对Vue 2事件处理的多方面详细介绍，包括使用详细的项目实例。

    监听事件

    在Vue 2中，你可以使用v-on 指令来监听DOM事件，如点击、输入、鼠标移动等。

    项目示例

    假设你有一个按钮，你想在点击按钮时执行某个方法。

    <div id="app">
  <button v-on:click="sayHello">点击我button>
div>

    • 1
    • 2
    • 3
    new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue!');
    },
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这个示例中，v-on:click 用于监听按钮的点击事件，触发sayHello 方法。

    事件修饰符

    Vue 2 提供了事件修饰符，用于修改事件的行为。

    项目示例

    假设你有一个输入框，你希望在按下回车键时执行某个方法。

    <div id="app">
  <input v-on:keyup.enter="submitForm">
div>

    • 1
    • 2
    • 3
    new Vue({
  el: '#app',
  methods: {
    submitForm: function() {
      alert('Form submitted');
    },
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这个示例中，v-on:keyup.enter 用于监听按下回车键的事件，触发submitForm 方法。

    内联事件处理

    除了在v-on 中绑定方法，你还可以在模板中直接定义内联的事件处理方法。

    项目示例

    <div id="app">
  <button v-on:click="showMessage('Hello, Vue!')">点击我button>
div>

    • 1
    • 2
    • 3
    new Vue({
  el: '#app',
  methods: {
    showMessage: function(message) {
      alert(message);
    },
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这个示例中，内联的事件处理方法直接在模板中定义，而不是绑定到Vue实例的方法。

    事件对象

    在事件处理方法中，Vue 2会自动传递一个事件对象作为参数，你可以访问事件的属性，如event.target。

    项目示例

    <div id="app">
  <button v-on:click="showEventInfo">点击我button>
div>

    • 1
    • 2
    • 3
    new Vue({
  el: '#app',
  methods: {
    showEventInfo: function(event) {
      alert('事件类型：' + event.type);
    },
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这个示例中，showEventInfo 方法接受一个事件对象作为参数，并显示事件的类型。

    事件修饰符

    Vue 2 提供了一些事件修饰符，用于更精细地控制事件处理行为。

    项目示例

    假设你有一个表单，你希望在提交时阻止默认行为。

    <div id="app">
  <form v-on:submit.prevent="onSubmit">
    <button type="submit">提交button>
  form>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    new Vue({
  el: '#app',
  methods: {
    onSubmit: function() {
      alert('表单已提交');
    },
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这个示例中，v-on:submit.prevent 用于监听表单提交事件，并阻止默认行为。

    Vue 2的事件处理机制非常灵活，允许你处理各种DOM事件，使用修饰符控制事件行为，以实现交互性的用户界面。无论是监听点击事件、键盘事件还是鼠标事件，Vue都提供了方便的方式来处理事件。

    Vue 2 表单输入绑定详解

    Vue.js 2 提供了便捷的方式来实现表单输入绑定，使你可以轻松地处理表单输入元素的数据和状态。以下是对Vue 2表单输入绑定的多方面详细介绍，包括使用详细的项目实例。

    双向数据绑定

    Vue 2 使用双向数据绑定来实现表单输入元素的同步，这意味着输入元素的值与Vue实例中的数据属性保持同步，当输入框的值改变时，相关数据属性也会更新，反之亦然。

    项目示例

    假设你有一个输入框，你希望在输入框中的值改变时同步更新Vue实例中的数据。

    <div id="app">
  <input v-model="message" placeholder="输入一些内容">
  <p>你输入的内容是: {{ message }}p>
div>

    • 1
    • 2
    • 3
    • 4
    new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这个示例中，v-model 指令用于实现双向数据绑定，message 数据属性和输入框的值会同步更新。

    单选框和复选框

    Vue 2 也支持单选框和复选框的绑定。

    项目示例

    假设你有一个单选框和一个复选框，你希望它们的状态能够同步更新到Vue实例中的数据。

    <div id="app">
  <input type="radio" id="male" value="男" v-model="gender">
  <label for="male">男label>
  <input type="radio" id="female" value="女" v-model="gender">
  <label for="female">女label>
  <input type="checkbox" id="agree" v-model="isAgreed">
  <label for="agree">我同意label>
  <p>性别: {{ gender }}p>
  <p>是否同意条款: {{ isAgreed }}p>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    new Vue({
  el: '#app',
  data: {
    gender: '',
    isAgreed: false
  }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这个示例中，v-model 用于实现单选框和复选框的数据绑定，gender 数据属性和性别单选框的选中状态以及isAgreed 数据属性和同意复选框的选中状态会同步更新。

    下拉框

    Vue 2 也支持下拉框（