Vue详细入门（语法【三】）

news2024/10/19 1:07:58

今天滴的学习目标！！！

Vue组件是什么？
组件的特性和优势
Vue3计算属性
Vue3监听属性

在前面Vue详细入门（语法【一】——【二】）当中我们学习了Vue有哪些指令，它的核心语法有哪些？今天我们学习Vue组件是什么？组件的特性和优势，Vue3计算属性，Vue3监听属性 (^-^)

Vue组件是什么？

首先我们要了解Vue组件是什么？是用来干什么的？

Vue组件是Vue.js框架中的基础构建块，它们允许开发者将UI分割成可复用的部分，每个部分都包含自己的逻辑、模板和样式。组件使得大型应用的开发变得更加模块化和易于管理。

Vue组件的用途

代码复用：通过创建组件，你可以将UI的某个部分抽象出来，然后在不同的地方重复使用它，而不需要每次都重写相同的代码。
模块化：组件使得应用的结构更加清晰，每个组件都负责自己的功能，这有助于开发者理解和维护代码。
可维护性：由于组件是独立的，因此可以单独测试、调试和更新，而不会影响到其他部分。
可扩展性：组件可以通过插槽（slots）、事件（events）和属性（props）等方式进行扩展和自定义，以适应不同的使用场景。

Vue组件的基本结构
一个Vue组件通常由以下部分组成：

模板（template）：定义了组件的HTML结构。
脚本（script）：包含了组件的逻辑，如数据、方法、计算属性等。
样式（style）：定义了组件的CSS样式，可以使用scoped属性来确保样式只作用于当前组件

Vue组件的示例代码
下面是一个简单的Vue组件示例，全局组件实例：

展示了如何创建一个Vue应用，定义一个全局组件，并将该组件挂载到DOM中的一个元素上
在这里插入图片描述
接下来我们再注册一个 button-counter 组件:

在每次点击后，计数器会加 1：

这段代码展示了Vue 3中如何创建应用、定义组件、使用响应式数据、定义模板以及将应用挂载到DOM元素上的基本概念

组件的特性和优势

那我们了解Vue组件什么了，那它的特性或者是它的优势在于哪里嘞？

Vue组件的特性

可复用性：

组件允许你将UI的某个部分抽象出来，并在不同的地方重复使用。
这减少了代码的冗余，提高了开发效率。

模块化：

组件将应用拆分成多个小的、独立的模块。
每个模块都有自己的逻辑、模板和样式，使得应用的结构更加清晰。

封装性：

组件封装了内部的状态和行为，外部只能通过属性（props）和事件（events）与组件进行交互。
这有助于保护组件的内部实现，防止外部直接修改组件的状态。

响应式数据绑定：

Vue组件支持响应式数据绑定，当数据发生变化时，视图会自动更新。
这减少了手动更新DOM的需要，提高了应用的性能和可靠性。

自定义元素：

组件可以像HTML元素一样被使用，这使得它们非常易于集成到现有的Web应用中。

Vue组件的优势

提高开发效率：

通过复用组件，减少了重复代码，加快了开发速度。

易于维护：

组件化的结构使得代码更加清晰，易于理解和维护。

增强可扩展性：

组件可以通过插槽、属性和事件等方式进行扩展和自定义。

促进团队协作：

组件化的开发方式使得不同的开发者可以并行工作，互不干扰。

Vue代码示例
以下是一个简单的Vue组件示例，它展示了如何创建一个可复用的按钮组件，并演示了上述特性中的一些。

<!-- Button.vue -->  
<template>  
  <button @click="handleClick" :class="buttonClass">{{ label }}</button>  
</template>  
  
<script>  
export default {  
  name: 'Button',  
  props: {  
    label: {  
      type: String,  
      required: true  
    },  
    buttonClass: {  
      type: String,  
      default: ''  
    },  
    onClick: {  
      type: Function,  
      default: null  
    }  
  },  
  methods: {  
    handleClick() {  
      if (this.onClick) {  
        this.onClick();  
      }  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* 这里的样式只会应用于Button组件 */  
button {  
  padding: 10px 20px;  
  font-size: 16px;  
  cursor: pointer;  
}  
</style>

在另一个Vue文件中使用这个组件：

<!-- App.vue -->  
<template>  
  <div id="app">  
    <Button label="点击我" buttonClass="primary-button" :onClick="handleButtonClick" />  
  </div>  
</template>  
  
<script>  
import Button from './Button.vue';  
  
export default {  
  name: 'App',  
  components: {  
    Button  
  },  
  methods: {  
    handleButtonClick() {  
      alert('按钮被点击了！');  
    }  
  }  
};  
</script>  
  
<style>  
/* 全局样式 */  
.primary-button {  
  background-color: blue;  
  color: white;  
  border: none;  
  border-radius: 5px;  
}  
</style>

在这个例子中，Button组件接受三个属性：label（按钮上的文本）、buttonClass（按钮的CSS类名）和onClick（点击按钮时触发的回调函数）。组件内部使用了一个方法handleClick来处理点击事件，并调用传入的onClick回调函数（如果存在的话）。

通过这种方式，Button组件变得非常灵活和可复用，可以在不同的地方使用，并传递不同的属性和回调函数来满足不同的需求。同时，由于组件的封装性，它的内部实现被保护起来，外部只能通过属性进行交互，这有助于保持组件的独立性和稳定性。

Vue3计算属性

Vue.js中的计算属性（computed properties）是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，它们才会重新求值。这使得计算属性非常适合用于执行复杂逻辑，同时保持高效和响应式。

这段代码展示了如何使用Vue.js框架来创建一个简单的应用，该应用会将其数据（在这个例子中是message字符串）进行反转处理，并在页面上显示出来。这是Vue.js数据绑定和插值表达式功能的一个简单示例。
在这里插入图片描述
{{ message.split('').reverse().join('') }}：这是Vue的插值表达式。它的作用是显示message数据属性的内容，但是在显示之前，会对这个内容进行处理。
message.split('')：将message字符串分割成字符数组。
.reverse()：将字符数组的元素顺序反转。
.join('')：将反转后的字符数组重新连接成一个字符串。

const app = {...}：这里定义了一个Vue应用的数据对象。data函数返回一个对象，这个对象包含了应用的数据。在这个例子中，数据对象有一个属性message，其初始值为’RUNOOB!!‘。
Vue.createApp(app).mount('#app')：这行代码创建了一个Vue应用实例，并将之前定义的app对象作为配置对象传入。然后，通过mount(’#app’)方法，将这个Vue应用挂载到页面上ID为app的div元素上