VUE项目中问题学习总结（一）
文章目录
-
- 自定义组件使用
- 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: …方法： 在模板中，可以使用{{t(‘键名’)}}的形式，通过$t()方法获取对应键名的翻译文本。例如：
<template>
<div>
<p>{{$t('greeting')}}</p>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$t('greeting'));
}
}
</script>
在JavaScript代码中使用 t ( ′ ′ ) 方 法 ： 除 了 在 模 板 中 使 用 t('')方法： 除了在模板中使用 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 Apptitle>
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
大鹏一日同风起 扶摇直上九万里
❤️感谢大家点赞收藏⭐评论✍️