- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

VUE开发常用技术点收集

xcLeigh 发表于 2024/11/20 12:28:19 2024/11/20

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

@TOC

【博主推荐】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>和Composition API：

<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.在<script setup>中直接引用（需要确保JavaScript模块可用）：

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

2.在<script>中引用并在onMounted生命周期钩子中使用：

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>