Vue.js 基础与事件处理详解

Vue.js 基础

Vue.js 是一个轻量级、易于上手的前端框架，它使得构建交互式用户界面变得简单而高效。在本文中，我们将深入探讨 Vue.js 的基础用法，包括如何引入 Vue.js、基础指令以及数据绑定。

下载和引入 Vue.js

在非组件化开发中，我们可以直接在 HTML 页面中引入 Vue.js。可以通过以下两种方式：

1. 在线引入：通过 <script> 标签直接从 CDN 加载 Vue.js 文件。

   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2. 本地引入：将 Vue.js 文件下载到本地，并通过 <script> 标签引入。

基础指令

Vue.js 提供了一系列指令来简化 DOM 操作：

• v-model：用于创建双向数据绑定，适用于 input、textarea 和 select 元素。

  <!-- 文本输入 -->
  <input v-model="message" placeholder="编辑我">
  
  <!-- 多行文本输入 -->
  <textarea v-model="message" placeholder="编辑我"></textarea>
  
  <!-- 单选框 -->
  <input type="checkbox" v-model="checked"> 记住我
  
  <!-- 复选框 -->
  <input type="checkbox" v-model="checkedNames" value="Jack"> Jack
  <input type="checkbox" v-model="checkedNames" value="John"> John
  
  <!-- 下拉选择 -->
  <select v-model="selected">
    <option disabled value="">请选择一个选项</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>

修饰符

Vue.js 的修饰符可以改变 v-model 的默认行为：

• .lazy：将 input 事件改为 change 事件，即在元素失去焦点时更新数据。

  <input v-model.lazy="msg" >

• .number：将输入值转为数字类型，但不会限制用户输入。

  <input v-model.number="age" type="number">

• .trim：去除输入值的前后空格。

<input v-model.trim="msg">

事件处理

在 Vue.js 中，事件处理是与用户交互的关键部分。我们可以使用 v-on 指令或其缩写 @ 来绑定事件。

绑定事件

<!-- 语法 -->
v-on:事件名="事件函数/代码块"
<!-- 简写 -->
@事件名="事件函数/代码块"

<!-- 示例 -->
<button @click="sayHello">点击我</button>

常用事件名

Vue.js 支持所有原生 DOM 事件，如 click、mouseover、mouseout 等。

事件处理器

事件处理器可以是内联的 JavaScript 语句或指向组件方法的名称。事件处理器可以无参或有参：

• 无参：直接调用方法，Vue.js 会自动传递事件对象 $event。

  <button @click="sayHello">点击我</button>
  
  
  
  

  new Vue({
    el: '#app',
    methods: {
      sayHello: function(event) {
        alert('Hello!');
      }
    }
  });

• 有参：可以手动传递事件对象，使用 $event。

  <button @click="sayHello($event)">点击我</button>

  new Vue({
    el: '#app',
    methods: {
      sayHello: function(event) {
        alert('Hello!');
      }
    }
  });

事件修饰符

事件修饰符用于控制事件默认行为，如阻止事件冒泡：

• .stop：阻止事件冒泡。

  <div @click.stop="doSomething">点击我</div>

• .prevent：阻止默认事件行为。

  <form @submit.prevent="onSubmit">
    <button type="submit">提交</button>
  </form>

生命周期钩子

Vue.js 组件的生命周期钩子允许我们在不同阶段执行代码：

• beforeCreate：在组件实例创建之前。
• created：在组件实例创建之后。
• beforeMounted：在组件初次渲染到页面之前。
• mounted：在组件初次渲染到页面之后。
• beforeUpdate：在组件更新之前。
• updated：在组件更新之后。
• beforeUnmount：在组件销毁之前。
• unmounted：在组件销毁之后。

通过这些钩子，我们可以在组件的不同生命周期阶段执行必要的操作，如发送 AJAX 请求、操作 DOM 等。

示例代码

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  created: function() {
    console.log('组件创建完毕');
  },
  mounted: function() {
    console.log('组件挂载到DOM上');
  },
  methods: {
    sayHello: function(event) {
      alert('Hello ' + this.message + '!');
    }
  }
});

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message" placeholder="编辑我">
  <button @click="sayHello">点击我</button>
</div>

总结

在本文中，我们深入探讨了 Vue.js 的基础知识和事件处理机制。我们从如何下载和引入 Vue.js 开始，了解了它的核心指令，如 v-model 用于创建数据的双向绑定，以及 v-on 用于绑定事件处理器。我们还学习了如何使用修饰符来改变 v-model 的默认行为，以及如何使用事件修饰符来控制事件的传播和默认行为。

通过示例代码，我们展示了如何在实际应用中使用这些指令和修饰符。了解了 Vue.js 组件的生命周期钩子，这些钩子允许我们在组件的不同阶段执行代码，从而更好地管理组件的状态和行为。