【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 = 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.

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

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

相关文章

NodeJS安装并生成Vue脚手架(保姆级)

文章目录 NodeJS下载配置环境变量Vue脚手架生成Vue脚手架创建项目Vue项目绑定git 更多相关内容可查看 NodeJS下载 下载地址&#xff1a;https://nodejs.org/en 下载的速度应该很快&#xff0c;下载完可以无脑安装&#xff0c;以下记得勾选即可 注意要记住自己的安装路径&…

【Linux】简单模拟C语言文件标准库FILE

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

Kaggle——First Machine Learning Model

kaggle&#xff08;需要魔法才能访问&#xff09;:https://www.kaggle.com/ 需要下载的数据集&#xff1a;melb_data.csv、train.csv&#xff08;已放在资源里面&#xff09; First Machine Learning Model Selecting Data for Modeling #Selecting Data for Modeling import…

C++ 学习 关于引用

&#x1f64b;本文主要讲讲C的引用 是基础入门篇~ 本文是阅读C Primer 第五版的笔记 &#x1f308; 关于引用 几个比较重要的点 &#x1f33f;引用相当于为一个已经存在的对象所起的另外一个名字 &#x1f31e; 定义引用时&#xff0c;程序把引用和它的初始值绑定&#xff08;b…

【MySQL精通之路】InnoDB磁盘I/O和文件空间管理(11)

主博客&#xff1a; 【MySQL精通之路】InnoDB存储引擎-CSDN博客 目录 1.InnoDB磁盘I/O 1.1 预读 1.2 双写缓冲区 2.文件空间管理 2.1 Pages, Extents, Segments, and Tablespaces&#xff08;很重要&#xff09; 2.2 配置保留文件段页面的百分比 2.3 页与表行的关系 …

R可视化:可发表的Y轴截断图

Y轴截断图by ggprism Y轴截断图by ggprism 介绍 ggplot2绘制Y轴截断图by ggprism加载R包 knitr::opts_chunk$set(message = FALSE, warning = FALSE)library(tidyverse) library(ggprism) library(patchwork)rm(list = ls()) options(stringsAsFactors = F) options(future.…

2024年高考考务人员网上培训参考答案

第1部分&#xff1a;单选题 1. 关于试卷保密室负责人职责&#xff0c;以下说法不正确的是&#xff08;B&#xff09; [2分] A. 负责试卷的接收、保管和发放工作 B. 试卷保密室内屋门锁钥匙和铁柜门锁钥匙必须由同一人保管 C. 试卷接收和发放应当当面清点试卷袋数量&#…

Go语言的中间件(middleware)是如何实现的?

文章目录 Go语言的中间件&#xff08;Middleware&#xff09;是如何实现的&#xff1f;中间件的工作原理中间件的实现步骤示例代码总结 Go语言的中间件&#xff08;Middleware&#xff09;是如何实现的&#xff1f; 在Go语言中&#xff0c;中间件&#xff08;Middleware&#…

springboot实现多开发环境匹配置(超级简洁没废话)

首先logbok-spring.xml里面的内容 <?xml version"1.0" encoding"UTF-8"?> <configuration><!-- 开发、测试环境 --><springProfile name"dev,test"><include resource"org/springframework/boot/logging/log…

探索现代AI生成模型的底层原理:大语言模型、视频模型与图片模型

探索现代AI生成模型的底层原理&#xff1a;大语言模型、视频模型与图片模型 引言大语言模型&#xff08;Large Language Models&#xff09;底层原理先进的模型实例应用与影响挑战与未来发展 视频生成模型底层原理先进的模型实例应用与影响挑战与未来发展 图片生成模型底层原理…

Java并发面试题,多线程通关秘籍

【知识点记录】- 不能不知道的知识点 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &#x1f31d;分享学习心得&#xf…

算法设计与分析

一、分治法 二、回溯法 三、贪心法 四、动态规划法 分治法一分而治之 对于一个规模为n的问题&#xff0c;若该问题可以容易地解决&#xff08;比如说规模n较小&#xff09;则直接解决&#xff0c;否则将其分解为k个规模较小的子问题&#xff0c;这些子问题互相独立且与原问题形…

封装UUID

目录 1、 * 封装UUID 1.1、 * 从一个 UU64 恢复回一个 UUID 对象 1.2、 * 64进制表示的 UUID, 内容为 [\\-0-9a-zA-Z_] 1.3、 * 将紧凑格式的 UU16 字符串变成标准 UUID 格式的字符串 package com.my.blog.website.utils;

【数据结构与算法 | 基础篇】单向链表模拟栈

1. 前言 前文我们先后用单向循环链表&#xff0c;环形数组来模拟了队列. 队列的特点是先进先出. 队头移除元素&#xff0c;队尾添加元素. 所以需要两个指针控制.本文我们接下来提及如果和单向链表来模拟栈. 栈的特点是后进先出. 在栈顶压栈或弹栈. 另一侧不动的是栈底. 我们可…

range for

1. 基于范围的for循环语法 C11标准引入了基于范围的for循环特性&#xff0c;该特性隐藏了迭代器 的初始化和更新过程&#xff0c;让程序员只需要关心遍历对象本身&#xff0c;其语法也 比传统for循环简洁很多&#xff1a; for ( range_declaration : range_expression ) {loo…

基于SpringBoot设计模式之结构型设计模式

文章目录 介绍开始 介绍 结构型模式涉及到如何组合类和对象以获得更大的结构。结构型类模式采用继承机制来组合接口或实现。一个简单的例子是采用多重继承方法将两个以上的类组合成一个类&#xff0c;结果这个类包含了所有父类的性质。这一模式尤其有助于多个独立开发的类库协同…

【Linux】关于获取进程退出状态中的core dump标志补充

通过 wait/waitpid 可以获取子进程的退出状态, 从而判断其退出结果. 记录退出状态的 int 变量 status 的使用情况如下图所示: 如果是收到信号终止的话, 低 7 位为收到的终止信号, 而低第 8 位为 core dump 标志, core dump 标志有什么用呢? core dump 标志只存 0/1, 表示是否…

printf 模仿slf4j 的log.xxx效果

printf 模仿slf4j 的log.xxx效果 简介期待的效果颜色遇到的问题实际的效果代码实现使用效果图 简介 突然想玩一玩&#xff0c;能不能用printf实现slf4j里 的log.xxx 的效果。 性能是完全不考虑的&#xff0c;只要功能可用就好。 期待的效果 类似:info("这是第{}条日志…

ffmpeg-webrtc(metartc)给ffmpeg添加webrtc协议

这个是使用metrtc的库为ffmpeg添加webrtc传输协议&#xff0c;目前国内还有一个这样的开源项目&#xff0c;是杨成立大佬&#xff0c;大师兄他们在做&#xff0c;不过wili页面维护的不好&#xff0c;新手不知道如何使用&#xff0c;我专门对它做过介绍&#xff0c;另一篇博文&a…

不同类型水表计量技术的优缺点

1.单流束水表 1.1优点 (1)耐受悬浮固体。适用于硬水或悬浮颗粒物。 (2)多样性&#xff0c;可用性&#xff0c;容易找到需要的合适的表型。 (3)技术可靠&#xff0c;已使用了数十年。 (4)体积小&#xff0c;可以安装在狭小的空间里。 (5)13mm、15mm、20mm水表可能是市面…