小白暴力学习001---Vue---第一个Vue

news2024/9/21 18:57:05

做本文主要是采用Vue3的教程,来源于菜鸟教程,
https://www.runoob.com/vue3/vue3-tutorial.html
主要记录从小白开始如何使用Vue建立一个笔记本的网站,并用于记录

基础条件:

  • 有明确的目标
  • 有兴趣
  • 能使用电脑,会百度

视频的教程后续有空再出,

1.将如下的代码,复制到笔记本中,保存为ceshi.html。并双击打开,那么,恭喜你,第一个vue已经运行,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

如果会html,和javascript就发现,这些东西好像啊,是的,暴力理解,Vue就是一个javascript.

其他东西先不需要管,打开刚才的网页, 出现如下的界面,就成功了。

在这里插入图片描述

官网的说法摘录如下:

  • Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
  • Vue 只关注视图层, 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

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

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

相关文章

前端的学习-CSS(二)-弹性盒子-flex

一&#xff1a;子元素的属性 order&#xff1a;项目的排列顺序&#xff0c;数值越小&#xff0c;排列越靠前&#xff0c;默认为0。 flex-grow&#xff1a;定义项目的放大比例&#xff0c;默认为 0 &#xff0c;即如果存在剩余空间&#xff0c;也不放大。 flex-shrink&#xff1…

【链表OJ】常见面试题 2

文章目录 1.[链表分割](https://www.nowcoder.com/practice/0e27e0b064de4eacac178676ef9c9d70?tpId8&&tqId11004&rp2&ru/activity/oj&qru/ta/cracking-the-coding-interview/question-ranking)1.1 题目要求1.2 哨兵位法 2.[链表的回文结构](https://www.…

Spring Boot集成liquibase快速入门Demo

1.什么是liquibase&#xff1f; Liquibase是一个用于跟踪、管理和应用数据库变化的开源的数据库重构工具。它将所有数据库的变化&#xff08;包括结构和数据&#xff09;都保存在 changelog 文件中&#xff0c;便于版本控制&#xff0c;它的目标是提供一种数据库类型无关的解决…

小厂也是厂,3000我也干

2018年6月&#xff0c;大三暑假 那一天&#xff0c;我投递了家里附近的一家公司有响应了&#xff0c;他线上问我什么时候可以去面试&#xff0c;我说什么时候都行。 HR&#xff1a;“要不你下午来吧&#xff1f;” 我&#xff1a;“行&#xff0c;我家里离面试地点不远” 我…

zdpy+vue3+onlyoffice文档系统实战上课笔记 20240805

上次 上次计划 1、最近文档表格完善 2、实现登录功能 3、新建文件&#xff0c;复制文件&#xff0c;删除文件 4、其他 目前任务&#xff1a;最近文档表格完善 1、在名称前面&#xff0c;渲染这个文档的图标 2、大小的基本的单位是kb&#xff0c;超过1024kb则换成mb&#xff0…

编写一个期货跨期套利的程序,谈谈思路及案例

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

8.5 C++

思维导图 试编程 提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 要求使用C风格字符串完成 #include <iostream> #include <array>using namespace std;int main() {cout << "请输入一个字符…

Python 字典 ({})的概念与操作

1、使用字典 在Python中&#xff0c;字典(dictionary)是一系列键值对(k-v pair)。每个键都有相应的值对应&#xff0c;使用键来访问与之关联的值&#xff0c;与键关联的值可以为数、字符串、列表乃至字典。 在Python中&#xff0c;字典放在花括号&#xff08;{}&#xff09;中…

C++中const关键字的用法

C语言和C中const的不同 首先我们需要区分一下C语言中的const和C中的const&#xff0c;C语言中的const修饰的变量可以不初始化&#xff0c;但如果将一个变量定位为const类型还不初始化&#xff0c;那么之后就不能对这个变量直接赋值了。 如果我们使用C语言中的const定义的变量指…

error: resource android:attr/lStar not found

项目打正式包的提示resource android:attr/lStar not found&#xff0c;后来分析发现android:attr/lStar属性在androidx.core:core的包里面&#xff0c;然后便试着降低androidx.core:core的版本号&#xff0c;降低后发现还是报错&#xff0c;查看错误信息发现androidx.core:cor…

安装nodejs服务器

Java项目可以运行在tomcat服务器&#xff0c;开始完成前后端完全分离。前端有自己独立的工程。我们需要把前端独立的工程运行起来。 运行在nodejs服务器下。 验证是否安装成功&#xff1a;敲cmd--输入node --version 1.安装npm java项目需要依赖jar,安装maven。前端项目也需要依…

《Advanced RAG》-07-探索 RAG 中表格数据的处理方案

摘要 本文详细讨论了实现 Retrieval-Augmented Generation&#xff08;RAG&#xff09;时对表格进行处理的挑战&#xff0c;特别是在非结构化文档中自动准确地提取和理解表格信息。 首先介绍了RAG中管理表格的关键技术&#xff0c;包括表格解析和索引结构设计。 接着&#xff0…

PXE批量安装操作系统

PXE批量安装操作系统 系统环境rhedhat7.9关闭vmware内的dhcp服务 kickstart自动安装脚本的制作 在rhel7系统中提供图形的kickstart制作方式 在rhel8中已经把图形的工具取消&#xff0c;并添加到rhn网络中 在rhel8中如果无法通过rhn网络制作kickstart&#xff0c;可以使用模板…

LlamaIndex 实现 React Agent

React Agent 是指 LLM 对问题自行推理并调用外部工具解决问题&#xff0c;如下图所示&#xff0c;通过一些推理步骤最终找到想要的答案。 LlamaIndex 提供了实现 React Agent 的框架&#xff0c;通过框架可以轻松的实现上图中的步骤。那么&#xff0c;如果不用 LlamaIndex 应该…

【轻松面试】Java中的迭代器

Java中的迭代器 一、迭代器的基本方法 二、示例解释 三、注意事项 &#x1f388;边走、边悟&#x1f388;迟早会好 在 Java 中&#xff0c;迭代器&#xff08;Iterator&#xff09;是一种用于遍历集合&#xff08;如 List、Set 等&#xff09;元素的对象。迭代器提供了一种通…

6款超好用的图纸加密软件推荐(为图纸加密软件披上隐形铠甲!)

场景设定&#xff1a; 一个阳光明媚的下午&#xff0c;在创意满满的设计工作室里&#xff0c;李明和小张正围坐在会议桌旁&#xff0c;讨论着如何更好地保护他们精心设计的图纸不被泄露。 李明&#xff08;眉头紧锁&#xff09;&#xff1a;“小张啊&#xff0c;最近咱们的项目…

C# Unity 面向对象补全计划 七大原则 之 接口隔离原则 (ISP) 难度:☆ 总结:大接口分成小的,然后该干啥干啥

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列作为七大原则和设计模式的进阶知识&#xff0c;看不懂没关系 请看专栏&#xff1a;http://t.csdnimg.cn/mIitr&#xff0c;查漏补缺 1.接口隔离原则 (ISP) 这…

按钮类控件

目录 1.Push Button 代码示例: 带有图标的按钮 代码示例: 带有快捷键的按钮 代码示例: 按钮的重复触发 2.Radio Buttion 代码示例: 选择性别 代码示例: click, press, release, toggled 的区别 代码示例: 单选框分组 3.3 Check Box 代码示例: 获取复选按钮的取值 1.Pu…

sql注入sqli-labs第一关

目录 sql注入是什么&#xff1f; sqli-labs第一关--字符型注入 思路&#xff1a;想要利用连表查询 进一步思考如何逃脱单引号 如何知道表的列数 最终目的&#xff1a;注入管理员账号密码 sql注入是什么&#xff1f; 注入&#xff1a;都是合理合法的MySQL执行语句 产生的原…

PXE学习及其简单应用

一、PXE 的定义 PXE 是一种基于网络的启动技术&#xff0c;最初由 Intel 开发&#xff0c;旨在提供一种在没有本地存储设备的情况下通过网络启动操作系统的标准。PXE 集成在计算机的 BIOS 或 UEFI 中&#xff0c;允许计算机从网络服务器下载并启动操作系统或其他软件。 二、PX…