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

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

news 2026/2/9 14:48:02

最近在闲暇时间想学习一下前端框架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

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2026/2/2 9:25:26

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2026/1/31 6:50:52

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2026/1/31 7:42:50