【vue-1】vue入门—创建一个vue应用
最近在闲暇时间想学习一下前端框架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 = 20reactive修改方式：
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，主要参考以下两个学习资料。 官网 快速上手 | Vue.js b站学习视频 2.创建一个Vue3应用_哔哩哔哩_bilibili 一、创建一个vue3应用 <!DOCTYPE html> <html lang"en"> <head><meta charset&q…...
【微信小程序开发】小程序前后端交互--发送网络请求实战解析
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…...
【NOIP2013普及组复赛】题2：表达式求值
题2：表达式求值 【题目描述】 给定一个只包含加法和乘法的算术表达式，请你编程计算表达式的值。 【输入文件】 输入仅有一行，为需要你计算的表达式，表达式中只包含数字、加法运算符 “ ” “” “”和乘法运算符 “ ∗ ” “…...
datasheet芯片数据手册—新手入门学习（二）【8-18】
参考芯片手册已经上传，可自行下载 因为芯片参考手册内容比较多，故再一次介绍本文内容主要讲解章节。 目录 8、内容介绍 命令真值表 9、Command Definitions 10、READ Operations （1）页面读取操作 （2ÿ…...
UE5 双手握剑的实现（逆向运动学IK）
UE5 双手握剑的实现 IK 前言 什么是IK？ UE官方给我们提供了很多对于IK处理的节点，比如ABRIK、Two Bone IK、Full Body IK 、CCD IK等，但是看到这，很多人就好奇了，什么是IK？ 首先我们来看看虚幻小白人的骨…...
Java中的接口（Interface）及其与抽象类的区别
一、技术难点 在Java中，接口是一种完全抽象的类，主要用于定义一组方法的规范，但不提供具体的实现。接口的技术难点主要体现在以下几个方面： 方法的定义与实现分离：接口只定义了方法的签名，没有方法体&…...
代码随想录算法训练营第十四天（py）| 二叉树 | 递归遍历、迭代遍历、统一迭代
1 理论基础 1.1 二叉树的种类 满二叉树 只有度为0和2的节点，且度为0的节点在同一层。 深度为k，有2^k-1个节点 完全二叉树 除了最底层可能没填满，其余每层节点数都达到最大。并且最底层节点全部集中在左边。 二叉搜索树 是一个有数值…...
Golang并发编程-协程goroutine初体验
文章目录 前言一、Goroutine适合的使用场景二、Goroutine的使用1. 协程初体验 三、WaitGroupWaitGroup 案例一WaitGroup 案例二 总结 前言 学习Golang一段时间了，一直没有使用过goroutine来提高程序执行效率，在一些特殊场景下，还是有必须开启…...
驱动与系统学习网址
DRM（Direct Rendering Manager）学习简介-CSDN博客 Android Qcom Display学习(零)-CSDN博客 https://blog.csdn.net/hexiaolong2009/category_9705063.htmlhttps://blog.csdn.net/hexiaolong2009/category_9705063.htmlRender Hell —— 史上最通俗易懂…...
OAuth2.0
OAuth2.0 OAuth2.0是一种授权框架，用于授权第三方应用访问用户资源的方式。它允许用户将自己的信息（如照片、视频等）存储在一个服务提供商中，然后授权第三方应用访问这些信息，而无需提供用户名和密码给第三方应用。OAu…...
测试testing10
测试testing10...
在Java中实现泛型（Generics）的深入解析
在Java中，泛型（Generics）是一个强大的工具，它允许我们在编译时定义类型参数，使代码更加灵活、可重用和类型安全。下面，我将从技术难点、面试官关注点、回答吸引力以及代码举例四个方面，详细解析…...
每周题解：繁忙的都市
题目链接 繁忙的都市 题目描述 城市 C 是一个非常繁忙的大都市，城市中的道路十分的拥挤，于是市长决定对其中的道路进行改造。城市 C 的道路是这样分布的：城市中有 n n n 个交叉路口，有些交叉路口之间有道路相连，两…...
linux之防火墙工具
netfilter Linux防火墙是由Netfilter组件提供的，Netfilter工作在内核空间，集成在linux内核中。 Netfilter在内核中选取五个位置放了五个hook(勾子) function(INPUT、OUTPUT、FORWARD、PREROUTING、POSTROUTING)，而这五个hook function向用户…...
【Python】—— 高阶函数
目录 （一）体验高阶函数 （二）内置高阶函数 2.1 map(） 2.2 reduce() 2.3 filter() Python中的高阶函数是指那些接受函数作为参数，或者返回函数作为结果的函数。这种特性让Python的函数编程能力非常强大&…...
逻辑分析仪 - 采样率/采样深度
采样深度（Sampling Depth） 采样深度指的是逻辑分析仪在一次捕获过程中可以记录的最大样本数量。简单来说，采样深度越大，逻辑分析仪可以记录的数据量就越多。这对于分析长时间的信号变化或复杂的信号序列非常重要。 采样率&#…...
【Maven打包将resources/lib/下的jar也打包进jar包中】
Maven打包将resources/lib/下的jar也打包进jar包中 ！！！少走弯路 第一步 resources/lib/下引入jar ftp4j-1.7.2.jar替换为自己jar包的名称 <dependency><groupId>it.sauronsoftware.ftp4j</groupId><artifactId>ft…...
基于Java的地震震中附近城市分析实战
目录 前言 一、空间数据说明 1、空间查询 二、Java后台开发 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、附近城市展示 3、成果展示 总结 前言 随着全球气候变化和地壳活动的不断演变，地震作为一种自然灾害&…...
【C语言】指针（三）
目录 一、字符指针 1.1 ❥ 使用场景 1.2 ❥ 有关字符串笔试题 二、数组指针 2.1 ❥ 数组指针变量 2.2 ❥ 数组指针类型 2.3 ❥ 数组指针的初始化 三、数组指针的使用 3.1 ❥ 二维数组和数组名的理解 3.2 ❥ 二维数组传参 四、函数指针 4.1 ❥ 函数的地址 4.2 ❥ 函数…...
【Linux】从零开始认识进程间通信 —— 管道
送给大家一句话： 人要成长，必有原因，背后的努力与积累一定数倍于普通人。所以，关键还在于自己。 – 杨绛 从零开始认识进程间通信 1 为什么要进程间通信2 进程如何通信3 进程通信的常见方式4 管道4.1 什么是管道4.2 管道通信的系…...
Sentinel-3B OLCI 3 级全球分箱地球观测降分辨率（ERR）叶绿素（CHL）数据，版本 2022.0
Sentinel-3B OLCI Level-3 Global Binned Earth-observation Reduced Resolution (ERR) Chlorophyll (CHL) Data, version 2022.0 简介 叶绿素 a 数据集提供全球网格化的表层叶绿素 a 浓度（浮游植物生物量的替代指标）合成数据。CHL 支持时间序列和气候…...
作业本耐用度差距巨大？深圳大明印刷厂拆解合规工艺，告别定制作业本掉页开裂通病
在校园日常教学中，很多学校都会遇到同一个难题：同一学期采购的作业本、定制作业本，品质差距悬殊，有的完好无损用到期末，有的短短几周就出现书脊开裂、页面脱落、边角破损、翻页卡顿等问题。不少人误以为是学生使用习惯…...
51单片机驱动ST7735S彩屏避坑指南：从5秒刷屏到流畅贪吃蛇的优化实战
51单片机驱动ST7735S彩屏性能优化实战：从卡顿到流畅游戏的蜕变之路当一块128x160分辨率的ST7735S彩屏遇上传统的51单片机，这种组合看似矛盾却又充满挑战。许多开发者初次尝试时会发现，原本在STM32等平台上运行流畅的显示驱动，移植…...
[智能体-69]：重新认知MCP：协议不生产智能，只是AI全域交互的标准化基石
MCP只是提供了大模型、编排调度、外部工具能够进行结构化交流的标准，而整个系统的智能主要依赖编排调度，与外部软件系统的交互取决于外部工具，包括外部语音交互、视觉交互、数字化交互。当下MCP（Model Context Protocol࿰…...
Wechat2RSS：微信公众号转RSS订阅工具
文章目录Wechat2RSS：微信公众号转RSS订阅工具Wechat2RSS：微信公众号转RSS订阅工具 ttttmr开源的Wechat2RSS项目，目前在GitHub上获得1409颗Star，项目地址为https://github.com/ttttmr/Wechat2RSS。该工具的核心作用是将微信公众号…...
运营管理与服务保障平台建设方案)
低空旅游观光与低空通勤(eVTOL)运营管理与服务保障平台建设方案
本方案旨在为eVTOL载具构建集运营管理、空中交通管制、安全保障与乘客服务于一体的数字化平台。通过微服务架构、5G-A融合感知、空域网格化与零信任安全等核心技术，解决高密度飞行中的资源调度与安全冲突问题。目标实现毫秒级冲突解算与15分钟内快速周转，…...
混合物理-ML辐射方案：攻克气候模型中次网格云效应的新范式
1. 项目概述与核心挑战在气候模拟这个庞大的数字沙盘中，地球系统模型（ESM）是我们理解未来气候演变的核心工具。然而，这个沙盘有一个长期存在的“颗粒度”难题：受限于计算资源，模型的水平分辨率通常在100到2…...
MUUFL Gulfport高光谱与LiDAR数据集：遥感研究者的终极实战指南
MUUFL Gulfport高光谱与LiDAR数据集：遥感研究者的终极实战指南 【免费下载链接】MUUFLGulfport MUUFL Gulfport Hyperspectral and LIDAR Data: This data set includes HSI and LIDAR data, Scoring Code, Photographs of Scene, Description of Data 项目地址: …...
大语言模型解码加速：自适应层并行机制解析
1. 项目概述：大语言模型解码加速的现状与挑战 在当今大语言模型(LLM)应用中，自回归解码已成为文本生成任务的核心瓶颈。以GPT-3生成长篇内容为例，每个token必须按顺序生成，这种串行依赖严重限制了硬件并行计算能力的发挥。传统解码…...
机器学习赋能分子模拟：从数据驱动CV到自适应采样破解采样瓶颈
1. 项目概述与核心价值在分子模拟的世界里，我们常常面临一个根本性的困境：我们想理解一个复杂系统（比如一个蛋白质如何折叠，或者一个催化剂表面如何发生反应）的微观机理，但系统的相空间维度高得吓人——动辄…...