当前位置： 首页 > article >正文

Vue-4-前端框架Vue基础入门之Vue的常用操作

article 2025/6/5 16:51:43

文章目录

  • 1 VUE
    • 1.1 文件结构
    • 1.2 定义和显示变量
      • 1.2.1 ref函数
      • 1.2.2 reactive函数
    • 1.3 定义方法
      • 1.3.1 方式一
      • 1.3.2 方式二
      • 1.3.3 方式三
    • 1.4 循环遍历
    • 1.5 watch
      • 1.5.1 监听ref
      • 1.5.2 监听reactive
    • 1.6 生命周期函数
    • 1.7 配置文件
  • 2 问题及解决
    • 2.1 lack permissions
    • 2.2 npm run dev! Missing script: dev
  • 3 参考附录

Vue组件的文件结构、定义和显示变量、定义方法、循环遍历、侦听watch、生命周期函数。

1 VUE

Vue.js 是一种用于构建用户界面的渐进式 JavaScript 框架。它被设计为可以自底向上逐层应用，核心库只关注视图层，易于上手，并且能够方便地与其他库或现有项目整合。另一方面，当与现代化工具链以及各种支持库结合使用时，Vue 也完全能够为复杂的单页应用程序（SPA）提供驱动。

1.1 文件结构

后缀为.vue
文件一般包含三个部分
(1)template
模板是定义组件结构的部分，它描述了组件的 HTML 结构。Vue 使用一种特殊的语法扩展了 HTML，允许你在模板中直接嵌入 JavaScript 表达式、指令等。
(2)script
脚本部分包含了组件的逻辑，包括数据、方法、计算属性、生命周期钩子等。在 Vue 3 中，推荐使用 Composition API 来组织代码，当然也支持 Options API。
(3)style——css
样式部分用于定义组件的视觉表现。Vue 支持普通的 CSS、SCSS、LESS 等预处理器，并且可以通过 scoped 属性来限制样式仅应用于当前组件，避免全局污

相关文章：

Vue-4-前端框架Vue基础入门之Vue的常用操作

文章目录 1 VUE1.1 文件结构1.2 定义和显示变量1.2.1 ref函数1.2.2 reactive函数1.3 定义方法1.3.1 方式一1.3.2 方式二1.3.3 方式三1.4 循环遍历1.5 watch1.5.1 监听ref1.5.2 监听reactive1.6 生命周期函数1.7 配置文件2 问题及解决2.1 lack permissions2.2 npm run dev! Miss…...

编程日记 2025/6/5 16:51:43

ubuntu国内镜像源手动配置

备份当前源列表 打开终端，执行以下命令备份当前的源列表： sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup 编辑源列表文件 使用文本编辑器编辑/etc/apt/sources.list文件，例如使用nano： sudo vim /etc/apt/sou…...

编程日记 2025/6/5 11:33:17

21-CS61B-lab6:java文件操作以及持久化一见

文件操作 这里的文件操作主要通过File类，Serializable的派生类等实现 拥有路径path(相对路径/绝对路径)，创建File对象 File newFile new File(path); 获得当前工作目录File File CWD new File(System.getProperty("user.dir")); 通过S…...

编程日记 2025/6/6 5:55:19

⚡️ Linux 系统安装与配置 Git

⚡️ Linux 系统安装与配置 Git 📘 1. Git 简介 Git 是目前世界上最流行的分布式版本控制系统，他能高效地处理从小型到大型项目的版本管理需求，是现代软件开发流程中的核心工具之一。 在企业环境中，大多数公司通常会在 Linux 服…...

编程日记 2025/6/5 10:36:48

SpringBoot 自动装配原理深度解析：从源码到实践

SpringBoot 自动装配原理深度解析：从源码到实践 SpringBoot 作为现代 Java 开发的事实标准，其核心优势之一是 “约定大于配置” 的自动装配机制。本文将从源码层面深入解析 SpringBoot 自动装配的实现原理，并通过代码示例展示其工作流程。 …...

编程日记 2025/6/5 16:34:21

【Go语言】Fyne GUI 库使用指南 (面向有经验开发者)

引言 Fyne 是一个使用 Go 语言编写的、易于使用的跨平台 GUI 工具包和应用程序 API。它旨在通过单一代码库构建在桌面和移动设备上运行的应用程序。本文档面向有一定 Go 语言开发经验的开发者，将详细介绍 Fyne 最新版的核心功能，包括基础组件、布局系统…...

编程日记 2025/6/5 5:36:11

Nginx Lua模块(OpenResty)实战：动态化、智能化你的Nginx，实现复杂Web逻辑 (2025)

更多服务器知识，尽在hostol.com 嘿，各位Nginx的“铁杆粉丝”和“配置大师”们！咱们都知道，Nginx以其超凡的性能、稳定性和丰富的模块化功能，在Web服务器、反向代理、负载均衡等领域独步青云，简直是服务器软…...

编程日记 2025/6/5 10:27:07

openssl 怎么生成吊销列表

mkdir test cd test # 根据 /usr/lib/ssl/openssl.cnf 配置文件中目录结构可知有个demoCA目录，目录下有各种文件。 mkdir ./demoCA ./demoCA/newcerts ./demoCA/private sudo chmod 777 -R ./demoCA/ echo 01 > ./demoCA/serial touch ./demoCA/index.txt # /usr…...

编程日记 2025/6/5 17:16:59

Go语言包的组织与导入 -《Go语言实战指南》

在 Go 语言中，包（Package） 是管理代码模块化、复用性与可维护性的核心单位。本章将讲解如何组织包结构、如何导入其他包、以及项目中的最佳实践。 一、什么是包？ • 每个 .go 文件都属于某个包（通过 package 声明&…...

编程日记 2025/6/5 9:27:56

springboot-响应接收与ioc容器控制反转、Di依赖注入

1.想将服务器中的数据返回给客户端，需要在controller类上加注解：ResponseBody; 这个注解其实在前面已经使用过，RestController其实就包含两个注解： Controller ResponseBody 返回值如果是实体对象/集合，将会转换为j…...

编程日记 2025/6/6 5:11:55

CSP使用严格设置

文章目录 说明示例 说明 日期：2025年6月2日。 内容安全政策（MPS）是一个额外的安全层，有助于检测和缓解某些类型的攻击。包括（但不限于）跨站点脚本（XSS）和数据注入攻击。这些攻击用…...

编程日记 2025/6/5 5:27:17

Spring代理工厂类ProxyFactory作用以及实现原理

代理工厂类ProxyFactory AdvisedSupport（代理配置信息类）ProxyFactory（代理工厂类）小结测试 源码见：mini-spring 在 AOP（面向切面编程）中，Spring 支持两种常见的代理机制&#xff1a…...

编程日记 2025/6/5 12:24:11

SpringBoot使用MQTT协议简述

在 Spring Boot 中使用 MQTT 协议连接硬件设备&#xff0c;可以通过以下步骤实现。这里以 Eclipse Paho MQTT 客户端为例&#xff1a; 1. 添加 Maven 依赖 <dependencies><!-- Spring Boot Starter --><dependency><groupId>org.springframework.boo…...

编程日记 2025/6/6 7:09:52

【GraphQL】深入解析 Apollo Client：从架构到实践的一站式 GraphQL 解决方案

深入解析 Apollo Client&#xff1a;从架构到实践的一站式 GraphQL 解决方案 1. 引言 GraphQL 作为现代 API 开发的核心技术&#xff0c;其灵活性和高效性正在重塑数据交互模式。Apollo Client 作为 GraphQL 生态中最受欢迎的客户端库&#xff0c;凭借强大的缓存机制、框架集…...

编程日记 2025/6/5 17:10:07

集成电路制造设备防震基座选型指南：为稳定护航-江苏泊苏系统集成有限公司

集成电路制造设备防震基座选型指南&#xff1a;为稳定护航 在集成电路制造这一精密复杂的领域&#xff0c;每一个环节都如同精密仪器中的微小齿轮&#xff0c;一丝偏差都可能导致严重后果。制造设备的稳定运行更是重中之重&#xff0c;而防震基座作为守护设备稳定的第一道防线…...

编程日记 2025/6/5 19:17:56

华为OD机试真题——阿里巴巴找黄金宝箱(II)（2025A卷：100分）Java/python/JavaScript/C/C++/GO最佳实现

2025 A卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式； 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析； 本文收录于专栏：《2025华为OD真题目录+全流程解析+备考攻略+经验分…...

编程日记 2025/6/5 17:48:43

Vue中 toRaw 和 markRaw 的使用

背景 针对一些特殊的需求&#xff0c;在项目里&#xff0c;需要将响应式数据变为普通原始类型数据&#xff0c;这种情况是有的 在 Vue 中&#xff0c;能够将普通数据类型的数据变为响应式数据&#xff0c;也能将响应式类型数据变为普通类型数据&#xff0c;用于提升数据的性能…...

编程日记 2025/6/5 12:37:40

探索DeepSeek提示词：关键策略与实用场景

在人工智能飞速发展的时代&#xff0c;DeepSeek作为一款备受关注的AI工具&#xff0c;其强大的功能为用户提供了高效便捷的服务。然而&#xff0c;要充分发挥DeepSeek的潜力&#xff0c;掌握提示词的使用策略至关重要。本文将深入探讨DeepSeek提示词的关键策略&#xff0c;并结…...

编程日记 2025/6/5 7:13:25

海底三维可视化平台

1. 摘要 本文作者为视觉分析构建了一个真实海底的“虚拟世界”。在3D环境中导入底部轮廓。在该模型中&#xff0c;通过地震反射获得的海床地层剖面被数字化为离散点&#xff0c;并用克里金算法进行插值&#xff0c;以在每个地层中产生均匀的网格。然后在每一层构建 Delaunay三…...

编程日记 2025/6/5 13:52:14

Elasticsearch 读写流程深度解析

在数据驱动的数字化浪潮中&#xff0c;Elasticsearch 凭借其毫秒级搜索响应与水平扩展能力&#xff0c;已成为现代数据架构的核心引擎。本文将深入剖析其读写流程的设计思想、实现细节与工程权衡&#xff0c;揭示这一分布式系统的精妙架构。 一、 架构基石&#xff1a;分布式设…...

编程日记 2025/6/5 13:31:35

AIoT赋能场馆数字化转型：智能管理新生态

在数字化浪潮席卷全球的当下&#xff0c;传统场馆管理模式已难以满足日益增长的高效运营与精细化服务需求。智慧场馆建设成为行业发展的必然趋势&#xff0c;而AIoT&#xff08;人工智能物联网&#xff09;技术的深度应用&#xff0c;为多系统集成提供了全新的解决方案&#xf…...

编程日记 2025/6/5 10:07:06

1、Pytorch介绍与安装

1、Pytorch介绍 PyTorch 是由 Facebook AI Research (FAIR) 团队开发并维护的一款开源深度学习框架&#xff0c;于 2016 年首次发布。它因其直观的设计、卓越的灵活性以及强大的动态计算图功能&#xff0c;迅速在学术界和工业界获得了广泛认可&#xff0c;成为当前深度学习研究…...

编程日记 2025/6/5 9:29:04

【从零开始学习QT】Qt 概述

目录 一、什么是 Qt 1.1 简介 1.2 Qt 的发展史 1.3 Qt 支持的平台 1.5 Qt 的优点 1.6 Qt 的应用场景 二、搭建 Qt 开发环境 2.1 Qt SDK 的下载 2.2 Qt SDK 的安装 2.3 验证 Qt SDK 安装是否成功 2.4 Qt 环境变量配置 三、认识 Qt Creator 3.1 Qt Creator 概览 3.…...

编程日记 2025/6/5 16:20:52

家庭路由器改装，搭建openwrt旁路由以及手机存储服务器，实现外网节点转发、内网穿透、远程存储、接入满血DeepSeek方案

大家好&#xff0c;也是好久没有发文了&#xff0c;最近在捣鼓一些比较有趣的东西&#xff0c;打算跟大家分享一下&#xff01; 先聊一下我的大致方案嘛&#xff0c;最近感觉家里路由器平时一直就只有无线广播供网的功能&#xff0c;感觉这么好的一下嵌入式设备产品不应该就干这…...

编程日记 2025/6/6 1:39:40

人工智能工程技术专业 和 其他信息技术专业 有哪些关联性？

人工智能工程技术专业与其他信息技术专业之间存在紧密的关联性&#xff0c;这些关联既体现在基础理论、技术体系上&#xff0c;也反映在行业应用和技术融合的趋势中。以下从多个维度解析它们的关联性&#xff1a; 一、基础学科与核心技术的共通性 数学与算法基础 关联专业&…...

编程日记 2025/6/5 11:26:14

基于本地模型+多级校验设计的高效缓存，有效节省token数量（有点鸡肋doge）。

前言 我是基于token有限而考虑的一个省钱方案&#xff0c;还能够快速返回结果&#xff0c;但是劣势也很明显&#xff0c;设计不好容易出问题&#xff0c;就如下面所介绍的语义飘逸和缓存污染&#xff0c;我认为在自己学习大模型的过程用来省钱非常可以&#xff0c;再加上学习过…...

编程日记 2025/6/6 3:20:11

逐步检索增强推理的跨知识库路由学习

摘要 多模态检索增强生成&#xff08;MRAG&#xff09;在多模态大语言模型&#xff08;MLLM&#xff09;中通过在生成过程中结合外部知识来减轻幻觉的发生&#xff0c;已经显示出了良好的前景。现有的MRAG方法通常采用静态检索流水线&#xff0c;该流水线从多个知识库&#xff…...

编程日记 2025/6/6 0:21:19

用Git管理你的服务器配置文件与自动化脚本：版本控制、变更追溯、团队协作与安全回滚的运维之道

更多服务器知识&#xff0c;尽在hostol.com 咱们在和服务器打交道的日子里&#xff0c;是不是经常要和各种各样的配置文件&#xff08;Nginx的、Apache的、PHP的、防火墙的……&#xff09;还有自己辛辛苦苦写下的自动化脚本打交道&#xff1f;那你有没有遇到过这样的“抓狂”…...

编程日记 2025/6/5 10:23:25

【数据库】关系数据库标准语言－SQL（金仓）下

4、数据查询 语法&#xff1a; SELECT [ALL | DISTINCT] <目标列表达式> [,<目标列表达式>] … FROM <表名或视图名>[, <表名或视图名> ] … [ WHERE <条件表达式> ] [ GROUP BY <列名1> [ HAVING <条件表达式> ] ] [ ORDER BY <…...

编程日记 2025/6/6 2:35:41

Vue3+SpringBoot全栈开发：从零实现增删改查与分页功能

前言 在现代化Web应用开发中&#xff0c;前后端分离架构已成为主流。本文将详细介绍如何使用Vue3作为前端框架&#xff0c;SpringBoot作为后端框架&#xff0c;实现一套完整的增删改查(CRUD)功能&#xff0c;包含分页查询、条件筛选等企业级特性。 技术栈介绍 前端&#xff1…...

编程日记 2025/6/5 12:26:18