【前端开发】一文带你精通Vue.js框架（七）

前言

上一篇中我们学习了vue.js 的条件语句、循环语句等知识点.，现在让我们接着Vue系列的学习。

Vue中事件处理器、表单等在开发中的作用不可或缺，本文将基于实例进行以上知识点的讲解。

---

事件处理器

在Vue.js中，我们可以使用v-on指令来绑定事件处理器。事件处理分为多种，本文介绍常见的几种。

1.点击事件处理：

语法模板

<template>
  <button v-on:click="handleClick">Click Me</button>
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleClick() {
      
      
      // 在这里编写点击事件处理逻辑
      console.log('Button clicked!');
    }
  }
};
</script>

当按钮被点击时，handleClick方法会被调用，并输出一条消息到控制台。

完整代码如下：

效果如下所示：

2.输入事件处理：

语法模板

<template>
  <input v-model="message" v-on:input="handleInput" placeholder="Type something">
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      message: ''
    };
  },
  methods: {
      
      
    handleInput() {
      
      
      // 在这里编写输入事件处理逻辑
      console.log('Input value changed: ' + this.message);
    }
  }
};
</script>

当文本输入框的值发生变化时，handleInput方法会被调用，并输出一条带有当前输入值的消息到控制台。

<div id="app">
    <input v-model="inputValue" placeholder="Type something" oninput="handleInput(event)">
    <p>You typed: {
   
   { inputValue }}</p>
  </div>

  <script>
    new Vue({
      
      
      el: '#app',
      data: {
      
      
        inputValue: ''
      }
    });

    function handleInput(event) {
      
      
      var inputValue = event.target.value;
      console.log('Input value changed:', inputValue);
      // 在这里可以进行其他处理逻辑
    }
  </script>

在上述代码中，我们使用 oninput 属性直接将 handleInput 函数绑定到输入框的 input 事件上。当用户在输入框中输入时，handleInput 函数会被调用，并通过 event.target.value 获取输入框的值。然后，你可以在函数中进行任何其他的处理逻辑。

3.键盘事件处理：

语法模板

<template>
  <input v-on:keyup.enter="handleEnterKey" placeholder="Press Enter">
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleEnterKey() {
      
      
      // 在这里编写按下回车键的事件处理逻辑
      console.log('Enter key pressed!');
    }
  }
};
</script>

当在文本输入框中按下回车键时，handleEnterKey方法会被调用，并输出一条消息到控制台。

---

表单

v-model 是 Vue.js 中一个常用的指令，它可以将表单输入元素绑定到 Vue 实例中的数据属性。通过这种方式，表单输入的值可以自动地同步到 Vue 实例中的数据，而不需要手动监听 “input” 或 “change” 事件来进行数据同步。

我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。

举个例子：

<div id="app">
  <p>input 元素：</p>
  <input v-model="message">
  <p>绑定: {
   
   { message }}</p>
	
  <p>textarea 元素：</p>
  <p style="white-space: pre">{
   
   { message2 }}</p>
  <textarea v-model="message2"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '秋说',
	message2: '等风来\r\nWait'
  }
})

页面回显如下：

我们可以通过以下形式实现复选框的双向数据绑定：

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{
   
   { checked }}</label>
  <p>多个复选框：</p>
  <input type="checkbox" id="1" value="秋说" v-model="checkedNames">
  <label for="runoob">秋说</label>
  <input type="checkbox" id="2" value="花无缺" v-model="checkedNames">
  <label for="google">花无缺</label>
  <br>
  <span>选择的值为: {
   
   { checkedNames }}</span>
</div> 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})

页面显示如下：

我们可以通过以下形式实现下拉列表的双向数据绑定：

<div id="app">
  <select v-model="selected" name="1">
    <option value="">choose</option>
    <option value="hello">秋说</option>
    <option value="bye">花无缺</option>
  </select>
  <div id="output">
      你的选择是: {
   
   {selected}}
  </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})

页面回显如下：

通过以上实例可以看到，v-model指令对于表单的处理是十分高效快捷的。

---

总结

以上为前端开发：一文带你精通Vue.js前端框架系列（七），带领读者掌握事件处理器及表单等。

前端开发系列将持续更新，读者可订阅专栏持续学习。