【博主推荐】VUE开发常用技术点收集

文章目录

1.系统主题的全局颜色变量申明和使用
2.样式里面导入样式
3.页面返回顶部功能
4.页面实时更新时间功能
5.页面条件判断的几种方式
6.页面v-for使用
7.页面路由跳转的几种方式
8.vue3 js引用的几种方式
9.Vue中引用和使用一个组件
10.页面传参的几种方式
VUE系列前端模板源码
其他源码资源分享

【博主推荐】VUE开发常用技术点收集，里面包含了，在VUE开发过程中，遇到的有价值的技术点，都收藏在这篇文章里面了，可以让你快速掌握并运用。如系统主题的全局颜色变量申明和使用；样式里面导入样式；页面返回顶部功能；页面时间功能；页面条件判断的几种方式；页面v-for使用；页面路由跳转的几种方式；vue3 js引用的几种方式；Vue中引用和使用一个组件；页面传参的几种方式

1.系统主题的全局颜色变量申明和使用

第一步：现在主样式表里添加以下代码：main.css文件

:root {--primary-color: #3498db;--secondary-color: #e74c3c;--tertiary-color: #9b59b6;
}

第二步：VUE文件使用全局颜色

<template><view><text class="primary-button">Primary Button</text><text class="secondary-button">Secondary Button</text><text class="tertiary-button">Tertiary Button</text></view>
</template><style>
.primary-button {background-color: var(--primary-color);color: white;
}.secondary-button {background-color: var(--secondary-color);color: white;
}.tertiary-button {background-color: var(--tertiary-color);color: white;
}
</style>

看完这两步，你就知道咋样申明和调用全局样式了

2.样式里面导入样式

样式里面导入样式，代码如下

@import './base.css';html,body,#app {font-family: 华文中宋;width: 100%;height: 100%;margin: 0px;padding: 0px;--swiper-theme-color: #5AA488;--swiper-navigation-color: #5AA488;--swiper-pagination-color: #5AA488;--swiper-pagination-bullet-inactive-color:white;
}

3.页面返回顶部功能

在Vue 3和TypeScript中实现返回顶部的功能，可以创建一个组件，使用window.scrollTo函数来滚动到页面顶部。以下是一个简单的例子：

<template><button @click="scrollToTop">回到顶部</button>
</template><script setup lang="ts">
const scrollToTop = () => {window.scrollTo({top: 0,left: 0,behavior: 'smooth'});
};
</script>

在这个例子中，我们定义了一个名为scrollToTop的函数，当按钮被点击时，这个函数会被调用，并且页面会平滑滚动到顶部。

4.页面实时更新时间功能

在Vue 3和TypeScript中创建一个页面级的时间组件可以通过以下步骤实现：

1.创建一个新的Vue组件。
2.使用ref来创建一个响应式的时间变量。
3.使用onMounted生命周期钩子来在组件挂载时设置初始时间。
4.使用setInterval每秒更新时间。
5.在onUnmounted生命周期钩子中清除定时器，避免内存泄露。

代码如下：

<template><div>{{ currentTime }}</div>
</template><script setup lang="ts">
import {  ref, onMounted, onUnmounted } from 'vue';const currentTime = ref(new Date().toLocaleTimeString());let intervalId: number | null = null;const updateTime = () => {currentTime.value = new Date().toLocaleTimeString();};onMounted(() => {intervalId = window.setInterval(updateTime, 1000);});onUnmounted(() => {if (intervalId) {window.clearInterval(intervalId);}});return {currentTime,};
</script>

5.页面条件判断的几种方式

第一种当条件满足时候，显示内容1，否则显示内容2

<view v-if="$route.path!== '/login' && $route.path!== '/register'">
内容1
</view>
<view v-else>内容2</view>

第二种当条件满足时候，使用class为t1，否则使用class为t2

<script setup lang="ts">
import { computed } from 'vue';const condition = true; // 你的条件变量const computedClass = computed(() => {return condition ? 't1' : 't2';
});
</script>
<template><view :class="computedClass">我是xcLeigh</view>
</template>
<style scoped>
.t1{ color:red; }
.t2{ color:blue; }
</style>

6.页面v-for使用

在Vue 3中，v-for指令用于基于源数据多次渲染元素。它需要一个特定的语法，即item in items，其中items是源数据数组，而item是数组中当前元素的别名。

以下是一个简单的例子，展示如何在Vue 3组件中使用v-for：

<template><div><!-- 使用v-for循环渲染items数组中的每一个元素 --><div v-for="(item, index) in items" :key="index">{{ item }}</div></div>
</template>
<script>
import { ref } from 'vue';export default {setup() {// 使用ref创建响应式的数组const items = ref(['xcLeigh1', 'xcLeigh2', 'xcLeigh3']);// 返回响应式引用，以便在模板中使用return {items};}
};
</script>

在这个例子中，items是一个响应式的数组，包含了我们想要渲染的所有项。v-for指令遍历items数组，并为数组中的每个元素创建一个新的div元素。:key属性是必需的，它为每个项提供了一个唯一的键值，这有助于Vue跟踪每个节点的身份，在动态更新时提升性能。

7.页面路由跳转的几种方式

1.使用router-link组件创建链接：

<router-link to="/about">About</router-link>

2.使用router-link组件创建链接：


// 字符串
this.$router.push('home')// 对象
this.$router.push({ path: 'home' })// 带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

3.使用router.replace（无历史记录）：

this.$router.replace({ path: '/about' })

4.使用router.replace（无历史记录）：

// 前进一步
this.$router.go(1)// 后退一步
this.$router.go(-1)

5.使用Vue Router的useRouter和useRoute来访问路由和路由参数：


import { useRouter } from 'vue-router'setup() {const router = useRouter()function goToAbout() {router.push('/about')}return { goToAbout }
}

6.使用

<script setup>
import { useRouter } from 'vue-router'const router = useRouter()function goToHome() {router.push('/home')
}
</script><template><button @click="goToHome">xcLeigh</button>
</template>

8.vue3 js引用的几种方式

1.在

import moduleName from './path/to/your/module.js';// 在这里使用moduleName的函数、变量等

2.在

import { onMounted } from 'vue';
import moduleName from './path/to/your/module.js';export default {setup() {onMounted(() => {// 使用moduleName的函数、变量等});}
};

3.在模板中使用ref引用DOM元素并调用JavaScript函数：

<template><div ref="myDiv">这是一个DIV</div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const myDiv = ref(null);onMounted(() => {// 调用JavaScript函数doSomething(myDiv.value);});return { myDiv };}
};
</script>

确保JavaScript文件是模块化的，这样才能在Vue组件中按需引用。如果是非模块化的脚本，可能需要考虑其他方法，例如使用全局变量或者在Vue的 script 标签中直接引入脚本。

9.Vue中引用和使用一个组件

在Vue 3中，组件的引用方式与Vue 2略有不同。在Vue 3中，可以使用setup函数内的ref来创建响应式引用，或者直接在 script setup 标签中引用组件。

以下是一个简单的例子，展示如何在Vue 3中引用和使用一个组件：

1.创建一个组件 MyComponent.vue:

<template><div>这是一个组件</div>
</template><script>
export default {// 可以定义组件的逻辑
}
</script>

2.在另一个组件中引用并使用这个组件:

<template><div><MyComponent /></div>
</template><script>
import { defineComponent } from 'vue';
import MyComponent from './MyComponent.vue';export default defineComponent({components: {MyComponent}
});
</script>

或者使用 script setup 标签：

<template><div><MyComponent /></div>
</template><script setup>
import MyComponent from './MyComponent.vue';
</script>

在 script setup 标签中，你可以直接导入组件并在模板中使用，无需显式注册组件。这是Vue 3中推荐的简写方式，可以让代码更加简洁和直观。

10.页面传参的几种方式

在Vue 3中，传递参数可以通过多种方式实现，以下是几种常见的方式：

使用props传递数据到子组件。
使用$emit触发事件并传递参数。
使用v-bind动态绑定属性。
使用provide和inject实现依赖注入。

1.使用props传递数据到子组件：
父组件代码：

<template><ChildComponent :message="parentMessage" />
</template><script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},setup() {const parentMessage = ref('Hello from parent');return {parentMessage};}
};
</script>

子组件代码：

<template><div>{{ message }}</div>
</template><script>
export default {props: {message: String}
};
</script>

2.使用$emit触发事件并传递参数：
子组件代码：

<template><button @click="sendMessage">Send Message</button>
</template><script>
export default {props: {message: String},methods: {sendMessage() {this.$emit('message-sent', this.message);}}
};
</script>

父组件代码：

<template><ChildComponent :message="parentMessage" @message-sent="handleMessage" />
</template><script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},setup() {const parentMessage = ref('Hello from parent');const handleMessage = (receivedMessage) => {console.log(receivedMessage);};return {parentMessage,handleMessage};}
};
</script>

3.使用v-bind动态绑定属性：
子组件代码：

<template><div>{{ dynamicProp }}</div>
</template><script>
export default {props: {dynamicProp: String}
};
</script>

父组件代码：

<template><DynamicPropComponent :dynamicProp="dynamicValue" />
</template><script>
import { ref } from 'vue';
import DynamicPropComponent from './DynamicPropComponent.vue';export default {components: {DynamicPropComponent},setup() {const dynamicValue = ref('Dynamic value');return {dynamicValue};}
};
</script>

4.使用provide和inject实现依赖注入：
父组件代码：

<template><ChildComponent />
</template><script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},setup() {provide('message', 'Hello from parent');}
};
</script>

子组件代码：

<template><div>{{ message }}</div>
</template><script>
import { inject } from 'vue';export default {setup() {const message = inject('message');return {message};}
};
</script>

更多VUE知识点讲解和源码，见下面的专栏 VUE系列前端模板源码，里面收集了很多VUE常见的知识点和经常遇到的问题解决方案，还有更多的各行各业的源码，专栏持续更新中，快去收藏吧！！！

VUE系列前端模板源码

本文章是分类专栏下的【VUE实战案例】篇，内置VUE相关的实战案列文章，每篇实战案例都附带源码，涉及各行各业的网站模板，为大作业毕业设计打造，持续更新中，欢迎大家关注，一起学习交流。

✂ 点击快速进入专栏
在这里插入图片描述

--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

--------------- 行成于思，毁于随 ---------------

其他源码资源分享

🧡🧡🧡🧡🤍 【百篇源码模板】html5各行各业官网模板源码下载（1）

🧡🧡🧡🧡🤍 【模板源码】html实现酷炫美观的可视化大屏(十种风格示例，附源码)

🧡🧡🧡🤍🤍 【VUE系列】VUE3实现个人网站模板源码

🧡🧡🧡🤍🤍 【HTML源码】HTML5小游戏源码

🧡🧡🧡🧡🤍 【博主推荐】JAVA SSM框架的后台管理系统（附源码）

🧡🧡🧡🧡🤍 【博主推荐】SpringBoot API接口对数据库增删改查,路由,TOKEN,WebSocket完整版(附源码)

🧡🧡🧡🧡🤍 【博主推荐】HTML制作一个美观的个人简介网页（附源码）

🧡🧡🧡🧡🤍 【博主推荐】html好看的个人简历网页版(附源码)

🧡🧡🧡🧡🤍 【博主推荐】html好看的个人主页(附源码)

🧡🧡🧡🧡🤍 【博主推荐】html好看的邀请函(附源码)

🧡🧡🧡🧡🤍 【博主推荐】html好看的音乐播放器(附源码)

🧡🧡🧡🧡🤍 【博主推荐】html好看的拼图小游戏(附源码)

🧡🧡🧡🧡🧡 【博主推荐】html界面绘制SVG图形(附源码)

🧡🧡🧡🧡🤍 【博主推荐】html操作SVG图(附源码)

🧡🧡🧡🧡🤍 【博主推荐】html下拉框树形（附好看的登录界面）

🧡🧡🧡🧡🤍 【博主推荐】HTML5响应式手机WEB(附源码)

🧡🧡🧡🧡🤍 【博主推荐】大数据可视化大屏(源码下载)

🧡🧡🧡🧡🧡 【博主推荐】html引用百度地图定位闪烁弹框树形(附源码)

🧡🧡🧡🧡🤍 【博主推荐】HTML酷炫动画表白求爱界面(附源码)

请添加图片描述

💞 关注博主带你实现畅游前后端

🏰 大屏可视化带你体验酷炫大屏

💯 神秘个人简介带你体验不一样得介绍

🎀 酷炫邀请函带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有） ，https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/143364015（防止抄袭，原文地址不可删除）