随笔分类 - 前端 / vue3
创建一个vue项目
摘要：1. 使用vite创建项目 npm create vite@latest 2. 替换main.js // 从 Vue.js 框架中导入 createApp 函数。createApp 是用来创建 Vue 应用的函数。 import { createApp } from 'vue' // 导入一个 CS
阅读全文
路由--子路由
摘要：子路由（也称为嵌套路由）是一种在 Vue 应用的单个路由下设置多个视图的方法。这使得构建多层次的页面结构变得简单，例如，一个有多个嵌套视图的仪表板页面。在 Vue Router 中实现子路由可以让你在相同的页面布局内展示不同的组件，而无需为每个可能的组合创建单独的路由。 基本上，子路由允许你定义一个
阅读全文
路由--工作原理
摘要：什么是 <router-view>？ <router-view> 是 Vue Router 提供的一个特殊组件。 它的作用是作为一个占位符，用于显示当前路由对应的组件。 如何理解 "路由出口"？ 把 <router-view> 想象成一个电影院的屏幕。你可以在这个屏幕上播放不同的电影（组件），而哪部
阅读全文
路由--基础入门
摘要：Vue Router，是一个用于 Vue.js 的官方路由管理器。 它和 Vue.js 核心深度集成，使得构建单页面应用（SPA）变得简单。 在单页面应用中，页面不会重新加载整个页面，而是通过动态加载和替换页面的某些部分来实现与用户的交互 router index.js // 1. 定义路由组件.
阅读全文
基础--监听器
摘要：watch 的作用是用于监测响应式属性的变化，并在属性发生改变时，执行特定的操作 const vm = new Vue({ data: { message: 'Hello' }, watch: { // 监听message的变化 message(newValue, oldValue) { conso
阅读全文
基础--生命周期
摘要：初学时候，真抽象啊 就这个笔记，来来回回，更新好多次了 1.什么是dom DOM将HTML或XML文档表示为一个树形结构，其中每个节点都是文档中的一个元素（如标签、文本、注释等） 就是我们常看的源码格式 2. 什么是生命周期 就是vue组件，显示成浏览器页面的过程 3.挂载 挂载说简单点就是转化 这
阅读全文
基础--计算属性
摘要：定义 计算属性本质上是基于Vue实例的数据进行计算得出的属性，它们的值会根据依赖的数据发生变化而自动更新 当依赖数据发生变化时，计算属性处理的值也会变化。 使用场景 避免根据data的值直接计算，然后填充到模板中。这样让<template>显的很乱 语法 // 图标显示的状态 const statu
阅读全文
模版--列表渲染：v-for
摘要：=后面写遍历的语法 index可写可不写 <template> <div> <ul> <li v-for="(item, index) in items" :key="index"> {{ index}} {{ item }} </li> </ul> </div> </template> <scri
阅读全文
模版--v-if、v-show
摘要：v-if 指令用于条件渲染。当v-if 指令的表达式的值为真时，对应的元素会被渲染到DOM中。如果表达式的值为假，该元素则不会被渲染 <div id="app"> <h1 v-if="showMessage">你好，世界！</h1> </div> var app = new Vue({ el: '#
阅读全文
组件--事件处理
摘要：事件处理分类 内联事件处理：内联事件处理是指直接在 Vue 模板的 HTML 元素上写入 JavaScript 代码来处理事件。这种方式允许你在模板中直接定义事件响应逻辑，而不是在 Vue 实例的 methods 部分。这种方式适用于简单的逻辑，可以避免为了小功能而编写额外的方法 <button @
阅读全文
vue书写风格API
摘要：Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。 vue2只支持选项式 API vue3支持两种 选项式 API (Options API) 在 Vue 2 中引入并继续在 Vue 3 中支持的选项式 API，是一种通过声明式选项（如 data, methods, comp
阅读全文
组件--插槽(用的少)
摘要：插槽（Slot）是一种模板语法，用于让子组件能够接收来自其父组件的 HTML 或组件内容 <slot> 是用来定义组件插槽的，放在子组件，父组件定义的内容会被放到子组件的 <slot> 位置 简单的说：就是你父组件引用了子组件，然后你还想对子组件进行局部更改，在子组件设置上插槽，就能改那了 多个插槽
阅读全文
组件
摘要：一个.vue 文件就是一个组件，分为根组件和组件 吐槽：vue的官网文档，是我见过最垃圾的，说不明白，让新手很难上手。当我多次再来看的时候，依旧懵懵懂懂。很多都搞不清。谁说前端简单？我给他大比斗 一般将App.vue作为根组件，将vue2_demo和vue3_demo等作为子组件导入并注册 // A
阅读全文
模版和渲染函数
摘要：Virtual DOM (虚拟 DOM)： 挂载 (mount)：一个运行时渲染器将会遍历整个虚拟 DOM 树，并据此构建真实的 DOM 树。这个过程被称为挂载 (mount)。 更新 (patch)：如果我们有两份虚拟 DOM 树，渲染器将会有比较地遍历它们，找出它们之间的区别，并应用这其中的变化
阅读全文
选项式，组合式，响应式
摘要："选项式"（Options API）、"组合式"（Composition API）和"响应式"（Reactivity API） 是Vue中重要的API概念，它们定义了组件的结构和行为，以及如何管理状态和逻辑 选项式 API（Options API） 概念：选项式API是Vue最初提供的API，通过定
阅读全文
