文章摘要： Vue 是一款用于构建用户界面的 JavaScript 框架，偏向组合式API的总结。

前置依赖：操作系统、node.js、npm

简介

  • 渐进式的JavaScript框架。
  • 基于标准 HTML、CSS 和 JavaScript 构建。
  • 提供了一套声明式的、组件化的编程模型。
  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
  • Vue 的单文件组件 （即 *.vue 文件）是一种特殊的文件格式，将Vue组件的模块、逻辑和样式封装在单个文件中。

适用场景

  • 无需构建步骤，渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

项目搭建

  • 请看Vue官方文档，此处只总结使用规范和项目总结。

  1. 安装nodejs、npm

  2. 创建vue项目

# vue脚手架命令行工具
# 网络获取项目模板
npm create vue@latest

# 切换到项目目录下
cd <project>

# 安装依赖，下载下来的项目并不包含依赖扩展，需要根据配置文件中的信息下载所需依赖扩展
npm install
  1. 运行vue项目
# 运行项目
npm run dev
  1. 打包部署
npm run build

API 风格

选项式 API（Options API）

案例展示

组合式 API (Composition API)

案例展示

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合式 API 案例</title>
</head>

<body>
    <div id="app">
        <p>数字：{{count}}</p>
        <p><button v-on:click="count++">点击</button></p>
    </div>

</body>

<!--设置script标签的type属性为module-->
<script type="module">
    /*导入所需的文件*/
    import {createApp, ref} from "./vue.esm-browser.js"

    /* 根组件，createApp本质是一个组件 */
    createApp( {
        // 设置响应式数据和方法等
        setup() {
            /*定义数据*/
            const count= ref(0)

            /*返回数据*/
            return {
                count,  // 返回数值
            }
        }
    }).mount("#app")  // 挂载实例
</script>

</html>

创建vue实例

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

单文件组件格式

  • 使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。
  • 单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

单组件相关

表达式

插值表达式

  • {{ }}：里面允许“数值”和“表达式”，不能是“编程语句”。
  • 定义、判断、转换

响应式数据（引用类型数据）

  • 响应式数据，代表Vue能做到实时数据监听和更新。
  • ref(<数据>)：定义“浅层”的响应式对象数据。
  • reactive(<数据>)：定义“深层”的响应式对象数据。
  • toRef(<响应式对象数据>, <对象中的某个变量名>)：赋值给一个新变量名，同时保持响应数据同步。

计算属性（计算得到结果并保持）

  • computed()：该方法提供计算，缓存计算结果，带有响应式数据追踪。

侦听器（数据变化）

  • 侦听一个或多个响应式数据源。
  • watch()：在数据源变化时才会执行回调函数。
  • watchEffect()：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

指令（内置方法）

  • Vue特有且针对HTML渲染行为的预定义属性。
  • v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-once、v-memo、v-cloak

v-on的事件修饰符

  • 点击事件修饰符：stop、prevent、self、capture、once、passive、keyup单击、keydown按下
  • 鼠标按键修饰符：left、right、middle
  • 按键修饰符：space空格、enter回车、tabTab、shift上档、ctrl、alt、<小写的26个字母>
  • 输入框修饰符：lazy、number、trin

案例

<!--提示：写在HTML的标签中，作为属性存在-->
<!--按键监听-->
v-on:<参数>.<值> = "<执行内容>"
v-on:<参数>.<值>.<值> = "<执行内容>"
v-on:<参数>.<值>.<值>.<值> = "<执行内容>"
<button v-on:keyup.enter="<执行方法>">按钮</button>

静态资源

图片引用、样式绑定、外部样式表、sass、bootstrap、tailwindCss、动态样式

多组件相关

引用与注册

全局注册

import user from './user.vue'

app.component('user', user)

局部注册

<script setup>
    import user from './user.vue'
</script>

<template>
  <user></user>
</template>

传递数据

父传子（浅层）

  • defineProps()
  • 定义数据：变量名: {type: <数据类型>, required: <是否必须>, default: <默认值>}
defineProps({
    变量名: {
        type: <数据类型>, 
        required: <是否必须>, 
        default: <默认值>
    },
});

子传父（浅层）

  • defineEmits()
  • 定义数据
const emits = defineEmits(["<变量名>"]);

// 为变量赋值
emits("<变量名>", <数据>);

依赖注入（深层父传子）

  • 定义全局变量且不允许子级修改。
  • 只允许“父级”向“子级”方向传值或更新值。
import {provide inject} from 'vue';

// 父级定义
provide("<变量>", 数据);

// 子级使用
const data = inject("<变量>");

状态管理（深层子传父）

  • 当多个组件没有关系，但使用共同的变量数据，且需要修改共同的变量数据。
  • ==待完善==

插槽（小功能）

  • 在当前组件的html位置预留HTML空位的行为，在被第三方引入时插入具体内容。

单一插槽

  • <slot></slot>：仅预留一个插槽位置
  • 具体使用时，直接传入内容即可。

具名插槽

  • <slot name=名称></slot>：为插槽指定一个name属性。
  • 具体使用时需要写在<template #插槽名称></template>中，并设置#<插槽名>。

条件插槽

  • 具体实现类似，用于相同的元素循环生成，并提供外部传入元素。

生命周期（监听器）

  • 监听组件一系列时间段时的方法。
  • onMounted()：注册一个回调函数，在组件挂载完成后执行。
  • onUpdated()：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
  • onUnmounted()：注册一个回调函数，在组件实例被卸载之后调用。
  • onBeforeMount()：注册一个钩子，在组件被挂载之前被调用。
  • onBeforeUpdate()：注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
  • onBeforeUnmount()：注册一个钩子，在组件实例被卸载之前调用。
  • onErrorCaptured()：注册一个钩子，在捕获了后代组件传递的错误时调用。
  • onRenderTracked()：注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
  • onRenderTriggered()：注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
  • onActivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  • onDeactivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
  • onServerPrefetch()：注册一个异步函数，在组件实例在服务器上被渲染之前调用。

动态组件

  • 选择性的选择组件
  • <component v-bind:is="<布尔变量> ? <组件1> : <组件2>" />

内置组件

  • <Transition>：（过度动画效果）为单个元素或组件提供动画过渡效果。
  • <TransitionGroup>：为列表中的多个元素或组件提供过渡效果。
  • <KeepAlive>：（缓存组件状态）组件包裹的组件将总是被缓存、切换会时保留组件当时的操作状态。
  • <Teleport>：将其插槽内容渲染到 DOM 中的另一个位置。

动画

// 组件刚开始离开
.v-leave-active {
}

// 组件离开结束
.v-leave-to {
}

// 组件刚开始进入
.v-enter-active {
}

// 组件进入完成
.v-enter-to {
}

// 正在进入和离开
.v-leave-active, .v-enter-active {
}

项目打包部署方案

配置文件名vue-config.js

// 项目部署的基本路径
publicPath: process.env.NODE_ENV === "production" ? "./" : "",

// 项目打包的根目录
outputDir: "dist",

// 项目打包的静态资源存放目录
assetsDir: "",
// 项目打包的index.html输出路径，默认“index.html”
indexPath: "index.html",
// 项目打包是否生成js的source map 调试包，默认 true，生产部署设置为false
productionSourceMap: false,

博主提示

推荐详细教程请前往Vue官网查看文档：

第三方网站教程：vite创建爱女vue3项目

更新时间: