【第2章】Vue快速上手

news2024/12/23 2:31:19

文章目录

  • 前言
  • 一、第一个Vue程序
  • 二、Open in Browser插件
    • 1.安装
    • 2. 使用
    • 3. 界面
  • 总结


前言

这里我们来实现我们的第一个程序。


一、第一个Vue程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            setup() {
                return {
                    msg: 'Hello Vue3!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

二、Open in Browser插件

见名知义,打开浏览器用的

1.安装

在这里插入图片描述

2. 使用

在这里插入图片描述

3. 界面

在这里插入图片描述


总结

回到顶部

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

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

相关文章

6月11号作业

思维导图 #include <iostream> using namespace std; class Animal { private:string name; public:Animal(){}Animal(string name):name(name){//cout << "Animal&#xff1b;有参" << endl;}virtual void perform(){cout << "讲解员的…

OpenCV多版本安装Ubuntu18.04

文章目录 一、查看已安装的Opencv版本二、安装新版本三、多版本OpenCV切换 OpenCV 官网 在此 一、查看已安装的Opencv版本 查看已安装opencv的版本 pkg-config opencv --modversion官网下载对应的版本&#xff0c;并解压 opencv3.4.3 二、安装新版本 进入前置准备里下载…

springSecurity学习笔记(一)

简介 Spring Security是一个Java框架&#xff0c;用于保护应用程序的安全性。它提供了一套全面的安全解决方案&#xff0c;包括身份验证、授权、防止攻击等功能。Spring Security基于过滤器链的概念&#xff0c;可以轻松地集成到任何基于Spring的应用程序中。它支持多种身份验…

高校运维赛 2024 easyshell

考点: 冰蝎流量解密部分明文攻击 看请求路由可以知道 shell.php是上传的马子 过滤器 http 加密返回包前16为完整base编码字符 一眼冰蝎流量解密 爆破aes常用密码 就是冰蝎默认aes密码 e45e329feb5d925b 冰蝎从开头流量都是连接初始化之类的,一般关键数据在后面 从后向前看发现…

电影推荐系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;免费电影管理&#xff0c;付费电影管理&#xff0c;电影论坛管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;付费电影&#…

CMake的学习之路

目录 一、基础命令 二、编译选项和设置 三、文件和目录操作 四、控制流命令 五、其他命令 六、CMake构建级别 CMake是一个跨平台的自动化建构系统&#xff0c;它使用一种人类可读的配置文件&#xff08;CMakeLists.txt&#xff09;来控制软件编译过程。以下是CMake中的一些…

python-Numpy及Pandas数据分析应用

读取文件team.xlsx数据&#xff0c;其中name&#xff1a;名字, team&#xff1a;所属团队, Q1&#xff1a;语文分数, Q2&#xff1a;数学分数, Q3&#xff1a;英语分数, Q4&#xff1a;政治分数 # (1) 查询该数据的索引、所有值、列名、数据类型、元素个数、维度以及形状 imp…

【C++课程学习】:Data类的实现

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;C课程学习 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f369;1.头文件 &#x1f369;2.实现文件&#xff1a; &#x1f369;3.分析&#xff1a; &…

ARM32开发--PWM与通用定时器

知不足而奋进望远山而前行 目录 文章目录 前言 学习目标 学习内容 PWM pwm原理 需求 开发流程 初始化PWM PWM占空比控制 main函数修改duty 输出通道 关心的内容 重要的关键词 周期 分频 占空比 总结 前言 在微控制器开发中&#xff0c;理解和掌握PWM&#x…

计算机网络:网络层 - IPv4地址

计算机网络&#xff1a;网络层 - IPv4地址 分类编址划分子网子网掩码 无分类编址 CIDRCIDR 地址块构造超网 在酒店中&#xff0c;每个房间都有门牌号码&#xff0c;服务员送餐时&#xff0c;就可以根据门牌号码来判断一份餐要送到那个房间。 在网络中也是如此&#xff0c;一份…

泵制造5G智能工厂工业物联数字孪生可视化,推进制造业数字化转型

泵制造5G智能工厂工业物联数字孪生可视化&#xff0c;推进制造业数字化转型。泵制造行业&#xff0c;作为工业领域的核心部分&#xff0c;更是急需通过技术创新实现生产流程的智能化和高效化。而5G智能工厂工业物联数字孪生可视化技术的出现&#xff0c;为泵制造业的数字化转型…

【全网最齐报错的解决方法!】运行mvn命令打包项目jar包报错?“Fatal error compiling: 无效的目标发行版: 19 ”, 让我来看看~

最近写实验&#xff0c;要打包项目&#xff0c;但是不管是在cmd运行“mvn clean package -Dmaven.test.skiptrue”命令&#xff0c;还是在idea上去操作&#xff0c;都出现了这样的一个错误&#xff1a; [EROR] Failed to exeoute goal org.apache.maven.plugins:maven-comnpile…

作业6.11

练习1&#xff1a;输入一个数&#xff0c;判断是否是完美数 完美数&#xff1a;正序和逆序的结果一致 练习2&#xff1a; * ** *** **** for(int i0;i<4;i){for(int y1;y<4-i;y){ printf(" ");}for(int j0;j<i;j){printf("*&quo…

zabbix-agent如何版本回退降低?

文章目录 1&#xff0c;查看zabbix-agent版本号2&#xff0c;查看zabbix-server的版本号3&#xff0c;卸载已有的zabbix-agent4&#xff0c;找到与zabbix-server匹配版本的zabbix-agent5&#xff0c;安装zabbix-agent 5.0.42版本6&#xff0c;查看已安装的zabbix-agent的版本号…

谁是最会写作文的AI“考生”?“阅卷老师”ChatGPT直呼惊艳!

文章推荐 粽叶飘香&#xff0c;端午安康&#xff01;AI视频送祝福啦~ AI日报&#xff5c;文生语音大模型国内外均有突破&#xff0c;Pika完成6亿新融资&#xff0c;视频大模型也不远了&#xff01; ⭐️搜索“可信AI进展“关注公众号&#xff0c;获取当日最新AI资讯 一年一…

Visual Studio 调试 Win32 出现 Task Manager / Explorer 无法打开,无法关机/重启

现象 Access is denied 无法关机 无法通过开始 -> 关机/重启 进行关机或者重启 无法打开新的应用 无法通过开始 -> 双击应用打开新的应用 已打开应用的使用不受影响 已经打开的应用可以正常操作 原因 杀毒软件&#xff1b;关掉杀毒软件就好了 问题查找过程 参考…

记一次华为2288H V5更换主板的辛酸

1、开机提示找不到设备&#xff0c;通过带外检查硬盘raid是否正常&#xff0c;如果正常就不是硬件问题&#xff0c;也不会是线没接好 2、网络不通&#xff0c;服务重启啥的都正常不会报错&#xff0c;就是ping不通网关&#xff0c;后来通过带外发现是网卡漂移了。 核对mac地址发…

项目:双人五子棋对战-对战模块(6)

完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com 当玩家进入到游戏房间后, 就要开始一局紧张而又刺激的五子棋对战了, 本文将就前端后端的落子与判断胜负的部分作详细讲解. 模块详细讲解 约定前后端交互的接口 首先是建立连接后, 服务器需要生成一些游戏的初始信息(可…

一五零、MAC 安装mysql可视化工具连接

mysql安装&#xff0c;按照网上教程一步步安装&#xff08;官网下载安装包->解压->完成安装&#xff09;&#xff0c;最后在「系统偏好设置」无法启动mysql。 原因&#xff1a;下载的版本是8.0最新版本&#xff0c;MAC上这种方法无法启动成功。 解决方法 换低版本的mys…

JDBC开发之四大核心API:DriverManager Connection Statement ResultSet

DriverManager 方法都是静态的 注册驱动 在Mysql5之后我们就不用注册驱动了 在jar包里已经写好了 读取文件 第二个方法 如果连接的是主机mysql并且端口是默认的3306 则可以简化书写 代码书写 import java.sql.Connection; import java.sql.DriverManager; import java.sql.S…