当前位置：首页 > java >正文

vue.js基础知识总结

java 2025/7/1 5:29:23

一.数据绑定

1.1插值

2.1指令

二.指令

2.1.v-if

2.2.v-for

2.3.v-on

2.4.v-bind

2.5.v-model

三.组件化开发

3.1创建组件

3.2注册组件

3.3使用组件

3.4组件通信

3.4.1父子组件通信

3.4.2子父组件通信

3.4.3非父子组件通信

3.4.4多组件状态共享

四.生命周期

五.计算属性

5.1计算属性的优势

5.2计算属性适用于以下场景

六.钩子函数

七.路由管理

7.1vue-router

7.2路由配置

7.3路由器实例

7.4路由守卫

7.5导航守卫

7.6动态路由

7.7路由参数

7.8路由懒加载

总结

一.数据绑定

Vue.js采用了双向数据绑定的机制，通过v-bind指令可以将数据绑定到DOM元素上，实现数据的动态更新。

1.1插值

使用双花括号"{{ }}"可以在HTML中插入Vue实例的数据，实现数据的动态展示。例如：

<div>{{ message }}</div>

上述代码中，message是Vue实例中的一个属性，当该属性的值发生变化时，绑定的DOM元素中的内容也会相应地更新。

2.1指令

Vue提供了一系列指令，用于灵活地处理DOM元素和Vue实例之间的数据绑定关系。常见的指令有v-bind、v-model、v-on等。

v-bind指令用于将Vue实例的数据绑定到DOM元素的属性上，例如：
```
<img v-bind:src="imageUrl">
```
上述代码中，inputValue是Vue实例中的一个属性，通过v-model指令，表单中的输入会实时更新到inputValue属性中，并且inputValue属性的变化也会反映在输入框中。
v-on指令用于监听DOM元素的事件，并在触发事件时执行Vue实例中的方法，例如：
```
<button v-on:click="handleClick">Click Me</button>
```
上述代码中，handleClick是Vue实例中的一个方法，在点击按钮时，该方法会被触发。

通过插值和指令的组合使用，可以实现复杂的数据绑定操作，从而实现数据驱动的用户界面。

二.指令

Vue.js提供了一系列的内置指令，如v-if、v-show、v-for等，用于处理DOM元素的显示和隐藏、循环遍历等操作。

2.1.v-if

根据表达式的值条件性地渲染元素。

2.2.v-for

基于数据源循环渲染元素。

2.3.v-on

绑定事件监听器，用于处理DOM事件。

2.4.v-bind

动态地绑定一个或多个特性，也可以简写为冒号(:)。

2.5.v-model

在表单元素上创建双向数据绑定。

除了这些，Vue.js还提供了许多其他有用的指令，如v-show、v-cloak、v-pre等。这些指令使得在Vue.js应用中更方便地操作DOM和管理数据。

三.组件化开发

Vue.js将页面拆分成多个组件，每个组件都有自己独立的数据和方法，并且可以通过props和events属性实现组件之间的数据传递和通信。

3.1创建组件

使用 Vue.js 的组件选项来创建一个新的组件。你可以定义组件的模板、数据、方法等。创建一个新的 Vue 组件，可以使用 Vue.component 方法或者在单文件组件中定义。

// 使用 Vue.component 方法创建全局组件
Vue.component('my-component', {// 组件的模板template: '<div>这是我的组件</div>'
});

3.2注册组件

在需要使用组件的地方，通过全局注册或局部注册的方式注册组件。

// 全局注册组件
Vue.component('my-component', {// 组件的模板template: '<div>这是我的组件</div>'
});// 局部注册组件
new Vue({el: '#app',components: {'my-component': {// 组件的模板template: '<div>这是我的组件</div>'}}
});

3.3使用组件

在模板中使用已注册的组件，可以通过标签的方式引入组件，并传递数据给组件。

<div id="app"><my-component></my-component>
</div>

3.4组件通信

3.4.1父子组件通信

父子组件通信主要有两种情况：

简单数据类型：父组件中定义数据，通过单向数据绑定的形式将数据绑定在子组件身上。子组件通过 props 接收数据，props 可以是一个数组，数组中放的是自定义属性名称。这种通信方式符合单项数据流，即父组件修改数据，子组件数据会相应更新。
复杂数据类型：父组件中的数据是一复杂数据类型，父组件绑定数据的时候，给子组件的是一个引用地址。子组件可以通过这个引用地址，修改这个数据。这种方式违背了单项数据流，因为子组件可以直接修改父组件传递的数据。

3.4.2子父组件通信

子父组件通信通过自定义事件来实现。父组件中定义数据和事件，子在组件身上绑定自定义事件。子组件定义方法，在这个方法中通过 this.emit(eventType, actualParams) 来调用自定义事件。

3.4.3非父子组件通信

非父子组件通信可以通过事件总线（Event Bus）来实现。首先创建一个事件中心，然后组件之间通过发布订阅方式进行通信。组件触发事件，事件中心接收事件并广播给所有订阅该事件的组件。这种方式适用于组件之间解耦合，便于维护。

3.4.4多组件状态共享

多组件状态共享可以使用 Vuex 状态管理库来实现。Vuex 提供一个集中式的状态管理方式，允许在组件之间共享数据。通过 Vuex，我们可以将数据存储在单一来源，并实现组件间状态同步。

四.生命周期

Vue.js 生命周期是指 Vue.js 组件从创建到销毁的过程中，会经历一系列的生命周期阶段，并在每个阶段执行一些特定的操作。在 Vue.js 2.x 中，生命周期钩子函数是通过在组件对象中定义的方法来实现的。而在 Vue.js 3.0 中，生命周期钩子函数被移到了 Composition API 中，以 API 的形式提供，用户可以主动注册不同的生命周期。

Vue.js 3.0 中的生命周期钩子函数如下：

onMounted：组件挂载到 DOM 后执行，此时可以操作 DOM 元素。
onBeforeMounted：组件即将挂载到 DOM 前执行，此时无法操作 DOM 元素。
onUpdated：组件数据更新后执行，此时可以操作 DOM 元素。
onBeforeUpdate：组件数据更新前执行，此时无法操作 DOM 元素。
onDestroyed：组件销毁前执行，此时可以进行一些清理操作。
onBeforeDestroy：组件销毁前执行，此时无法操作 DOM 元素。
onCreated：组件创建完成后执行，此时可以进行一些初始化工作。

需要注�，在 Vue.js 3.0 中，生命周期钩子函数的执行顺序与 Vue.js 2.x 有所不同。在 Vue.js 3.0 中，onMounted 和 onUpdated 的执行顺序在 onBeforeMounted 和 onBeforeUpdate 之后，而在 Vue.js 2.x 中，这四个钩子函数的执行顺序是连续的。

此外，Vue.js 3.0 还新增了两个生命周期钩子函数：

onActivated：组件激活后执行，此时可以操作 DOM 元素。
onDeactivated：组件停用前执行，此时可以进行一些清理操作。

映射关系如下：

beforeCreate -> useSetup
created -> useSetup
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

通过这些生命周期钩子函数，我们可以更好地控制组件的加载、更新和销毁过程，从而提高应用程序的性能和可维护性。

五.计算属性

在 Vue.js 中，计算属性（computed properties）是一种特殊的属性，它们的值是根据其他属性或表达式计算得出的。计算属性会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。计算属性使用 computed 关键字进行定义，其语法如下：

computed:  {someComputedProperty:  function  ()  {//  计算属性的  getter  函数return  /*  计算结果  */;}
}

5.1计算属性的优势

只有当依赖的数据发生变化时，计算属性才会重新计算，从而减少了不必要的计算。
计算属性会缓存计算结果，当依赖的数据发生变化时，直接使用缓存的结果，避免了重复计算。

5.2计算属性适用于以下场景

依赖于其他属性或表达式的值，且不需要在模板中进行频繁计算。
需要根据组件的状态或数据动态计算出一个新的属性值。

示例：

<template><div><p>用户名：{{  userName  }}</p><p>邮箱：{{  email  }}</p></div>
</template><script>
export  default  {data()  {return  {userName:  '张三',email:  ''};},computed:  {//  计算邮箱的样式emailStyle()  {return  {'color':  this.email  ?  'blue'  :  'gray'};}}
};
</script>

在这个示例中，我们定义了一个名为 emailStyle 的计算属性，它的值是根据 email 属性是否存在而动态变化的。当 email 属性有值时，emailStyle 的值是蓝色的，否则为灰色。这样可以根据用户输入的邮箱地址，动态切换样式。

六.钩子函数

Vue.js 钩子函数是 Vue 组件在特定阶段执行的函数，它们允许我们在这些阶段对组件的行为进行定制。钩子函数是 Vue 组件生命周期管理的重要组成部分。以下是 Vue.js 的一些常用钩子函数：

beforeCreate：在实例创建之初，组件的属性和数据还未初始化时调用。此时，还无法访问到组件的属性和数据。
created：组件实例创建完成后调用，此时可以访问到组件的属性和数据。但是，此时 DOM 尚未挂载，无法操作 DOM 元素。
beforeMount：在模板编译完成后，但在 DOM 挂载之前调用。此时，可以访问到编译后的虚拟 DOM，但真实 DOM 还未挂载。
mounted：在 DOM 挂载完成后调用，此时可以访问和操作真实 DOM 元素。
beforeUpdate：在数据更新之前调用，此时可以获取到旧的数据和 DOM 状态。
updated：在数据更新完成后调用，此时可以获取到新的数据和 DOM 状态。但请注意，避免在这个钩子函数中更改数据，因为这会导致无限循环。
beforeDestroy：组件销毁前调用，此时组件仍然完全可用。可以在组件卸载之前完成一些清理工作，如清除定时器、解绑事件等。
destroyed：组件销毁后调用，此时组件已不再可用。可以在此钩子函数中执行一些清理工作，如删除定时器、解绑事件等。
beforeRouteEnter：在进入路由之前调用，此时可以获取到即将进入的路由组件的信息。通常用于验证用户权限、检查用户是否登录等。
beforeRouteUpdate：在路由更新之前调用，此时可以获取到旧的路由组件和新的路由组件的信息。用于在路由更新时执行一些操作，如数据预加载等。
beforeRouteLeave：在离开路由之前调用，此时可以获取到当前路由组件的信息。通常用于执行一些清理工作，如清除页面上的临时数据等。
routeEnter：进入路由组件后调用，此时可以访问到路由组件的实例。
routeLeave：离开路由组件后调用，此时可以访问到路由组件的实例。

这些钩子函数为开发者提供了在组件生命周期的不同阶段执行自定义逻辑的机会，从而更好地控制和管理组件的行为。

七.路由管理

Vue.js 路由管理是 Vue.js 应用程序中用于实现单页面应用（Single Page Application，SPA）的一个重要功能。通过路由管理，可以在不同页面之间无缝切换，同时只需更新页面内容的一部分，从而提高用户体验。Vue.js 路由管理主要由以下几个部分组成：

7.1`vue-router`

Vue.js 官方推荐的路由库，用于实现前端路由功能。vue-router 与 Vue.js 紧密结合，提供了简单、高效的路由管理功能。

7.2路由配置

路由配置是定义应用程序中各个路由的基本信息。每个路由配置包含一个 path（路径）和一个对应的 component（组件）。路由配置可以通过 vue-router 的 routes 属性进行设置。

7.3路由器实例

路由器实例是用于管理应用程序路由的核心对象。通过创建一个 Router 实例，可以设置路由规则、路由参数、路由守卫等。在 Vue.js 应用程序中，路由器实例通常通过 import 语句导入。

7.4路由守卫

路由守卫是一种在导航发生前后执行的函数，用于控制导航行为。路由守卫可以拦截导航请求、检查用户权限、执行数据预加载等。在 Vue.js 路由管理中，路由守卫通过 beforeEnter、beforeRouteUpdate、beforeRouteLeave 等钩子函数实现。

7.5导航守卫

导航守卫是 Vue.js 路由管理的一种特殊路由守卫，用于在导航发生时执行特定操作。导航守卫可以通过 vue-router 的 beforeEach 方法添加。

7.6动态路由

动态路由是指路由路径中包含动态片段的路由。动态路由可以使导航根据特定条件发生变化，如根据用户权限、搜索关键字等。在 Vue.js 路由管理中，可以通过 vue-router 的 path 属性设置动态路径。

7.7路由参数

路由参数是路由配置中的一种特殊属性，用于在导航时传递数据。路由参数可以使导航更加灵活，因为在不同路由之间可以传递不同的数据。在 Vue.js 路由管理中，路由参数通过 vue-router 的 params 属性设置。

7.8路由懒加载

路由懒加载是一种优化网页性能的技术，可以在需要时才加载路由对应的组件。这样可以避免在页面加载时加载所有路由组件，从而提高页面加载速度。在 Vue.js 路由管理中，可以通过设置路由组件的 import.meta.preload 属性实现路由懒加载。

通过以上功能，Vue.js 路由管理可以帮助开发者轻松实现单页面应用的开发，提高用户体验。在实际项目中，还可以结合其他 Vue.js 插件，如 Vuex（状态管理）、Vuex-router-sync（自动同步路由状态）等，进一步优化路由管理。

总结

Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。其核心功能包括数据绑定、指令、组件化开发、生命周期、计算属性、钩子函数和路由管理。数据绑定让数据与 DOM 元素关联，指令控制模板渲染，组件化开发提高代码复用性。生命周期管理 Vue 实例的各个阶段，计算属性根据数据变化自动更新视图，钩子函数在特定时机执行特定操作。路由管理则方便构建单页面应用，实现不同页面之间的跳转。这些特性共同助力开发者高效构建丰富、交互丰富的应用。

查看全文

http://www.xdnf.cn/news/11568.html