【vue教程】二. Vue特性原理详解

回顾

• 【vue教程】一. 环境搭建与代码规范配置

在上一篇文章中，我们介绍了 Vue.js 的起源、设计理念、核心特性 已经项目规范化配置 。我们学习了如何搭建 Vue 开发环境，并熟悉了一些常用的 Vue 开发工具和插件

本章涵盖知识点

• Vue 实例和选项
• 模板语法：插值、指令、过滤器
• 数据绑定和响应式原理
• 事件处理和表单输入、v-model 原理
• 组件基础

---

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

---

Vue 实例和选项

每个 Vue 应用都是从创建一个新的 Vue 实例开始的。Vue 实例是一个包含选项的对象，这些选项包括数据、方法、生命周期钩子等。

创建 Vue 实例

var vm = new Vue({
  el: "#app", // 指定Vue应该绑定到的DOM元素
  data: {
    message: "Hello Vue!", // 响应式数据
  },
  methods: {
    sayHello: function () {
      alert(this.message);
    },
  },
});

在这个实例中，el属性指定了 Vue 将接管哪个 DOM 元素，data属性包含了 Vue 实例的数据对象，methods属性包含了 Vue 实例可以调用的方法。

Vue 实例的选项

Vue 实例有多种选项，以下是一些常用的选项：

• data: 组件的数据对象。
• methods: 定义组件的方法。
• computed: 定义计算属性。
• watch: 定义侦听器。
• props: 子组件的外部数据。
• el: 指定 Vue 应该绑定到的 DOM 元素。

Vue 模板语法

Vue 的模板语法让我们能够声明式地将数据渲染进 DOM。

插值表达式

插值表达式允许我们把数据插到模板中。

<span>Message: {{ message }}</span>

当message数据变化时，页面上对应的文本也会更新。

指令

指令是 Vue 模板中的特殊标记，带有前缀v-，用于告诉 Vue 框架需要对 DOM 元素进行一些特殊的处理。

v-bind

用于动态地绑定一个或多个属性，或一个组件 prop。

<img :src="imageUrl" :alt="imageDescription" />

v-model

在表单输入和应用状态之间创建双向数据绑定。

<input v-model="username" placeholder="Enter your name" />

v-on

监听 DOM 事件。

<button @click="sayHello">Say Hello</button>

自定义指令

Vue 允许我们通过自定义指令向元素添加自己的功能。自定义指令 可以钩入到 Vue 的编译过程中，允许我们对元素进行低层次操作。

创建自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive("focus", {
  // 当被绑定的元素插入到DOM时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  },
});

在模板中使用自定义指令

<input v-focus />

自定义指令的钩子函数

自定义指令有以下几个钩子：

• bind: 只调用一次，指令第一次绑定到元素时调用。
• inserted: 被绑定元素插入父组件时调用。
• update: 所在组件的 VNode 更新时调用。
• componentUpdated: 父组件更新，该钩子被调用。
• unbind: 只调用一次，指令与元素解绑时调用。

自定义指令的实例演示

假设我们需要一个指令来控制元素的尺寸，根据数据属性调整大小：

Vue.directive("resize", {
  bind(el, binding) {
    el.style.width = binding.value.width + "px";
    el.style.height = binding.value.height + "px";
  },
  update(el, binding) {
    if (binding.oldValue !== binding.value) {
      el.style.width = binding.value.width + "px";
      el.style.height = binding.value.height + "px";
    }
  },
});

在模板中使用：

<div v-resize="resizeObj"></div>

其中resizeObj是 Vue 实例的数据对象，包含width和height属性。

指令注册

指令不仅可以全局注册，还可以局部注册到单个 Vue 实例。

局部注册指令

new Vue({
  directives: {
    focus: {
      // 指令定义
      inserted: function (el) {
        el.focus();
      },
    },
  },
});

在实例的模板中使用：

<input v-focus />

过滤器

过滤器用于在插值表达式中转换输出文本。

<p>{{ message | capitalize }}</p>

filters: {
  capitalize: function (value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

数据绑定和响应式原理

Vue 的数据绑定是通过响应式系统实现的，该系统确保数据变化时视图能自动更新。

响应式数据绑定示例

data: {
  firstName: 'John',
  lastName: 'Doe'
}

在模板中：

<p>{{ firstName }} {{ lastName }}</p>

当firstName或lastName变化时，视图会自动更新。

响应式原理解析

Vue 使用Object.defineProperty来劫持数据对象的属性，当属性值变化时，视图会自动更新。

v-model 的自定义实现

v-model在 Vue 中通常用于创建数据双向绑定，它主要是语法糖，背后是:value和@input的结合。在组件中，我们可以自定义v-model的行为。

自定义v-model

在组件中，我们可以通过model选项来自定义v-model：

Vue.component("child-component", {
  model: {
    prop: "customValue", // 指定prop的名称
    event: "change", // 指定事件的名称
  },
  props: ["customValue"],
  methods: {
    updateValue: function (event) {
      this.$emit("change", event.target.value); // 触发事件，并传入新值
    },
  },
  template: `
    <input type="text" :value="customValue" @input="updateValue">
  `,
});

使用自定义v-model的组件：

<child-component v-model="parentValue"></child-component>

在这个示例中，parentValue是父组件中的数据，通过v-model与child-component组件绑定。组件内部，我们监听input事件，并在事件发生时，通过$emit触发一个change事件，并传递新的值。

扩展知识点

• 修饰符：v-model可以与修饰符一起使用，如.lazy、.number和.trim，以控制输入的更新时机和行为。
• 不同类型的输入处理：对于radio、checkbox和select等不同类型的表单元素，Vue 提供了不同的处理方式来确保v-model的双向绑定能正常工作。

事件处理和表单输入

Vue 允许我们在模板中直接监听 DOM 事件，并在 Vue 实例的方法中处理这些事件。

事件处理示例

methods: {
  sayHello: function () {
    alert('Hello ' + this.username);
  }
}

在模板中：

<button @click="sayHello">Say Hello</button>

表单输入绑定

<input v-model="username" placeholder="Enter your name" />

当用户在输入框中输入时，username的值将自动更新，并且如果username在数据对象中变化，输入框的内容也会同步更新。

深入数据绑定

Vue 的数据绑定不仅限于简单的文本展示和表单输入，它还包括更复杂的场景。

对象和数组的更新

Vue 可以响应式地更新对象和数组，但需要注意使用Vue.set来保持响应性。

更新对象属性

// 对于新属性
Vue.set(vm.someObject, "newProperty", 123);

更新数组

// 添加元素
vm.someArray.push(123);
// 删除元素
vm.someArray.splice(index, 1);

修饰符

Vue 提供了事件处理的修饰符，如.stop、.prevent、.capture等，来简化事件处理。

使用修饰符

<button @click.stop="sayHello">Say Hello</button>

按键修饰符

Vue 允许你监听特定的按键，如.enter、.tab等。

监听特定按键

<input @keyup.enter="onEnter" />

组件基础

Vue 组件系统是构建大型应用程序的关键。组件允许我们通过组合较小的、可复用的部件来构建大型应用程序。

组件的创建和使用

Vue.component("my-component", {
  template: "<div>A custom component!</div>",
});

在模板中使用：

<my-component></my-component>

组件的 props

组件可以接受外部传入的数据，这些数据被称为 props。

Vue.component("child-component", {
  props: ["greeting"],
  template: "<p>{{ greeting }}</p>",
});

使用：

<child-component :greeting="'Hello from parent!'"></child-component>

组件事件

组件可以触发事件，这些事件可以被父组件监听。

Vue.component("child-component", {
  template: `
    <button @click="notifyParent">Click me</button>
  `,
  methods: {
    notifyParent() {
      this.$emit("notify", "Message from child");
    },
  },
});

父组件监听事件：

<child-component @notify="handleNotification"></child-component>

methods: {
  handleNotification: function (message) {
    alert(message);
  }
}

结语

通过本篇文章，我们全面学习了 Vue 的基础语法，包括 Vue 实例和选项、模板语法、数据绑定、事件处理、组件系统的基础，以及过滤器。这些知识点构成了 Vue 应用开发的基础。在接下来的专栏文章中，我们将继续深入探索 Vue 的高级特性和最佳实践。

---

欢迎在文章下方留言，分享学习 Vue 基础语法的心得体会，或提出在学习过程中遇到的问题。我将在后续的文章中提供解答和指导。

---