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

VUE项目中问题学习总结（一）

news 文章来源：https://blog.csdn.net/qqq1994_0810/article/details/134790928 2024/11/18 10:39:40

文章目录

- 🍁自定义组件使用
- 🍁clearInterval函数的使用
- - 🌿定时器的作用
- 🍁localStorage的使用
- - 🌿设置数据
  - 🌿获取数据
  - 🌿更新数据
  - 🌿删除数据
- 🍁VUE国际化配置
- 🍁项目启动main.js调用情况
- 🍁main.js和app.vue调用关系

🍁自定义组件使用

components 中引用MainLayout 画面中用 MainLayout是怎么和关联起来的?
在Vue中，组件的使用是通过自定义HTML元素的方式进行的。当我们在组件的模板中使用自定义标签时，Vue会自动将该标签与所对应的组件实例关联起来。

例如，如果我们有一个名为“MainLayout”的组件，并在组件的模板中使用标签，Vue会将该标签与“MainLayout”组件实例进行关联。

在Vue中，默认情况下组件的名称不区分大小写。因此，可以在模板中同时使用或等类似的标签来引用组件实例。

当你在模板中使用了标签后，如果你想将该标签与“MainLayout”组件实例关联起来，你需要确保在该组件的脚本中将其注册为全局或局部组件，例如：

<template><main-layout><!-- 组件内容 --></main-layout>
</template><script>
import MainLayout from "@/MainLayout.vue";export default {components: {MainLayout}
};
</script>

在上述例子中，我们将“MainLayout”组件注册为当前Vue实例的局部组件。这使得我们可以在同一个实例中使用标签来引用该组件，并且当该标签被解析时，Vue会自动创建并显示“MainLayout”组件实例的内容。

在Vue中，当你在模板中使用了某个自定义标签（例如），Vue会自动进行组件的匹配并实例化相应的组件。

Vue会通过以下几个步骤来查找和匹配组件：

首先，Vue会在当前组件的局部注册中查找是否有名为MainLayout的组件。
如果当前组件的局部注册中没有找到，则Vue会在全局注册中查找是否有名为MainLayout的组件。
如果在全局注册中也没有找到，则Vue将抛出一个警告，并且该自定义标签将被视为普通的HTML元素。
如果你在模板中使用了标签，但没有找到与之匹配的组件，通常会出现以下两种情况：

忘记在组件的脚本中将MainLayout组件进行注册。你可以通过在组件的components选项中将其注册为本地组件实现，如前面示例代码所示。
引入了MainLayout组件的文件路径不正确。请确保你使用了正确的文件路径来引入MainLayout组件。
另外，确保在标签的父组件中已经正确引入了MainLayout组件并进行了注册。只有在组件的模板中使用相应的自定义标签时，Vue才会将其与对应的组件实例进行关联并渲染。

🍁clearInterval函数的使用

在 Vue 中，你可以使用 clearInterval 函数来清除使用 setInterval 函数创建的定时器。具体步骤如下：

在 Vue 组件的 data 属性中定义一个变量来保存定时器的 ID，例如 timerId: null。
在需要调用 setInterval 创建定时器的地方，将返回的定时器 ID 赋值给 timerId 变量：this.timerId = setInterval(yourFunction, delay)
在需要清除定时器的地方，使用 clearInterval 函数来清除定时器：clearInterval(this.timerId)

🌿定时器的作用

定时器可以让我们在代码中设置一个时间间隔，以便在该时间间隔过后执行一些特定的操作或调用一个特定的函数，是一种常用的编程工具之一。

在实际开发中，定时器被广泛应用于各种场景，比如：

📒定时轮询：可以使用定时器定期向服务器请求最新数据。
📒周期性任务：可以使用定时器周期性地执行某些任务，例如在后台定期检查并清理过期的缓存。
📒动画效果：可以使用定时器来实现页面中的动画效果，例如淡入淡出效果。
📒延迟加载：可以使用定时器在页面加载完毕之后一段时间再去加载某些资源，以避免页面加载时的瞬间卡顿。

🍁localStorage的使用

在 Vue.js 中使用 localStorage 是一种常见的方法，用于在浏览器中存储和获取数据。localStorage 是浏览器提供的一种持久化存储机制，可以将数据存储在客户端，即使用户关闭了浏览器，数据仍然可以保留。

以下是在 Vue.js 中使用 localStorage 的基本步骤：

🌿设置数据

在 Vue 组件中，可以使用 localStorage.setItem(key, value) 方法将数据存储到 localStorage 中。例如：

localStorage.setItem(‘username’, ‘John’);
这样就将 ‘John’ 存储到了名为 ‘username’ 的 localStorage 键中。

🌿获取数据

可以使用 localStorage.getItem(key) 方法从 localStorage 中获取存储的数据。例如：

var username = localStorage.getItem(‘username’);
console.log(username); // 输出 ‘John’
这样就可以从名为 ‘username’ 的 localStorage 键中获取存储的值。

🌿更新数据

如果需要更新 localStorage 中的数据，只需重新使用 localStorage.setItem(key, value) 方法进行设置。例如：

localStorage.setItem(‘username’, ‘Jane’);
这样就将名为 ‘username’ 的 localStorage 键的值更新为 ‘Jane’。

🌿删除数据

如果需要从 localStorage 中删除某个键值对，可以使用 localStorage.removeItem(key) 方法。例如：

localStorage.removeItem(‘username’);
这样就会从 localStorage 中删除名为 ‘username’ 的键值对。

需要注意的是，localStorage 只能存储字符串类型的数据。如果需要存储其他类型的数据，可以使用 JSON.stringify() 将数据转换为字符串进行存储，使用 JSON.parse() 将字符串转换为相应的数据类型进行获取。

🍁VUE国际化配置

在Vue项目中，国际化（i18n）是一种常见的需求，用于实现多语言支持。$t(’’) 是Vue的内置方法，用于在模板、组件和其他Vue实例中进行国际化文本的翻译。

使用$t(’’)的意思是根据提供的键值，从当前的国际化消息源中获取对应的翻译文本。通常，国际化翻译文本会保存在一个特定格式的消息源文件（如JSON或JavaScript对象）中，每个键值对应一条需要翻译的文本。

以下是$t(’’)的基本用法：

在Vue组件中使用 $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots方法：在模板中，可以使用{{$ t(‘键名’)}}的形式，通过$t()方法获取对应键名的翻译文本。例如：

<template><div><p>{{$t('greeting')}}</p></div>
</template><script>
export default {mounted() {console.log(this.$t('greeting'));}
}
</script>

在JavaScript代码中使用 $t (^{''}) 方法：除了在模板中使用$ t(’’)，还可以在Vue实例的JavaScript代码中直接调用this.$t(’’)来获取翻译文本。例如：

export default {mounted() {console.log(this.$t('greeting'));}
}

需要在Vue项目中配置国际化，你需要：

安装和配置 Vue I18n 插件。可以通过命令行或者npm进行安装，然后在Vue项目中进行配置。
创建相应的国际化消息源文件，其中包括各种语言对应的键值对翻译文本。
在Vue组件中使用$t(’’)方法，来获取国际化翻译文本。

🍁项目启动main.js调用情况

在Vue项目启动时，main.js 文件是通过前端页面（HTML文件）来引用的。main.js 文件包含了Vue应用的入口代码，负责初始化Vue实例、加载组件、配置插件等操作。

通常，我们在前端页面的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue App</title>
</head>
<body><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="./main.js"></script>
</body>
</html>

在上述示例中，我们在

当浏览器加载这个前端页面时，它会按照

🍁main.js和app.vue调用关系

在Vue项目启动时，main.js 和 App.vue 之间的调用关系如下：

main.js 是Vue应用的主入口文件，它包含了Vue实例的创建和配置。

在 main.js 文件中，我们会引入 Vue 库，并创建一个新的 Vue 实例。

import Vue from 'vue';
import App from './App.vue';new Vue({render: h => h(App)
}).$mount('#app');

在上述代码中，我们通过 new Vue() 创建了一个 Vue 实例，并通过 render 选项指定要渲染的根组件是 App.vue。最后，使用 $mount() 方法将Vue实例挂载到页面中指定id为 “app” 的元素上。

App.vue 是根组件，也就是Vue应用的顶级组件。

<template><div><!-- 其他组件及页面内容 --></div>
</template>

在 App.vue 中，我们可以定义其他的组件，编写页面内容、布局和样式等。根据实际需求，App.vue 可以包含多个子组件，并通过或其他方式来渲染不同的页面。

未完待续。。。

🏫博客主页：魔王-T

🥝大鹏一日同风起扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️