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

【vue-1】vue入门—创建一个vue应用

news 2026/4/1 20:49:20

最近在闲暇时间想学习一下前端框架vue，主要参考以下两个学习资料。

官网 快速上手 | Vue.js

b站学习视频 2.创建一个Vue3应用_哔哩哔哩_bilibili

一、创建一个vue3应用 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head>
<body><div id="app"><!-- 插值表达式 -->{{ msg }}<h1>{{web.title}}</h1><h2>{{web.url}}</h2></div><script>const {createApp, reactive} = VuecreateApp({// setup选项，用于设置响应式数据和方法等setup(){const web = reactive({title:"开始学习vue啦",url:"vue.com"})return{msg:"sucess",web}}}).mount("#app")// mount为挂载</script>
</body>
</html>

模块化开发

注：首先要安装Live Server插件。

导入js文件：

import {createApp, reactive} from './vue.esm-browser.js'

script添加类型：

<script type="module">

二、ref与reactive区别

1、存储类型不同

ref：用于存储单个基本类型的数据，如：数字、字符串等；

reactive：用于存储复杂数据类型，如：对象或数组等。

2、修改方式不同

ref修改方式：

# 导入
import {ref} from './vue.esm-browser.js'# 定义常量
const number = ref(10)# 修改
number.value = 20

reactive修改方式：

const web = reactive({title:"开始学习vue啦",url:"vue.com"
})
web.url = "hhahaha"

三、渲染数据v-text和v-html

插值方式：

<h3>{{web.title}}</h3>

v-text方式：

<h3 v-text="web.title"></h3>

v-html方式：

<h3 v-html="web.url"></h3>

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="vue.global.js"></script> --></head>
<body><div id="app"><h3>{{web.title}}</h3><h3 v-text="web.title"></h3><h3 v-html="web.url"></h3></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项，用于设置响应式数据和方法等setup(){ const web = reactive({url:"<i style='color:blue'> www.vue.com</i>",title:"学习vue"})return{web     }}}).mount("#app")// mount为挂载</script>
</body>
</html>

另：<i>文本内容呈现斜体文本。

举例：

He named his car <i>The lightning</i>, because it was very fast.运行结果：He named his car The lightning, because it was very fast.

相关文章：

【vue-1】vue入门—创建一个vue应用

最近在闲暇时间想学习一下前端框架vue&#xff0c;主要参考以下两个学习资料。 官网 快速上手 | Vue.js b站学习视频 2.创建一个Vue3应用_哔哩哔哩_bilibili 一、创建一个vue3应用 <!DOCTYPE html> <html lang"en"> <head><meta charset&q…...

编程日记 2024/5/25 10:52:35

【微信小程序开发】小程序前后端交互--发送网络请求实战解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

编程日记 2024/5/25 10:51:34

【NOIP2013普及组复赛】题2：表达式求值

题2&#xff1a;表达式求值 【题目描述】 给定一个只包含加法和乘法的算术表达式&#xff0c;请你编程计算表达式的值。 【输入文件】 输入仅有一行&#xff0c;为需要你计算的表达式&#xff0c;表达式中只包含数字、加法运算符 “ ” “” “”和乘法运算符 “ ∗ ” “…...

编程日记 2024/5/25 10:49:33

datasheet芯片数据手册—新手入门学习（二）【8-18】

参考芯片手册已经上传&#xff0c;可自行下载 因为芯片参考手册内容比较多&#xff0c;故再一次介绍本文内容主要讲解章节。 目录 8、内容介绍 命令真值表 9、Command Definitions 10、READ Operations &#xff08;1&#xff09;页面读取操作 &#xff08;2&#xff…...

编程日记 2024/5/25 10:48:31

UE5 双手握剑的实现（逆向运动学IK）

UE5 双手握剑的实现 IK 前言 什么是IK&#xff1f; UE官方给我们提供了很多对于IK处理的节点&#xff0c;比如ABRIK、Two Bone IK、Full Body IK 、CCD IK等&#xff0c;但是看到这&#xff0c;很多人就好奇了&#xff0c;什么是IK&#xff1f; 首先我们来看看虚幻小白人的骨…...

编程日记 2024/5/25 10:47:29

Java中的接口（Interface）及其与抽象类的区别

一、技术难点 在Java中&#xff0c;接口是一种完全抽象的类&#xff0c;主要用于定义一组方法的规范&#xff0c;但不提供具体的实现。接口的技术难点主要体现在以下几个方面&#xff1a; 方法的定义与实现分离&#xff1a;接口只定义了方法的签名&#xff0c;没有方法体&…...

编程日记 2024/5/25 10:46:28

代码随想录算法训练营第十四天（py）| 二叉树 | 递归遍历、迭代遍历、统一迭代

1 理论基础 1.1 二叉树的种类 满二叉树 只有度为0和2的节点&#xff0c;且度为0的节点在同一层。 深度为k&#xff0c;有2^k-1个节点 完全二叉树 除了最底层可能没填满&#xff0c;其余每层节点数都达到最大。并且最底层节点全部集中在左边。 二叉搜索树 是一个有数值…...

编程日记 2024/5/25 10:45:26

Golang并发编程-协程goroutine初体验

文章目录 前言一、Goroutine适合的使用场景二、Goroutine的使用1. 协程初体验 三、WaitGroupWaitGroup 案例一WaitGroup 案例二 总结 前言 学习Golang一段时间了&#xff0c;一直没有使用过goroutine来提高程序执行效率&#xff0c;在一些特殊场景下&#xff0c;还是有必须开启…...

编程日记 2024/5/25 10:43:24

驱动与系统学习网址

DRM&#xff08;Direct Rendering Manager&#xff09;学习简介-CSDN博客 Android Qcom Display学习(零)-CSDN博客 https://blog.csdn.net/hexiaolong2009/category_9705063.htmlhttps://blog.csdn.net/hexiaolong2009/category_9705063.htmlRender Hell —— 史上最通俗易懂…...

编程日记 2024/5/25 10:42:23

OAuth2.0

OAuth2.0 OAuth2.0是一种授权框架&#xff0c;用于授权第三方应用访问用户资源的方式。它允许用户将自己的信息&#xff08;如照片、视频等&#xff09;存储在一个服务提供商中&#xff0c;然后授权第三方应用访问这些信息&#xff0c;而无需提供用户名和密码给第三方应用。OAu…...

编程日记 2024/5/25 10:40:21

测试testing10

测试testing10...

编程日记 2024/5/25 10:39:19

在Java中实现泛型（Generics）的深入解析

在Java中&#xff0c;泛型&#xff08;Generics&#xff09;是一个强大的工具&#xff0c;它允许我们在编译时定义类型参数&#xff0c;使代码更加灵活、可重用和类型安全。下面&#xff0c;我将从技术难点、面试官关注点、回答吸引力以及代码举例四个方面&#xff0c;详细解析…...

编程日记 2024/5/25 10:38:18

每周题解：繁忙的都市

题目链接 繁忙的都市 题目描述 城市 C 是一个非常繁忙的大都市&#xff0c;城市中的道路十分的拥挤&#xff0c;于是市长决定对其中的道路进行改造。城市 C 的道路是这样分布的&#xff1a;城市中有 n n n 个交叉路口&#xff0c;有些交叉路口之间有道路相连&#xff0c;两…...

编程日记 2024/5/25 10:37:17

linux之防火墙工具

netfilter Linux防火墙是由Netfilter组件提供的&#xff0c;Netfilter工作在内核空间&#xff0c;集成在linux内核中。 Netfilter在内核中选取五个位置放了五个hook(勾子) function(INPUT、OUTPUT、FORWARD、PREROUTING、POSTROUTING)&#xff0c;而这五个hook function向用户…...

编程日记 2024/5/25 10:36:16

【Python】—— 高阶函数

目录 &#xff08;一&#xff09;体验高阶函数 &#xff08;二&#xff09;内置高阶函数 2.1 map(&#xff09; 2.2 reduce() 2.3 filter() Python中的高阶函数是指那些接受函数作为参数&#xff0c;或者返回函数作为结果的函数。这种特性让Python的函数编程能力非常强大&…...

编程日记 2024/5/25 10:35:15

逻辑分析仪 - 采样率/采样深度

采样深度&#xff08;Sampling Depth&#xff09; 采样深度指的是逻辑分析仪在一次捕获过程中可以记录的最大样本数量。简单来说&#xff0c;采样深度越大&#xff0c;逻辑分析仪可以记录的数据量就越多。这对于分析长时间的信号变化或复杂的信号序列非常重要。 采样率&#…...

编程日记 2024/5/25 10:34:13

【Maven打包将resources/lib/下的jar也打包进jar包中】

Maven打包将resources/lib/下的jar也打包进jar包中 &#xff01;&#xff01;&#xff01;少走弯路 第一步 resources/lib/下引入jar ftp4j-1.7.2.jar替换为自己jar包的名称 <dependency><groupId>it.sauronsoftware.ftp4j</groupId><artifactId>ft…...

编程日记 2024/5/25 10:32:11

基于Java的地震震中附近城市分析实战

目录 前言 一、空间数据说明 1、空间查询 二、Java后台开发 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、附近城市展示 3、成果展示 总结 前言 随着全球气候变化和地壳活动的不断演变&#xff0c;地震作为一种自然灾害&…...

编程日记 2024/5/25 10:30:09

【C语言】指针（三）

目录 一、字符指针 1.1 ❥ 使用场景 1.2 ❥ 有关字符串笔试题 二、数组指针 2.1 ❥ 数组指针变量 2.2 ❥ 数组指针类型 2.3 ❥ 数组指针的初始化 三、数组指针的使用 3.1 ❥ 二维数组和数组名的理解 3.2 ❥ 二维数组传参 四、函数指针 4.1 ❥ 函数的地址 4.2 ❥ 函数…...

编程日记 2024/5/25 10:29:08

【Linux】从零开始认识进程间通信 —— 管道

送给大家一句话&#xff1a; 人要成长&#xff0c;必有原因&#xff0c;背后的努力与积累一定数倍于普通人。所以&#xff0c;关键还在于自己。 – 杨绛 从零开始认识进程间通信 1 为什么要进程间通信2 进程如何通信3 进程通信的常见方式4 管道4.1 什么是管道4.2 管道通信的系…...

编程日记 2024/5/25 10:28:07

GooglePlay多账号管理神器推荐：5款工具帮你轻松实现合规隔离（2025亲测有效）

GooglePlay多账号管理实战指南&#xff1a;2025年高效合规工具与策略 在移动应用生态中&#xff0c;Google Play作为全球最大的应用分发平台&#xff0c;其严格的账号管理政策让许多开发者感到头疼。特别是对于那些需要运营多个账号的开发者来说&#xff0c;如何在合规前提下实…...

编程新知 2026/4/1 20:33:58

【测试之道】第四篇：分层测试论 —— 金字塔、奖杯与蜂巢：构建你的质量防御阵型

专栏进度&#xff1a;04 / 10 (测试理论专题) 在不同的架构&#xff08;单体、微服务、前端驱动&#xff09;下&#xff0c;测试资源的分配比例是完全不同的。盲目套用模板是测试经理最容易犯的错误。 一、 经典模型&#xff1a;测试金字塔 (Testing Pyramid) 由 Mike Cohn 提出…...

编程新知 2026/4/1 20:09:38

Livox Mid360激光雷达动态避障实战：DWA算法在移动机器人中的应用

1. Livox Mid360激光雷达与DWA算法初探 第一次接触Livox Mid360这款固态激光雷达时&#xff0c;我就被它的性能惊艳到了。相比传统机械式雷达&#xff0c;Mid360不仅体积小巧&#xff0c;而且扫描频率高达100Hz&#xff0c;特别适合用在移动机器人上做实时避障。记得去年给一个…...

编程新知 2026/4/1 19:51:29

MATLAB xyz2stl实战：手把手教你修复GitHub热门工具包的常见报错（含stlWrite函数缺失解决方案）

MATLAB xyz2stl实战&#xff1a;从报错排查到完整工作流搭建 当你从GitHub下载了NWRichmond/xyz2stl工具包&#xff0c;满心期待地运行却看到"未定义函数或变量stlWrite"的红色报错时&#xff0c;这种挫败感我深有体会。作为MATLAB社区中下载量排名前10%的三维数据处…...

编程新知 2026/4/1 19:31:10

VMware 16 安装win,Win11推荐下载链接(不要选arm)

目录Win11下载链接待续、更新中......Win11下载链接 ed2k://|file|zh-cn_windows_11_consumer_editions_version_22h2_updated_sep_2022_x64_dvd_23d39103.iso|5579771904|33C7EC6485AD8C55ADFB550FA1A0F270|/ 待续、更新中… 1 顿号、: 先使用ctrl. &#xff0c;再使用一遍切…...

编程新知 2026/4/1 19:21:07

新手程序员必备：收藏这份Prompt指南，轻松驾驭大模型创造业务价值！

本文系统介绍了大模型Prompt的概念、撰写框架及核心原则&#xff0c;深入剖析了构建高质量Prompt的实操方法。从RTF、思考链到RISEN等五大框架&#xff0c;再到提升Prompt效果的策略&#xff0c;如明确指令、结构化输出、赋予模型思考时间等&#xff0c;帮助读者高效驾驭大模型…...

编程新知 2026/4/1 19:17:06

3步打造B站高效体验：开源客户端的极致优化指南

3步打造B站高效体验&#xff1a;开源客户端的极致优化指南 【免费下载链接】BiliBili-UWP BiliBili的UWP客户端&#xff0c;当然&#xff0c;是第三方的了 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWP BiliBili-UWP作为一款开源客户端&#xff0c;专为Wi…...

编程新知 2026/4/1 17:47:28

网络调试无从下手？Fiddler中文版让HTTP问题排查效率提升10倍的秘密

网络调试无从下手&#xff1f;Fiddler中文版让HTTP问题排查效率提升10倍的秘密 【免费下载链接】zh-fiddler Fiddler Web Debugger 中文版 项目地址: https://gitcode.com/gh_mirrors/zh/zh-fiddler 在当今复杂的网络环境中&#xff0c;开发者和测试工程师经常面临HTTP请…...

编程新知 2026/4/1 17:33:12

C++ 安全子集：探讨在关键任务系统中限制部分 C++ 特性（如 RTTI）的必要性

尊敬的各位专家、各位同仁&#xff0c;大家好。今天&#xff0c;我们齐聚一堂&#xff0c;共同探讨一个在软件工程领域&#xff0c;尤其是在关键任务系统&#xff08;Critical Mission Systems&#xff09;开发中至关重要的话题&#xff1a;C 安全子集——在严苛环境下限制部分…...

编程新知 2026/4/1 16:51:12

CAD图纸转PDF的4种方法，简单易懂，新手也能轻松学会！

在实际工作中&#xff0c;CAD图纸格式&#xff08;如DWG、DXF&#xff09;仅能通过AutoCAD等专业软件打开&#xff0c;而PDF格式作为通用文档&#xff0c;支持跨设备、跨平台查看&#xff0c;无需安装CAD软件。这种转换的必要性体现在&#xff1a;1. 文件分享安全&#xff1a;P…...

编程新知 2026/4/1 16:04:34