【Vue3】知识汇总，附详细定义和源码详解，后续出微信小程序项目（1）

最新推荐文章于 2025-12-29 16:25:21 发布

原创最新推荐文章于 2025-12-29 16:25:21 发布 · 1.2k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

Vue3 专栏收录该内容

10 篇文章

订阅专栏

====================
快速跳转：
我的个人博客主页👉：Reuuse博客
HCIA网络专栏👉：网络专栏
❀ 感谢支持！☀
==================

前情提要

🔺因为最近学习的vue语言，发现有很多细节的碎块需要汇总，所以就有了本次系列的开始。❀❀❀
⭐总结的知识会包含总结定义，和源代码解析，可以当作类似于英语单词一样瞄几眼，大概知道即可
那么话不多说我们开始吧 在这里插入图片描述

@import导入css样式及scss变量用法与static目录

@import “@/…/…/”

在Web开发中，使用CSS和SCSS可以有效地管理和维护样式。以下是关于如何导入CSS样式、使用SCSS变量以及处理静态目录的详细解释：

CSS 样式导入

外部CSS文件
你可以通过<link>标签将外部CSS文件导入到HTML文档中。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <!-- Your content here -->
</body>
</html>

在这个例子中，styles/main.css是相对于HTML文件所在位置的路径。

内部CSS
你也可以在HTML文档的<style>标签内直接编写CSS样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

SCSS 变量用法

SCSS（Sassy CSS）是一种CSS预处理器，它允许你使用变量、嵌套规则、混合宏等高级功能来简化CSS代码。首先，你需要安装Sass编译器，然后你可以创建一个.scss文件并使用变量。

安装Sass
如果你使用的是npm，可以通过以下命令安装Sass：

npm install -g sass

创建和使用SCSS变量
创建一个名为styles.scss的文件，并在其中定义和使用变量：

// styles.scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

编译SCSS文件为CSS文件：

sass styles.scss styles.css

然后在HTML文件中引入生成的CSS文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

在Web项目中，通常会有一个static目录用于存放静态资源，如CSS、JavaScript、图片等。这些资源可以直接通过URL访问。

项目结构示例

my_project/
│
├── static/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── scripts.js
│   └── images/
│       └── logo.png
│
├── templates/
│   └── index.html
│
└── styles.scss

在HTML中引用静态资源
假设你的HTML文件位于templates目录下，你可以这样引用静态资源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
    <h1>Hello World</h1>
    < img src="../static/images/logo.png" alt="Logo">
    <script src="../static/js/scripts.js"></script>
</body>
</html>

总结

CSS样式导入：通过<link>标签或<style>标签导入外部或内部CSS。
SCSS变量用法：使用Sass预处理器定义和使用变量，并通过编译生成CSS文件。
Static目录：将静态资源放在static目录下，并通过相对路径引用它们。

class类和style内联式绑定

它有对象语法、数组语法和字符串语法。

对象语法是根据表达式的真值动态切换类，比如：
<div :class="{ active: isActive, 'text-danger': hasError }"></div>；
数组语法能根据数组中的值动态应用多个类
<div :class="[activeClass, errorClass]"></div>
字符串语法是直接将静态类名绑定
<div class="static-class" :class="dynamicClass"></div>

计算属性也能用于 Class 绑定哦，能让逻辑更集中和可维护。

源码展示：

<template>
	<view>
		<image :src="picur1" mode="aspectFill"></image>
		<button type="primary" loading>按钮</button>
	</view>
	
	<view class = "box" :class="{active:isActive}">
		v-bind指令
	</view>
	
	<!-- <view class = "box" :class="isActive?'active':''"></view> -->
	
	<!-- style是写死的，加了 ： 相当于是动态绑定，可以切换样式 -->
	<view class = "box" :style="{width:'300px',height:260+'px',fontSize:size+'px' }">内联样式</view>
</template>



<script setup>
import {ref} from "vue";
const isActive = ref(true);
const size = ref(30);

const arrs = ref([
	"../../static/6.png",
	"../../static/7.jpg",
	"../../static/8.png",
	"../../static/9.jpg"
])
const picur1 = ref("../../static/6.png")

let i = 0;
setInterval(()=>{
	i++;
	//size.value += i%5;
	picur1.value = arrs.value[i%4]
	isActive.value = !isActive.value;
},1000)

</script>




<style lang = "scss">
.box{
	width:200px;
	height:200px;
	background: orange;
	font-size: 20px;
}
.active{
	background: green;
	color: #fff;
}
</style>

computed计算树形用法及方法对比

Computed 属性是Vue.js中一个非常强大的特性，它允许你在模板中声明式地定义计算逻辑。这个特性可以帮助你创建更高效、更可维护的代码。

1. 基础用法

Computed 属性是基于它们的依赖进行缓存的，只有在它们的相关依赖发生改变时才会重新求值。这就意味着，如果你有一个复杂的计算过程，你可以将其放入 computed 属性中，以提高性能。例如，假设你有两个数据属性 a 和 b，你想在模板中显示它们的和，你可以这样做：

new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  }
});

在这个例子中，我们创建了一个名为 sum 的 computed 属性，它依赖于 a 和 b。当 a 或 b 发生变化时，sum 的值会自动更新。

2. 与 methods 的对比

虽然你也可以使用 methods 来实现类似的功能，但是 computed 属性比 methods 更高效。这是因为 computed 属性是基于它们的依赖进行缓存的，而 methods 每次调用都会重新执行函数。例如：

methods: {
  sum() {
    return this.a + this.b;
  }
}

在这个例子中，每次你调用 this.sum() 时，都会重新执行函数。如果你在一个循环中使用这个方法，那么每次迭代都会重新计算一次，这可能会导致性能问题。

3. 计算属性的缓存机制

Computed 属性是基于它们的依赖进行缓存的。这意味着，如果一个 computed 属性依赖于多个数据属性，只有当这些数据属性发生变化时，computed 属性才会重新计算。例如：

data: {
  a: 1,
  b: 2,
  c: 3
},
computed: {
  sum() {
    return this.a + this.b + this.c;
  }
}

在这个例子中，sum 依赖于 a、b 和 c。只有当这三个数据属性中的任何一个发生变化时，sum 才会重新计算。

总的来说，computed 属性是 Vue.js 中一个非常有用的工具，它可以帮助你创建更高效、更可维护的代码。通过理解和正确使用 computed 属性，你可以大大提高你的应用程序的性能和可读性。

🌼那么今天就到这里吧！
▲这次的知识汇总框架只是一次尝试，后续会陆续跟新vue系列。再后来会逐渐成熟，向大家展现更简洁明了的知识汇总！

一个小小的赞是对我最大的鼓励！
感谢你们看到这里，下次见~
在这里插入图片描述