【博主推荐】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（防止抄袭，原文地址不可删除）