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

Vue3简介和快速体验

news 2026/3/27 2:29:41

文章目录

  • 前言
  • 1. Vue3介绍
  • 2. Vue3快速体验(非工程化方式)

前言

本次主要用VScode开发代码，vscode的安装很简单，不会的可以查询一下网上的资料

1. Vue3介绍

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:https://cn.vuejs.org/

Vue的两个核心功能：

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

2. Vue3快速体验(非工程化方式)

后面会分享工程化方式，这里先看看非工程化，体会一下非工程化的不方便

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 这里也可以用浏览器打开连接,然后将获得的文本单独保存进入一个vue.js的文件,导入vue.js文件即可 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><!-- 给style属性绑定colorStyle数据 --><!-- {{插值表达式 直接将数据放在该位置}} --><h1 v-bind:style="colorStyle">{{headline}}</h1><!-- v-text设置双标签中的文本 --><p v-text="article"></p><!-- 给type属性绑定inputType数据 --><input v-bind:type ="inputType" value="helloVue3"> <br><!-- 给按钮单击事件绑定函数 --><button  @click="sayHello()">hello</button></div><script>//组合apiconst app = Vue.createApp({// 在setup内部自由声明数据和方法即可!最终返回!setup(){//定义数据//在VUE中实现DOM的思路是: 通过修改修数据而影响页面元素// vue3中,数据默认不是响应式的,需要加ref或者reactive处理,后面会详细讲解let inputType ='text'let headline ='hello vue3'let article ='vue is awesome'  let colorStyle ={'color':'red'}        // 定义函数let sayHello =()=>{alert("hello Vue")}//在setup函数中,return返回的数据和函数可以在html使用return {inputType,headline,article,colorStyle,sayHello}}});//挂载到视图app.mount("#app");</script></body>
</html>

相关文章：

Vue3简介和快速体验

文章目录 前言1. Vue3介绍2. Vue3快速体验(非工程化方式) 前言 本次主要用VScode开发代码&#xff0c;vscode的安装很简单&#xff0c;不会的可以查询一下网上的资料 1. Vue3介绍 Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于…...

编程日记 2024/8/14 15:13:59

LeetCode98 验证二叉搜索树

前言 题目&#xff1a; 98. 验证二叉搜索树 文档&#xff1a; 代码随想录——验证二叉搜索树 编程语言&#xff1a; C 解题状态&#xff1a; 对中序遍历理解不到位 思路 了解了中序遍历会返回一个有序数组后&#xff0c;本题就可以迎刃而解。只需要判断&#xff0c;返回的数组…...

编程日记 2024/8/14 15:10:51

llama的神经网络结构；llama的神经网络结构中没有MLP吗；nanogpt的神经网络结构；残差是什么；残差连接：主要梯度消失

目录 解释代码 潜在问题和修正 结论 llama的神经网络结构 神经网络结构概述 举例说明 llama的神经网络结构中没有MLP吗 nanogpt的神经网络结构 1. 词嵌入层（Embedding Layer） 2. Transformer编码器层（Transformer Encoder Layer） 3. 层归一化（Layer Normalizat…...

编程日记 2024/8/14 15:09:49

函数的常量引用入参const saclass sdf，可否传入一个指向saclass对象的指针 shared_ptr＜saclass＞

不可以直接将一个指向 saclass 对象的 shared_ptr<saclass> 作为参数直接传入一个期望 const saclass& 类型参数的函数。原因是类型不匹配&#xff1a;shared_ptr<saclass> 是一个智能指针类型&#xff0c;它封装了对 saclass 对象的指针&#xff0c;并提供了一…...

编程日记 2024/8/14 15:08:47

数据库：SQL——数据库操作的核心语言

数据库&#xff1a;SQL——数据库操作的核心语言 SQL&#xff08;结构化查询语言&#xff09;是关系型数据库管理系统中的标准语言&#xff0c;广泛用于数据的定义、操作、控制和查询。SQL 包含多个子语言&#xff0c;分别用于不同的数据库操作任务&#xff0c;包括数据定义&a…...

编程日记 2024/8/14 15:07:43

Unity + HybridCLR 从零开始

官方文档开始学习,快速上手 | HybridCLR (code-philosophy.com)是官方文档链接 1.建议使用2019.4.40、2020.3.26、 2021.3.0、2022.3.0 中任一版本至于其他2019-2022LTS版本可能出现打包失败情况 2. Windows Win下需要安装visual studio 2019或更高版本。安装时至少要包含 使…...

编程日记 2024/8/14 15:06:41

C++小总结

C小总结 接口 对外暴露头文件中&#xff0c;只需要声明接口函数即可&#xff0c;其他不暴露的函数不需要进行声明。接口的参数使用指针形式比较好&#xff0c;因为外部使用时可以对实参进行创建和析构&#xff0c;如果非接口函数使用new开辟&#xff0c;不太好进行析构。在使…...

编程日记 2024/8/14 15:04:38

从快到慢学习Git指令

Git是现在最流行的版本控制工具之一。无论是在开源社区还是企业软件开发中,Git都扮演着至关重要的角色。本文将根据不同的需求,分别提供快速上手和深入学习Git的指南。 如果你只想下载代码 如果你只是想下载GitHub或其他代码仓库的代码,那你只需要了解以下两个命令: git clo…...

编程日记 2024/8/14 15:02:34

传奇游戏发布渠道

传奇游戏发布渠道 回答&#xff1a;游戏发布平台|手机游戏发布平台 传奇游戏发布渠道作为游戏开发商直接控制的信息传播途径&#xff0c;其安全性自然有着较高的保障。首先&#xff0c;渠道通常会采用先进的加密技术和安全协议来保护数据传输过程中的安全&#xff0c;防止信息…...

编程日记 2024/8/14 15:00:29

如何有效阅读科研论文【方法论】

如何读论文【论文精读1】_哔哩哔哩_bilibili 如何有效阅读科研论文 科研论文是了解学术领域最新研究成果和技术发展的重要途径。有效地阅读论文不仅能够帮助我们掌握前沿知识&#xff0c;还能提升自己的研究能力。本文将介绍一种系统的论文阅读方法&#xff0c;并通过具体的步…...

编程日记 2024/8/14 14:57:22

【揭秘】层层加码，竟能加速渠道营销数字化？-eBest

国潮饮料品牌在eBest RTM系统的支持下&#xff0c;已经将数字化贯彻到每一个销售环节&#xff0c;且看eBest如何通过“层层加码”&#xff0c;进一步加速该饮料品牌渠道数字化进程&#xff0c;实现弯道超车&#xff1f; “一箱四码”垛码 五码实现渠道数字化 为提高营销和数字…...

编程日记 2024/8/14 14:53:16

基于WAMP环境的简单用户登录系统实现（v3版）（持续迭代）

目录 版本说明 实现环境&#xff1a; 流程逻辑框图&#xff1a; 数据库连接 登录页面&#xff1a;login.html 登录处理实现&#xff1a;doLogin.php 用户欢迎页面&#xff1a;welcome.php 密码修改页面&#xff1a;change_password.html 修改处理&#xff1a;doChangePa…...

编程日记 2024/8/14 14:52:07

大语言模型与多模态大模型loss计算

文章目录 前言一、大语言模型loss计算1、loss计算代码解读2、构建模型输入内容与label标签3、input_ids与labels格式 二、多模态大模型loss计算方法1、多模态loss计算代码解读2、多模态输入内容2、大语言模型输入内容3、图像embending如何嵌入文本embeding 前言 如果看了我前面…...

编程日记 2024/8/14 14:51:05

线上研讨会 | CATIA助力AI提升汽车造型设计

报名链接&#xff1a; 2024探索之旅第二季...

编程日记 2024/8/14 14:48:00

Unity新输入系统 之 InputAction（输入配置文件最基本的单位）

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正​ 首先你应该了解新输入系统的构成结构&#xff1a;Unity新输入系统结构概览-CSDN博客 Input System - Unity 手册 1.In…...

编程日记 2024/8/14 14:45:57

【3】MySQL的安装即启动

目录 一.下载 二.安装 三.启动 一.下载 二.安装 安装MySQL时遇到的Initializing database错误&#xff1a;推荐下面的博客&#xff08;简单就是电脑名不要出现中文&#xff09; https://blog.csdn.net/m0_52775858/article/details/123705566 三.启动 PS&#xff1a;cmd要…...

编程日记 2024/8/14 14:43:54

变“金点子”为“好应用”，合合信息智能文档处理技术助力大学生探索AI创新边界

谈“糖”色变、追求养生、低卡生活……这些热门词汇频频在社交媒体上掀起讨论热潮。有这样一批年轻人不但捕捉到了这些词汇背后真实的用户需求&#xff0c;并且正在利用AI技术寻找解决之道。 近日&#xff0c;“中国大学生服务外包创新创业大赛”&#xff08;以下简称“服创大…...

编程日记 2024/8/14 14:42:52

央行重提P2P存量业务化解，非吸案开始翻旧账？

沉寂已久的P2P&#xff0c;又突然以另一种意想不到的形式回到公众视野了。2018年全国P2P坍塌式暴雷&#xff0c;平台老板“跑路”“判刑”的消息一时间你方唱罢我登场。当年的某凰金融、某租宝、某信贷等赫赫有名的网贷平台传出的消息无非两类——查封或跑路&#xff0c;这几年…...

编程日记 2024/8/14 14:41:51

8B 端侧小模型 | 能力全面对标GPT-4V！单图、多图、视频理解端侧三冠王，这个国产AI开源项目火爆全网

这两天&#xff0c; Github上一个 国产开源AI 项目杀疯了&#xff01;一开源就登上了 Github Trending 榜前列&#xff0c;一天就获得将近600 star。 这个项目就是国内大模型四小龙之一面壁智能最新大打造的面壁「小钢炮」 MiniCPM-V 2.6 。它再次刷新端侧多模态天花板&#xf…...

编程日记 2024/8/14 14:36:41

汽车免拆诊断案例 | DAF（达富）汽油尾气处理液故障警示

故障现象 距离我上次在货卡上工作已经有一段时间了&#xff0c;让它们在道路上保持安全行驶是非常重要的。因此&#xff0c;当故障警示灯亮起时&#xff0c;我们需要迅速找到问题方向以及排除故障。 车辆的仪表板亮起多个故障灯以及警示灯&#xff0c;我们需要用解码器查找触…...

编程日记 2024/8/14 14:35:39

Qwerty Learner 数据持久化架构深度解析：IndexedDB 异步存储方案技术实现

Qwerty Learner 数据持久化架构深度解析&#xff1a;IndexedDB 异步存储方案技术实现 【免费下载链接】qwerty-learner 项目地址: https://gitcode.com/GitHub_Trending/qw/qwerty-learner 在英语单词记忆与打字训练应用中&#xff0c;数据持久化架构直接影响学习体验的…...

编程新知 2026/3/27 1:17:59

如何将TaskWeaver与LangChain无缝集成：扩展AI代理能力边界的终极指南

如何将TaskWeaver与LangChain无缝集成&#xff1a;扩展AI代理能力边界的终极指南 【免费下载链接】TaskWeaver A code-first agent framework for seamlessly planning and executing data analytics tasks. 项目地址: https://gitcode.com/gh_mirrors/ta/TaskWeaver T…...

编程新知 2026/3/26 23:43:13

用ChatTTS打造你的专属AI语音助手：从音色定制到批量合成音频的完整工作流

用ChatTTS打造你的专属AI语音助手&#xff1a;从音色定制到批量合成音频的完整工作流 在内容创作领域&#xff0c;音频正成为越来越重要的媒介形式。无论是知识付费课程的讲解、播客节目的制作&#xff0c;还是智能设备的语音交互&#xff0c;一个稳定、个性化的语音合成系统都…...

编程新知 2026/3/26 23:02:50

手把手教你搭建日本亚马逊CVV钓鱼系统（附自动验证功能）

网络安全防护&#xff1a;识别与防范钓鱼攻击的技术实践 在数字化时代&#xff0c;网络安全已成为个人和企业不可忽视的重要议题。随着电子商务的蓬勃发展&#xff0c;各类网络攻击手段也日益猖獗&#xff0c;其中钓鱼攻击因其低成本、高回报的特点&#xff0c;成为黑客常用的攻…...

编程新知 2026/3/26 21:38:00

电工必看：正弦交流电路中的相量法实战技巧（附计算示例）

电工必看&#xff1a;正弦交流电路中的相量法实战技巧&#xff08;附计算示例&#xff09; 在电气工程领域&#xff0c;正弦交流电路的分析是每位电工和电气工程师必须掌握的核心技能。面对复杂的电路计算&#xff0c;传统的三角函数解析法往往让从业者陷入繁琐的运算泥潭。相量…...

编程新知 2026/3/26 21:32:00

钉钉机器人Markdown表格发送实战：绕过限制的创意方案

1. 钉钉机器人Markdown表格发送的痛点与需求 很多团队都在用钉钉机器人自动推送数据报表&#xff0c;但官方提供的消息类型里并没有直接支持表格格式。我见过不少同事为了发个简单的数据表格&#xff0c;要么截图发图片&#xff08;无法复制数据&#xff09;&#xff0c;要么上…...

编程新知 2026/3/26 20:43:48

Degrees of Lewdity中文本地化版本完全指南：从安装到精通

Degrees of Lewdity中文本地化版本完全指南&#xff1a;从安装到精通 【免费下载链接】Degrees-of-Lewdity-Chinese-Localization Degrees of Lewdity 游戏的授权中文社区本地化版本 项目地址: https://gitcode.com/gh_mirrors/de/Degrees-of-Lewdity-Chinese-Localization …...

编程新知 2026/3/26 20:43:48

终极指南：5分钟学会免费修复Minecraft损坏存档的强力工具

终极指南&#xff1a;5分钟学会免费修复Minecraft损坏存档的强力工具 【免费下载链接】Minecraft-Region-Fixer Python script to fix some of the problems of the Minecraft save files (region files, *.mca). 项目地址: https://gitcode.com/gh_mirrors/mi/Minecraft-Reg…...

编程新知 2026/3/26 19:45:32

合肥高中英语一对一辅导2026指南，突破听说读写全面提升路径

合肥高中英语一对一辅导2026指南&#xff0c;突破听说读写全面提升路径据《2026年中国基础教育课外辅导行业白皮书》数据显示&#xff0c;2026年高中阶段英语学科辅导需求同比增长23%&#xff0c;其中超过65%的学生家长明确表示&#xff0c;传统大班教学已无法满足孩子个性化提…...

编程新知 2026/3/26 19:10:49

C++ 静态成员的生命周期管理

C静态成员的生命周期管理是面向对象编程中一个既基础又关键的话题。静态成员作为类的特殊成员&#xff0c;其生命周期与普通成员变量截然不同&#xff0c;理解它们的初始化、销毁时机以及线程安全等问题&#xff0c;对于编写健壮高效的C代码至关重要。本文将深入探讨静态成员的…...

编程新知 2026/3/26 17:39:45