04vue3基础 - 技术栈

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 设置文档字符编码为 UTF-8，支持中文显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配设置 -->
    <title>Document</title> <!-- 页面标题，可以修改为实际项目名称 -->
</head>
<body>
    <!-- Vue 应用的挂载点容器 -->
    <div id="app">
        <!-- 
            @click 是 Vue 的事件绑定指令，等同于 v-on:click
            当按钮被点击时，会调用 clickCount 函数
            {{count}} 是模板插值语法，显示 count 的当前值
        -->
        <button @click="clickCount">{{count}}</button>
    </div>

    <!-- type="module" 表示使用 ES 模块方式导入 -->
    <script type="module">
        // 从 Vue 的 ESM 构建版本中导入所需的 API
        import {
            createApp,  // 创建 Vue 应用实例的函数
            ref,        // 创建响应式数据的函数
        } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

        // 创建 Vue 应用实例
        createApp({
            // setup 是组合式 API 的入口函数，在组件创建前执行
            setup(){ 
                // 使用 ref 创建响应式数据 count，初始值为 0
                // 虽然这里用了 let，但通常 ref 变量推荐使用 const
                // ref 返回一个带有 .value 属性的对象
                let count = ref(0);
                
                // 定义一个函数 clickCount，用于处理点击事件
                // 这个函数没有参数，每次调用时让 count 的值增加 1
                let clickCount = () => count.value++;
                
                // setup 函数必须返回一个对象
                // 返回的属性可以在模板中直接使用
                return{
                    count,        // 暴露 count 给模板，模板中的 {{count}} 可以访问
                    clickCount,   // 暴露 clickCount 给模板，@click 可以调用
                };
            },
        }).mount("#app") // 将应用挂载到 id 为 "app" 的 DOM 元素上
    </script>
</body>
</html>

3.vue3变量类型

Vue 3 中的变量类型

在 Vue 3 中，JavaScript 本身的变量类型分为两大类，同时 Vue 3 在 JavaScript 类型基础上增加了响应式类型的概念。

JavaScript 基础类型（与 Vue 无关）

1. 原始类型（Primitive Types）

类型	示例	说明
string	`"hello"`, `'world'`, `模板字符串`	字符串类型
number	`42`, `3.14`, `NaN`, `Infinity`	数字类型（整数和浮点数）
boolean	`true`, `false`	布尔值
undefined	`undefined`	未定义的值
null	`null`	空值
symbol	`Symbol('id')`	唯一标识符（ES6+）
bigint	`9007199254740991n`	大整数（ES2020+）

2. 引用类型（Reference Types）

类型	示例	说明
object	`{ name: 'Vue' }`	普通对象
array	`[1, 2, 3]`	数组
function	`function() {}` 或 `() => {}`	函数
Date	`new Date()`	日期对象
RegExp	`/\d+/`	正则表达式
Map/Set	`new Map()`, `new Set()`	ES6 集合类型

二、Vue 3 特有的响应式类型

Vue 3 提供了几种特殊的响应式 API，用于创建具有响应式能力的数据：

响应式 API	适用场景	示例	特点
ref()	基本类型 + 对象	`const count = ref(0)`	包装任意值，通过 `.value` 访问，模板中自动解包
reactive()	对象/数组	`const state = reactive({ count: 0 })`	直接访问属性，无需 `.value`
computed()	计算属性	`const double = computed(() => count.value * 2)`	基于其他响应式数据派生新值

二、最常用的 pnpm 命令（对标 npm）

如果你已经熟悉 npm，那么 pnpm 的命令几乎可以直接迁移：

操作	npm 命令	pnpm 命令	说明
安装所有依赖	`npm install`	`pnpm install` 或 `pnpm i`	根据 package.json 安装
安装特定包	`npm install axios`	`pnpm add axios`	添加到 dependencies
安装开发依赖	`npm install -D vite`	`pnpm add -D vite`	添加到 devDependencies
全局安装	`npm install -g pnpm`	`pnpm add -g vite`	安装全局工具
卸载包	`npm uninstall axios`	`pnpm remove axios`	从项目中移除
更新包	`npm update axios`	`pnpm update axios`	更新到最新版本
运行脚本	`npm run dev`	`pnpm run dev` 或 `pnpm dev`	执行 package.json 中的脚本

javascript 复制代码

<template>
  <!-- ✅ Vue 3 支持多个并列的根元素 -->
  <div class="header">头部内容</div>
  <div class="main">主要内容</div>
  <div class="footer">底部内容</div>
</template>

javascript 复制代码

<script setup>
  const yanyu = "烟雨江南";
</script>

<template>
  <div class="font-color">
    {{yanyu}}
  </div>
</template>

<style scoped>
  .font-color{
    color: #aa3bff;
  }
</style>

javascript 复制代码

<!-- 
  Vue 3 单文件组件 (SFC)
  使用 <script setup> 语法糖，让代码更简洁
-->

<script setup>
  // 定义一个常量 yanyu，存储一个包含 HTML 标签的字符串
  // 注意：这不是 Vue 模板，而是纯 HTML 字符串
  // span 标签设置了背景色为 burlywood（实木色）
  const yanyu = "<span style='background-color:burlywood;'>烟雨江南</span>";
</script>

<!-- 模板部分：定义组件的 HTML 结构 -->
<template>
  <!-- 
    v-html 是 Vue 的指令，用于输出原始 HTML
    普通文本插值 {{ yanyu }} 会输出转义后的字符串：
      "&lt;span style='background-color:burlywood;'&gt;烟雨江南&lt;/span&gt;"
    
    v-html="yanyu" 会直接将字符串作为 HTML 解析，渲染出带有背景色的 span 元素
    
    注意：使用 v-html 存在 XSS 安全风险，只用于可信内容！
  -->
  <div v-html="yanyu"></div>
</template>

<!-- 
  scoped 属性让样式只作用于当前组件
  自动添加唯一属性选择器，避免样式污染
-->
<style scoped>
  /* 定义 .font-color 类，设置文字颜色为紫色 */
  .font-color{
    color: #aa3bff;
  }
  /* 
    注意：这个样式当前没有用到，因为模板中的 div 没有使用这个类名
    如果要应用这个样式，需要写：<div class="font-color" v-html="yanyu"></div>
  */
</style>

动态 attribute (v-bind)

使用 v-bind 指令动态绑定属性值，可以简写为冒号 :：

vue

复制下载

javascript 复制代码

<template>
  <!-- 完整写法 -->
  <img v-bind:src="imageSrc" v-bind:alt="imageAlt">
  
  <!-- 简写形式 -->
  <img :src="imageSrc" :alt="imageAlt">
  
  <!-- 动态属性名 (Vue 3.2+) -->
  <button :[dynamicAttr]="value">按钮</button>
</template>

<script setup>
import { ref } from 'vue'

const imageSrc = ref('/path/to/image.jpg')
const imageAlt = ref('图片描述')
const dynamicAttr = ref('title')
const value = ref('动态属性名示例')
</script>

布尔绑定