[Front-end Development] One article will help you master the Vue.js framework (7)

Preface

In the previous article, we learned about conditional statements, loop statements and other knowledge points of vue.js. Now let us continue the study of the Vue series.

Event handlers, forms, etc. in Vue play an indispensable role in development. This article will explain the above knowledge points based on examples.

---

event handler

In Vue.js, we can use the v-on directive to bind event handlers. There are many types of event processing, and this article introduces the common ones.

1.Click event handling:

syntax template

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

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

When the button is clicked, the handleClick method will be called and a message will be output to the console.

The complete code is as follows:

The effect is as follows:

2. Input event processing:

syntax template

<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>

When the value of the text input box changes, the handleInput method will be called and a message with the current input value will be output to the console.

<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>

In the above code, we use the oninput attribute to directly bind the handleInput function to the input event of the input box superior. When the user inputs in the input box, the handleInput function will be called and the value of the input box will be obtained through event.target.value. Then, you can do any other processing logic in the function.

3. Keyboard event handling:

syntax template

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

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

When the Enter key is pressed in the text input box, the handleEnterKey method will be called and a message will be output to the console.

---

form

v-modelis a commonly used directive in Vue.js, which can bind form input elements to data attributes in a Vue instance. In this way, the values ​​entered in the form can be automatically synchronized to the data in the Vue instance without the need to manually listen to the "input" or "change" events for data synchronization.

We can create two-way data binding on form control elements using the v-model directive.

for example:

<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'
  }
})

The page echo is as follows:

We can implement two-way data binding of check boxes in the following form:

<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: []
  }
})

The page displays as follows:

We can implement two-way data binding of drop-down lists in the following form:

<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: '' 
  }
})

The page echo is as follows:

As you can see from the above examples, the v-model instruction is very efficient and fast for form processing.

---

Summarize

The above isFront-end development: One article will help you master the Vue.js front-end framework series(7), leading readers to master event handlers and forms wait.

The front-end development series will continue to be updated, and readers can subscribe to the column to continue learning.