青岛网站制作辰星辰,百度提交收录入口,如何建立网站数据库连接,网站开发设计师今天滴的学习目标#xff01;#xff01;#xff01; Vue组件是什么#xff1f;组件的特性和优势Vue3计算属性Vue3监听属性 在前面Vue详细入门#xff08;语法【一】——【二】#xff09;当中我们学习了Vue有哪些指令#xff0c;它的核心语法有哪些#xff1f;今天我们… 今天滴的学习目标 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 clickhandleClick :classbuttonClass{{ 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 idapp Button label点击我 buttonClassprimary-button :onClickhandleButtonClick / /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元素上
Vue3监听属性
Vue实例部分 定义了一个Vue应用程序实例app。 在data函数中返回了一个对象包含两个属性kilometers和meters初始值都为0。 使用watch选项来监听kilometers和meters属性的变化。
当kilometers变化时如果当前活动的字段是kilometers则将meters设置为kilometers乘以1000。
当meters变化时如果当前活动的字段是meters则将kilometers设置为meters除以1000。
使用Vue.createApp(app).mount(‘#app’)来创建并挂载Vue应用程序到id为app的div元素上
额外的$watch监听器 在Vue实例挂载后使用vm.$watch方法额外监听kilometers属性的变化。 当kilometers的值变化时这个监听器会更新id为info的p元素的innerHTML显示修改前后的值
