Vue实例的重要组成部分

编程语言 2023-10-03 19:47:40 阅读次数: 0

生命周期钩子函数：

Vue.js提供了一系列的生命周期钩子函数，它们允许您在Vue实例的不同生命周期阶段执行自定义逻辑。这些钩子函数是在Vue实例的不同阶段被自动调用的，可以用于进行初始化、数据处理、DOM操作等。

以下是常见的Vue生命周期钩子函数：

beforeCreate：

  • 用法：在实例创建之前被调用，此时实例的数据和事件还未初始化。
  • 主要用途：在组件实例被创建之前，可以进行一些初始化的工作，但不能访问到组件的数据和方法。

created：

  • 用法：在实例创建之后被调用，此时实例已经完成了数据的初始化，但 DOM 还未被挂载。
  • 主要用途：通常在这个阶段可以进行一些异步操作，如请求数据、监听事件等。
<template>
  <div>
    {
   
   { message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
    };
  },
  beforeCreate() {
    // 在组件实例创建之前，此时 data 和 methods 还未初始化，无法访问组件实例的数据
    console.log("beforeCreate hook");
    console.log(this.message); // 输出 undefined
  },
  created() {
    // 在组件实例创建之后，此时 data 和 methods 已经初始化，但 DOM 元素还未挂载
    console.log("created hook");
    console.log(this.message); // 输出 "Hello, Vue!"
  },
};
</script>

  1. beforeMount：

    • 用法：在 DOM 元素被挂载到页面之前调用。
    • 主要用途：通常用于进行一些 DOM 相关的准备工作。

  2. mounted：

    • 用法：在 DOM 元素被挂载到页面之后调用。
    • 主要用途：通常用于执行一些需要访问 DOM 元素的操作，比如初始化图表、绑定事件等。

DOM（Document Object Model）元素是指网页文档中的各个组成部分，包括标签、文本、属性等，它们组合起来形成了整个网页的结构和内容。在 HTML 中，每个标签都可以被看作是一个 DOM 元素，而这些标签可以包含其他标签，从而形成嵌套的关系，构建了网页的层次结构。

DOM 元素以树状结构组织，每个元素都可以有子元素和父元素，形成父子关系。最顶层的 DOM 元素是文档元素（document element），通常是 <html> 标签。这个元素是其他所有元素的根元素，整个文档的结构都是从这个元素开始的。DOM 元素是网页文档中组成网页内容的基本单元，通过 DOM 元素，我们可以操作和修改网页的结构和内容，实现动态交互和用户体验。

<template>
  <div>
    <p ref="paragraph">{
   
   { message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
    };
  },
  beforeMount() {
    // 在 DOM 元素被挂载到页面之前调用
    console.log("beforeMount hook");
    console.log(this.$refs.paragraph); // 输出 undefined，此时 DOM 还未挂载
  },
  mounted() {
    // 在 DOM 元素被挂载到页面之后调用
    console.log("mounted hook");
    console.log(this.$refs.paragraph); // 输出 <p>Hello, Vue!</p>，DOM 已经挂载，可以访问到 DOM 元素
  },
};
</script>

  1. beforeUpdate：

    • 用法：在组件更新之前调用，数据更新时会触发该钩子函数。
    • 主要用途：可以在更新前进行一些操作，但不要修改数据，否则会导致无限循环更新。

  2. updated：

    • 用法：在组件更新之后调用，此时 DOM 也已经更新完毕。
    • 主要用途：通常用于处理更新后的 DOM 相关操作，比如重新计算一些值、更新图表等。
<template>
  <div>
    <p>{
   
   { message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
    };
  },
  methods: {
    updateMessage() {
      this.message = "Updated Message";
    },
  },
  beforeUpdate() {
    // 在组件更新之前调用
    console.log("beforeUpdate hook");
    console.log(this.message); // 输出 "Hello, Vue!"，更新前的数据
  },
  updated() {
    // 在组件更新之后调用
    console.log("updated hook");
    console.log(this.message); // 输出 "Updated Message"，更新后的数据
  },
};
</script>

  1. beforeDestroy：

    • 用法：在实例销毁之前调用。
    • 主要用途：可以在组件销毁前进行一些清理工作，如清除定时器、解绑事件等。

  2. destroyed：

    • 用法：在实例销毁之后调用。
    • 主要用途：通常用于释放组件占用的资源，做一些清理工作。
<template>
  <div>
    <p>{
   
   { message }}</p>
    <button @click="destroyComponent">Destroy Component</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
    };
  },
  methods: {
    destroyComponent() {
      // 销毁组件实例
      this.$destroy();
    },
  },
  beforeDestroy() {
    // 在实例销毁之前调用
    console.log("beforeDestroy hook");
    // 在此阶段，组件实例还未被销毁，仍然可以访问组件的数据和方法
    console.log(this.message); // 输出 "Hello, Vue!"
  },
  destroyed() {
    // 在实例销毁之后调用
    console.log("destroyed hook");
    // 在此阶段，组件实例已经被销毁，无法访问组件的数据和方法
    // console.log(this.message); // 输出 Error: Cannot read property 'message' of undefined
  },
};
</script>

计算属性（Computed Properties）和侦听器（Watchers）都是 Vue.js 提供的用于监听数据变化和响应数据变化的功能，它们有各自的用途。

计算属性：

计算属性是用于在 Vue 实例中根据已有的数据（响应式数据）计算出一个新的数据，并将其作为一个属性暴露出来。计算属性的值会被缓存，只有在它依赖的响应式数据发生变化时，才会重新计算。这样可以有效避免不必要的重复计算，提高性能。

计算属性的声明方式是在 Vue 组件中使用 computed 对象，并在其中定义各个计算属性的名称和对应的计算函数。计算函数会返回计算出的新值。

<template>
  <div>
    <p>{
   
   { message }}</p>
    <p>Character Count: {
   
   { characterCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
    };
  },
  computed: {
    characterCount() {
      // 计算 message 的字符数
      return this.message.length;
    },
  },
};
</script>

在上述示例中，characterCount 是一个计算属性，它依赖于 message 这个响应式数据，并通过计算返回了 message 的字符数。

侦听器：

侦听器是用于监听一个数据的变化，并在数据变化时执行自定义的逻辑。相比计算属性，侦听器可以用于监听一个或多个特定的数据，而不会返回新的计算值，它主要用于在数据变化时执行异步操作、复杂计算或与其他数据的交互。

侦听器的声明方式是在 Vue 组件中使用 watch 对象，并在其中定义需要监听的数据属性以及对应的回调函数。

<template>
  <div>
    <input v-model="message" />
    <p>Character Count: {
   
   { characterCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
      characterCount: 0,
    };
  },
  watch: {
    message(newValue, oldValue) {
      // 监听 message 的变化，计算字符数并更新 characterCount
      this.characterCount = newValue.length;
    },
  },
};
</script>

在上述示例中，watch 对象中定义了一个侦听器，它监听 message 数据的变化，并在数据变化时计算字符数并更新 characterCount。

综上所述，计算属性用于根据已有数据计算出新的数据，而侦听器用于监听数据的变化并执行自定义的逻辑，它们都是 Vue.js 提供的功能，用于处理数据的变化和响应。具体使用哪个取决于你的需求：如果你需要返回新的计算值，可以使用计算属性；如果你需要监听数据变化并执行自定义操作，可以使用侦听器。

事件处理器：

事件处理器是用于处理用户交互事件（如点击、输入等）的函数或方法。在前端开发中，通过添加事件处理器，可以实现用户与页面的交互，使网页变得动态和响应式。

指令：

在 Vue.js 中，指令（Directives）是一种特殊的 HTML 属性，用于提供特定的交互和行为。指令以 v- 开头，并作为普通 HTML 属性添加到 HTML 元素中。Vue.js 在解析模板时，会识别这些指令，并根据指令提供的逻辑执行相应的操作，从而使页面实现更多的交互效果。

Vue.js 提供了一些内置的指令，如 v-if、v-for、v-on、v-bind、v-model 等，以及用户可以自定义的自定义指令。

以下是几个常用的内置指令的示例：

v-if：用于条件渲染，根据表达式的值来决定是否显示元素。

<template>
  <div>
    <p v-if="showMessage">This message is shown when showMessage is true.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
    };
  },
};
</script>

v-for：用于循环渲染，根据数据数组的内容来重复渲染元素。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{
   
   { item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
      ],
    };
  },
};
</script>

v-on：用于绑定事件处理器，当特定事件发生时执行相应的方法。

<template>
  <div>
    <button @click="increaseCounter">Click me</button>
    <p>Counter: {
   
   { counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increaseCounter() {
      this.counter++;
    },
  },
};
</script>

v-bind：用于绑定属性或样式，将表达式的值绑定到 HTML 元素的属性上。

<template>
  <div>
    <p :class="isActive ? 'active' : 'inactive'">This paragraph's class is based on the isActive value.</p>
    <a :href="linkUrl">Click me to visit the link</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      linkUrl: "https://www.example.com",
    };
  },
};
</script>

v-model：用于实现双向数据绑定，在表单元素上绑定数据，并且可以响应用户的输入。

除了上述内置指令，Vue.js 还支持自定义指令，可以通过 Vue.directive 方法来定义和注册自定义指令，从而实现更多个性化的交互效果和功能。

总之，指令是 Vue.js 中一种重要的特性，通过指令，我们可以实现数据绑定、条件渲染、循环渲染、事件处理等功能，使页面变得更加动态和富有交互性。

过滤器：

在 Vue.js 中，过滤器（Filters）是一种用于格式化显示文本的功能。它可以在模板中对数据进行处理，并将处理后的结果显示给用户。过滤器通常用于对日期、金额、文本等数据进行格式化，使其更易于阅读和理解。

Vue.js 提供了一组内置的过滤器，并且允许用户自定义自己的过滤器。

以下是一个示例，展示了如何在 Vue 组件中使用内置和自定义过滤器：

内置过滤器不需要额外定义，Vue.js 已经为我们提供了一些常用的内置过滤器，如 capitalize（将字符串首字母大写）、uppercase（将字符串转换为大写）、lowercase（将字符串转换为小写）等。可以通过 v-bind 或 { { }} 语法结合内置过滤器直接使用。

<template>
  <div>
    <p>{
   
   { message | capitalize }}</p>
    <p>{
   
   { price | currency }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello, vue!",
      price: 20.5,
    };
  },
};
</script>

在上述示例中，我们使用了内置过滤器 capitalize 和 currency 对数据进行格式化处理。在模板中，我们通过 | 管道符来使用过滤器，将数据绑定到过滤器，然后过滤器会对数据进行处理并返回处理后的结果。

<template>
  <div>
    <p>Date: {
   
   { currentDate | formatDate }}</p>
    <p>Amount: {
   
   { price | formatCurrency }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      price: 1200.5,
    };
  },
  filters: {
    formatDate(value) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(value).toLocaleDateString(undefined, options);
    },
    formatCurrency(value) {
      return `$${value.toFixed(2)}`;
    },
  },
};
</script>

自定义过滤器是通过在 Vue 组件中的 filters 选项对象中定义的，其中键是过滤器的名称，值是过滤器函数。过滤器函数接收要处理的数据作为第一个参数，并返回处理后的结果。

猜你喜欢

转载自blog.csdn.net/m0_57263959/article/details/132020958
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022