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

Vue实用操作篇-1-第一个 Vue 程序

news 2026/3/31 12:10:24

安装 Vue 非常的简便，只需下载好 Vue 对应的 .js 文件，在 html 中引入 vue.js 即可使用 Vue

下载好了 vue.js 我们便可以编写我们的第一个 vue 程序了

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>first-vue</title><!-- 加载vue --><script src = "js/vue.js"></script></head><body><!-- 指定挂载位置 --><div id = "app"></div><!-- Vue 程序 --><script>// 创建 Vue 的实例对象const myVue = new Vue(//可变参数，opting -> 选项,其中可以编写大量的配置项{// 配置项1：模版语句template : '<h1>hello vue!</h1>'})// 将 myVue 这个实例挂在在 app 上myVue.$mount('#app')</script></body>
</html>

在浏览器运行这个 html 文件

对于第一个程序，我们需要知道以下几点基础知识

1.我们通过 new vue() 这个对象来调用 vue 组件中的内容

2.对于 vue 对象的创建，我们需要对其指定可选项 options

即 :

let options = {template : '<h1>hello vue!</h1>'
}

对于options , 里面是许多的可选项 option ，以键值对的形式存在，当我们需要使用某些特定功能时添加 option，在 new vue() 时指定 options 时，参数名可省略

const myVue = new Vue({template : '<h1>hello vue!</h1>'key1 : value1key2 : value2
})

3.template 配置项：用于指定模版语句

模版语句可以是 html 代码，也可以是 Vue 指定的一些特殊规则

4.Vue 对象的实例都有一个 $mount() 方法

$mount() 的作用是将实例挂载到指定位置，将其挂载后方便对其进行管理

相关文章：

Vue实用操作篇-1-第一个 Vue 程序

安装 Vue 非常的简便&#xff0c;只需下载好 Vue 对应的 .js 文件&#xff0c;在 html 中引入 vue.js 即可使用 Vue 下载好了 vue.js 我们便可以编写我们的第一个 vue 程序了 <!doctype html> <html lang"zh-CN"><head><meta charset"utf…...

编程日记 2024/9/19 16:04:08

Qwen2-VL的微调及量化

一、Qwen2-VL简介 Qwen2-VL是Qwen-VL的升级版本&#xff0c;能力更强&#xff0c;性能全面提升。尤其是72B参数的版本更是取了惊人的成绩。它可以读懂不同分辨率和不同长宽比的图片&#xff0c;在 MathVista、DocVQA、RealWorldQA、MTVQA 等基准测试创下全球领先的表现&#xf…...

编程日记 2024/9/19 16:03:03

[数据集][目标检测]车窗状态检测车窗开关检测数据集VOC+YOLO格式299张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;299 标注数量(xml文件个数)&#xff1a;299 标注数量(txt文件个数)&#xff1a;299 标注类别…...

编程日记 2024/9/19 16:00:58

自动泊车系统中的YOLOv8 pose关键点车位线检测

自动泊车系统中的YOLOv8关键点车位线检测技术解析 引言 随着智能驾驶技术的快速发展&#xff0c;自动泊车功能成为了现代汽车的重要组成部分。它不仅能够提高驾驶的安全性&#xff0c;还能在一定程度上解决城市停车难的问题。在自动泊车系统中&#xff0c;准确识别停车位的位置…...

编程日记 2024/9/19 15:58:56

Java html生成pdf和图片

在 Java 项目中将 HTML 生成图片是一项常见需求&#xff0c;特别是用于生成报告、预览页面截图等。不同的库和工具在渲染能力、性能以及支持的功能上有所不同。以下是几种主流的技术选型和对比&#xff0c;帮助你选择适合的解决方案。 技术对比总结 技术名称优点缺点适用场景…...

编程日记 2024/9/19 15:57:55

JavaWeb笔记整理——Redis

目录 Redis数据类型 各种数据类型的特点 Redis常用命令 字符串操作命令 哈希操作命令 列表操作命令 集合操作命令 有序集合操作命令 通用命令 在Java中操作Redis Spring Data Redis的使用方式 操作字符串类型的数据 ​编辑操作hash类型的数据 ​编辑 操作列表类…...

编程日记 2024/9/19 15:55:52

数据库(mysql)常用命令

一.常见的数据库端口号 Mysql默认端口:3306 oracle 默认端口:1521 Sql server 默认端口:1433 注:Mysql采用 的是C/S(客户端/服务器端)架构 二.sql 语法基础 服务器,数据库,数据表,记录,字段之间的关系: 一台Mysql服务器可以管理多个数据库 一个数据库可以存在多张二维表…...

编程日记 2024/9/19 15:54:51

源网荷储一体化新型电力系统解决方案

风光装机快速增长&#xff0c;加剧电力系统不可控性。截至2023H1&#xff0c;我国风电装机389.21GW&#xff0c;太阳能装机470.67GW&#xff0c;风光合计占总装机的31.76%。其中&#xff0c;2023年H1我国风电新增装机22.99GW&#xff0c;对比22年同期新增12.94GW&#xff0c;同…...

编程日记 2024/9/19 15:53:49

树莓派安装 OpenCV 教程

以下是在树莓派上安装 OpenCV 的教程&#xff1a; 笔者当前Python版本&#xff1a;3.7.3 一、更新树莓派系统 在终端中运行以下命令&#xff1a; sudo apt update sudo apt upgrade二、安装必要的依赖项 安装构建工具和图像 I/O 库&#xff1a; sudo apt install build-e…...

编程日记 2024/9/19 15:49:38

01，大数据总结，zookeeper

1 &#xff0c;zookeeper &#xff1a;概述 1.1&#xff0c;zookeeper&#xff1a;作用 1 &#xff0c;大数据领域 &#xff1a;存储配置数据   例如&#xff1a;hadoop 的 ha 配置信息&#xff0c;hbase 的配置信息&#xff0c;都存储在 zookeeper 2 &#xff0c;应用领…...

编程日记 2024/9/19 15:48:37

伪工厂模式制造敌人

实现效果 1.敌人方实现 敌人代码 using UnityEngine; using UnityEngine.UI;public class EnemyBasics : MonoBehaviour {public int EnemySpeed { get; internal set; }public int EnemyAttackDistance { get; internal set; }public int EnemyChaseDistance { get; interna…...

编程日记 2024/9/19 15:44:32

【linux】pwd命令

pwd 命令在 Linux 和类 Unix 系统中用于显示当前工作目录的完整路径。它是 "print working directory" 的缩写。 当你在终端或命令行界面中工作时&#xff0c;你可能会在不同的目录&#xff08;或文件夹&#xff09;之间切换。pwd 命令帮助你确定你当前位于哪个目录…...

编程日记 2024/9/19 15:43:31

Python 如何封装工具类方法，以及使用md5加密

第一步&#xff1a;封装使用方法 在utils目录中&#xff0c;编写我的md5加密的方法&#xff0c;如下&#xff1a; import re import hashlib from os import path from typing import Callable from flask import current_app# 这里封装的是工具类的方法def basename(filenam…...

编程日记 2024/9/19 15:42:30

网络编程的应用

目录 1.单机程序和网络程序 2.客户端与服务端 3.网络编程三要素 3.1 IP地址 3.2 port端口 4.TCP编程 5.UDP编程 1.单机程序和网络程序 之前编写的程序都是单机程序&#xff0c;所有的业务功能实现及数据存储都在一个主机上完成&#xff0c;我们称为单机程序 我们在生活…...

编程日记 2024/9/19 15:40:28

佰朔资本：国内海风加速招标 船舶行业景气上行

昨日&#xff0c;沪指盘中一度下探失守2700点&#xff0c;尾盘在地产、银行等板块的带动下发力上扬&#xff0c;深证成指亦翻红。到收盘&#xff0c;沪指涨0.49%报2717.28点&#xff0c;深证成指涨0.11%报7992.25点&#xff0c;创业板指跌0.11%报1533.47点&#xff0c;上证50指…...

编程日记 2024/9/19 15:39:27

理解AAC和Opus的编码与解码流程

理解AAC和Opus的编码与解码流程及其在Android中的实现，对于音频开发非常重要。下面，我将详细解释这两种编码格式的原理、流程，并结合具体代码示例，帮助你在Android项目中合理地设计和使用它们。 一、AAC（Advanced Audio Coding） 1. AAC的原理与流程 AAC是一种有损音频压…...

编程日记 2024/9/19 15:35:21

设计图纸加密方法知多少？小编给你讲清楚

一、对称加密 使用对称加密算法&#xff0c;对设计图纸进行加密。对称加密使用相同的密钥进行加密和解密&#xff0c;确保只有持有正确密钥的人能够解密文件。 二、非对称加密 使用非对称加密算法&#xff0c;进行设计图纸的加密。非对称加密使用公钥加密、私钥解密的方式&a…...

编程日记 2024/9/19 15:25:58

pycv实时目标检测快速实现

使用python_cv实现目标实时检测 python 安装依赖核心代码快速使用实现结果展示enjoy python 安装依赖 opencv_python4.7.0.72 pandas1.5.3 tensorflow2.11.0 tensorflow_hub0.13.0 tensorflow_intel2.11.0 numpy1.23.5核心代码快速使用 # 使用了TensorFlow Hub和OpenCV库来实…...

编程日记 2024/9/19 15:24:56

记录下如何让字体在div内 自动换行 上下居中

div内样式 display: flex; // flex布局 justify-content: center; // 上下居中 align-items: center; // 左右居中 overflow-wrap: break-word; // 允许字体换行 &#xff08;若行内的单词无法放下则换行&#xff09; word-break: break-all; // 强制文本在任意字符间进…...

编程日记 2024/9/19 15:23:54

Shell篇之编写MySQL启动脚本

Shell篇之编写MySQL启动脚本 1. 脚本内容 vim mysql_ctl.sh#!/bin/bashmysql_port3306 mysql_username"root" mysql_password"molinker" mysql_conf"/opt/lanmp/mysql/etc/my.cnf" mysql_sock"/opt/lanmp/mysql/var/mysql.sock"func…...

编程日记 2024/9/19 15:22:52

Qwen3-TTS多语言语音合成实测：一键部署，生成10种语言的逼真语音

Qwen3-TTS多语言语音合成实测&#xff1a;一键部署&#xff0c;生成10种语言的逼真语音 1. 开篇&#xff1a;语音合成新体验 想象一下&#xff0c;只需输入一段文字&#xff0c;就能让电脑用10种不同语言"开口说话"&#xff0c;而且声音自然得几乎分辨不出是机器生…...

编程新知 2026/3/31 11:53:33

MedGemma 1.5新手必看：从安装到问诊，完整使用流程详解

MedGemma 1.5新手必看&#xff1a;从安装到问诊&#xff0c;完整使用流程详解 你是否曾面对一份复杂的化验单&#xff0c;需要快速理解其临床意义&#xff1f;是否在深夜值班时&#xff0c;想快速确认某个药物的相互作用&#xff1f;或者&#xff0c;作为一名医学生&#xff0…...

编程新知 2026/3/31 11:53:33

终极音乐解锁方案：在浏览器中实现加密音乐文件高效转换完整指南

终极音乐解锁方案&#xff1a;在浏览器中实现加密音乐文件高效转换完整指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地…...

编程新知 2026/3/31 10:53:03

ReplaceItems.jsx：基于智能匹配引擎的Illustrator对象替换解决方案

ReplaceItems.jsx&#xff1a;基于智能匹配引擎的Illustrator对象替换解决方案 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 副标题&#xff1a;面向专业设计师的批量元素管理工具…...

编程新知 2026/3/31 10:34:45

2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街 百度网盘

在前端开发的职场鄙视链里&#xff0c;存在一个极其普遍的误区&#xff1a;认为电商页面就是“简单的列表详情”&#xff0c;没什么技术含量。殊不知&#xff0c;电商是前端技术最残酷的练兵场&#xff1a;毫秒级的首屏速度、像素级的视觉还原、千人千面的动态布局、以及大促期…...

编程新知 2026/3/31 9:54:19

ViT在语义分割中的性能优化：从VOC2012数据集看如何提升自行车识别准确率

ViT在语义分割中的性能优化&#xff1a;从VOC2012数据集看如何提升自行车识别准确率 语义分割作为计算机视觉领域的核心任务之一&#xff0c;其目标是为图像中的每个像素分配类别标签。近年来&#xff0c;Vision Transformer&#xff08;ViT&#xff09;凭借其强大的全局建模能…...

编程新知 2026/3/31 9:11:56

无人值守智能图书借阅系统 Java 后端开发实战

在无人值守智能图书借阅系统的Java后端开发实战中&#xff0c;需围绕系统架构设计、核心功能实现、关键技术选型及部署优化等核心环节展开&#xff0c;以下为具体开发方案&#xff1a;一、系统架构设计分层架构体系&#xff1a;采用经典的四层架构设计&#xff0c;包括表现层、…...

编程新知 2026/3/31 8:39:46

从 Seata 1.x 升级到 2.0.0：Docker 环境下的平滑迁移与配置变更指南

从 Seata 1.x 升级到 2.0.0&#xff1a;Docker 环境下的平滑迁移与配置变更指南 分布式事务框架 Seata 2.0.0 版本带来了多项架构优化与功能增强&#xff0c;包括对 Raft 共识算法的原生支持、安全模块的全面升级以及配置管理机制的改进。对于已在生产环境部署 Seata 1.x 版本的…...

编程新知 2026/3/31 7:47:25

Qwen3-ASR-0.6B效果展示：金融客服录音（专业术语+缩略语）识别术语表匹配

Qwen3-ASR-0.6B效果展示&#xff1a;金融客服录音&#xff08;专业术语缩略语&#xff09;识别术语表匹配 金融客服电话录音里&#xff0c;客户和坐席的对话常常像在说“天书”。一会儿是“LPR”&#xff0c;一会儿是“T0”&#xff0c;还有各种产品代码和内部术语。把这些录音…...

编程新知 2026/3/31 7:33:20

DanKoe 视频笔记：原创思维指南：如何进行原创思考

在本教程中&#xff0c;我们将学习如何摆脱思维定式&#xff0c;培养真正的原创思考能力。我们将探讨为何独立思考如此困难&#xff0c;并提供一套实用的方法来帮助你形成自己的观点、连接不同领域的知识&#xff0c;并最终创造出有价值的内容。 概述 每个人都希望成为一个原创…...

编程新知 2026/3/31 7:17:07