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

news2025/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 属性来限制样式仅应用于当前组件,避免全局污

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2397666.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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

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

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…

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

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

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

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

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

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

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

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

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

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

海底三维可视化平台

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

Elasticsearch 读写流程深度解析

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

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

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

1、Pytorch介绍与安装

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

【从零开始学习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.…

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

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

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

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

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

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

【数据库】关系数据库标准语言-SQL(金仓)下

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

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

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

小黑大语言模型应用探索:langchain智能体构造源码demo搭建1(初步流程)

导入工具包 rom langchain_core.tools import BaseTool from typing import Sequence, Optional, List from langchain_core.prompts import BasePromptTemplate import re from langchain_core.tools import tool from langchain_core.prompts.chat import (ChatPromptTempla…

极客时间:用 FAISS、LangChain 和 Google Colab 模拟 LLM 的短期与长期记忆

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

leetcode hot100刷题日记——35.子集

解答&#xff1a; 方法一&#xff1a;选or不选的dfs&#xff08;输入视角&#xff09; 思路&#xff1a;[1,2,3]的全部子集可以看成是对数组的每一位数字做选择。 eg.空集就是一个数字都不选&#xff0c;[1,2]就是1&#xff0c;2选&#xff0c;3不选。 class Solution { pub…