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

Vue程序下载

article 2026/4/1 8:50:11

Vue是一个基于JavaScript（JS）实现的框架，想要使用它，就得先拿到Vue的js文件

Vue官网

Vue2：Vue.js

Vue3：Vue.js - 渐进式 JavaScript 框架 | Vue.js

下载并安装vue.js
第一步：打开Vue2官网，点击下图所示的“起步”：

image.png


第二步：继续点击下图所示的“安装”

image.png


第三步：在“安装”页面向下滚动，直到看到下图所示位置：

image.png


第四步：点击开发版本，并下载
第五步：安装Vue
使用script标签引入vue.js文件。就像这样：

<script src=”xx/vue.js”></script>

1 、第一个Vue程序

1.1、先创建Vue第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
    <!-- 第一步：引入Vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 第二步：指定挂载位置 -->
    <div id="app"></div>
    <!-- 第三步：使用Vue -->
    <script>
        // 3.1创建Vue实例
        const vm=new Vue({
            template:'<h1>hello world!</h1>'
        })
        // 3.2 将Vue实例挂载到指定位置
        vm.$mount('#app')
       // vm.$mount(document.getElementById("app"));
    </script>
</body>
</html>

解释说明：

1、当使用script引入Vue.js之后，Vue会被注册为一个全局变量，就像引入jQuery之后，jQuery也会被注册为一个全局变量,通过控制台可以看到这个Vue全局变量

2、必须new一个Vue实例，如果不new的话，是无法直接使用Vue的

第一步：创建一个空对象，作为将要返回的对象。 let vm = {}

第二步：将这个空对象的原型指向构造函数的prototype属性，也就是将对象的__proto__属性指向构造函数的prototype。

【让对象能沿着原型链去使用构造函数中prototype上的方法】 vm.__proto__ = Vue.prototype

第三步：将这个空对象赋值给构造函数内部的this关键字，执行构造函数。【让构造器中设置的属性和方法设置在这个对象上】

Vue.apply(vm, 参数)

第四步：返回这个对象。 return vm

3、Vue的构造方法参数是一个options配置对象，配置对象中有大量Vue预定义的配置，每一个配置项都是key：value结构，一个key：value就是一个Vue的配置项

4、template配置项：value是一个模版字符串，在这里编写符合Vue语法规则的代码（Vue有一套自己规定的语法规则）

写在这里的字符串会被Vue编译器编译，将其转换为浏览器能够识别的HTML代码，template称之为模版

5、Vue实例的$mount方法，这个方法完成挂载工作，将Vue实例挂载到指定位置，也就是将Vue编译后的HTML代码渲染到页面指定的位置，注意：指定位置的元素会被替换

6、‘#app’的语法类似于css中的id选择器语法，表示将Vue实例挂载到id=‘app’的元素位置，也可以用其他选择器，如果匹配到多个位置，Vue只会选择第一个位置进行挂载（从上到下第一个），或者直接用原声js去获取：vm.$mount(document.getElementById("app"));

相关文章：

Vue程序下载

Vue是一个基于JavaScript&#xff08;JS&#xff09;实现的框架&#xff0c;想要使用它&#xff0c;就得先拿到Vue的js文件 Vue官网 Vue2&#xff1a;Vue.js Vue3&#xff1a;Vue.js - 渐进式 JavaScript 框架 | Vue.js 下载并安装vue.js 第一步&#xff1a;打开Vue2官网&a…...

编程日记 2026/3/15 11:02:45

力扣 寻找重复数

二分&#xff0c;双指针&#xff0c;环形链表。 题目 不看完题就是排序后&#xff0c;用两个快慢指针移动&#xff0c;找到相同就返回即可。 class Solution {public int findDuplicate(int[] nums) {Arrays.sort(nums);int l0;int r1;while(r<nums.length){if(nums[l]num…...

编程日记 2026/3/31 21:34:03

使用Docker将ros1自定义消息通过rosjava_bootstrap生成jar包

文章目录 预准备环境rosjava_bootstrap坏消息好消息 环境安装docker安装rosjava_bootstrap仓库rosjava_center仓库修改rosjava_bootstrap代码拉取docker镜像放置自己的自定义消息 启动docker编译 预准备环境 rosjava_bootstrap rosjava_bootstrap是将自定义的ROS消息生成java…...

编程日记 2026/3/17 21:19:13

分治算法、动态规划、贪心算法、分支限界法和回溯算法的深度对比

1. 分治算法 (Divide and Conquer) 核心思想 分治法三步曲&#xff1a; 分解&#xff08;Divide&#xff09;&#xff1a;将原问题拆分为多个子问题解决&#xff08;Conquer&#xff09;&#xff1a;递归解决子问题合并&#xff08;Combine&#xff09;&#xff1a;合并子问题…...

编程日记 2026/3/30 15:52:26

Unity 运用正则表达式保留字符串中的中文英文字母和数字

正则表达 正则表达式 – 语法 | 菜鸟教程 Regex 类 (System.Text.RegularExpressions) | Microsoft Learn 保留字符串中的中英数 中英数的正则表达。 patten "[\u4e00-\u9fa5A-Za-z0-9]"; 使用Regex 类匹配正则并保留。 matches Regex.Matches(str, patten)…...

编程日记 2026/2/15 4:03:00

网络安全红队工具

目录 红队及发展趋势 基本概念 发展趋势 防守阶段 备战阶段 临战阶段 实战阶段 战后整顿 如果错过互联网,与你擦肩而过的不仅仅是机会,而是整整一个时代。 红队及发展趋势 基本概念 红队一般指实战攻防的防守方。 红队主要复盘总结现有防护系统的不足之处&#xff0c;为…...

编程日记 2026/3/13 23:59:16

【汽车ECU电控数据管理篇】HEX文件格式解析篇章

一、HEX格式文件是啥 HEX 文件是 Intel 公司提出的一种按地址排列的数据信息格式&#xff0c;通常用于存储嵌入式系统的二进制代码。它以 ASCII 码的形式记录数据&#xff0c;每一行以冒号开头&#xff0c;包含数据长度、地址、记录类型、数据和校验码等信息。HEX 文件常用于程…...

编程日记 2026/3/28 2:13:12

ai-2、机器学习之线性回归

机器学习之线性回归 1、机器学习2、线性回归2.1、梯度下降法 3、python下调用scikit-learn 1、机器学习 2、线性回归 ####所以y可以当成我们需要的结果&#xff0c;根据公式可以求的y一撇的值更小&#xff0c;所以更接近需要的结果&#xff0c;所以y一撇拟合性更好 2.1、梯度下…...

编程日记 2026/3/31 15:39:17

机器视觉线阵相机分时频闪选型/机器视觉线阵相机分时频闪选型

在机器视觉系统中，线阵相机的分时频闪技术通过单次扫描切换不同光源或亮度，实现在一幅图像中捕捉多角度光照效果，从而提升缺陷检测效率并降低成本。以下是分时频闪线阵相机的选型要点及关键考量因素： 一、分时频闪技术的核心需求 多光源同步控制 分时频闪需相机支持多路光源…...

编程日记 2026/3/16 18:57:54

NO.21十六届蓝桥杯备战|一维数组|范围for|memset|memcpy(C++)

数组是⼀组相同类型元素的集合 数组中存放的是1个或者多个数据&#xff0c;但是数组元素个数不能为0数组中存放的多个数据&#xff0c;类型是相同的 数组分为⼀维数组和多维数组&#xff0c;多维数组⼀般⽐较多⻅的是⼆维数组 一维数组 ⼀维数组是最常⻅的&#xff0c;通常⽤…...

编程日记 2026/3/31 6:36:35

开源模型应用落地-DeepSeek-R1-Distill-Qwen-7B-Docker助力-模型部署 “光速” 指南

一、前言 在人工智能的浪潮里，大语言模型不断迭代更新，DeepSeek-R1-Distill-Qwen-7B 模型凭借出色的表现，吸引着无数开发者的目光。然而，想要将这个强大的模型顺利部署并投入使用，过程却并不轻松。传统的部署方式仿佛布满荆棘，从底层环境搭建到各种依赖项的适配，每一步都…...

编程日记 2026/2/19 14:09:15

unity TextMeshPro动态字体使用

TextMeshPro 显示文本的时候&#xff0c;依赖与文本贴图&#xff0c;这个贴图可以是静态的&#xff0c;也可以根据显示需求动态生成&#xff0c;动态的资源对内存消耗会高一些&#xff0c;所以我们一般将常用的3500汉字创建一个静态的字体库&#xff0c;然后在创建一个动态字体…...

编程日记 2026/3/15 0:57:47

C#使用技巧

文章目录 判断7天以内判断7天以内 Date date = new Date(); //获取当前时间Date s00 = (Date) pageData.get(...

编程日记 2026/2/28 1:46:22

爱普生可编程晶振 SG-8101CE 在智能家居领域展现出的优势

在智能家居的全场景应用中&#xff0c;设备间的协同效率、数据传输的稳定性以及系统运行的可靠性&#xff0c;成为衡量用户体验的核心标准。爱普生 SG-8101CE 可编程晶振以其卓越的性能&#xff0c;为智能门锁、传感器、中控系统等设备提供核心动力&#xff0c;助力厂商打造更可…...

编程日记 2026/3/14 11:35:54

第6篇：面向对象编程重构系统

一、OOP重构目标 数据封装：隐藏实现细节​接口抽象：规范操作入口资源自治：实现自管理生命周期扩展基础：预留多态支持接口二、完全面向对象实现（完整代码） #include <iostream> #include <Windows.h> #include <li...

编程日记 2026/1/5 5:32:49

杰发科技AC7801——滴答定时器获取时间戳

1. 滴答定时器 杰发科技7801内部有一个滴答定时器&#xff0c;该定时器是M0核自带的&#xff0c;因此可以直接用该定时器来获取时间戳。 同样&#xff0c;7803也可以使用该方式获取时间戳。 2. 滴答定时器原理 SysTick是一个24位的递减计数器&#xff0c;它从预设的重装载值…...

编程日记 2026/3/19 6:53:23

2021-05-27 C++找出矩阵数组中值最大的元素和它在数组中的位置

缘由各位大佬&#xff0c;这个应该怎么做_编程语言-CSDN问答 void 找出数组中值最大的元素和它在数组中的位置() {//缘由https://ask.csdn.net/questions/7436585?spm1005.2025.3001.5141int a[4][4], aa 0, aaa 0, d 0, x 0;while (aa < 4 && aaa < 4)std…...

编程日记 2026/3/31 9:24:50

k8s集群3主5从高可用架构（kubeadm方式安装k8s）

关键步骤说明 环境准备阶段 系统更新&#xff1a;所有节点执行yum/apt update确保软件包最新时间同步&#xff1a;通过ntpdate time.windows.com或部署NTP服务器网络规划&#xff1a;明确划分Service网段&#xff08;默认10.96.0.0/12&#xff09;和Pod网段&#xff08;如Flann…...

编程日记 2026/3/31 22:11:13

上位机知识篇---HTTPHTTPS等各种通信协议

文章目录 前言1. HTTP&#xff08;HyperText Transfer Protocol&#xff09;功能传输超文本无状态协议支持多种方法 特点明文传输基于TCP简单灵活 使用场景示例请求响应 2. HTTPS&#xff08;HTTP Secure&#xff09;功能加密传输身份验证特点基于SSL/TLS默认端口需要证书 使用…...

编程日记 2026/3/25 20:49:24

Android实现漂亮的波纹动画

Android实现漂亮的波纹动画 本文章讲述如何使用二维画布canvas和camera、矩阵实现二、三维波纹动画效果&#xff08;波纹大小变化、画笔透明度变化、画笔粗细变化&#xff09; 一、UI界面 界面主要分为三部分 第一部分&#xff1a;输入框&#xff0c;根据输入x轴、Y轴、Z轴倾…...

编程日记 2026/3/22 6:00:47

大白话React Hooks（如 useState、useEffect）的使用方法与原理

啥是 React Hooks 在 React 里&#xff0c;以前我们写组件主要用类&#xff08;class&#xff09;的方式&#xff0c;写起来有点复杂&#xff0c;尤其是处理状态和副作用的时候。React Hooks 就是 React 16.8 之后推出的新特性&#xff0c;它能让我们不用写类&#xff0c;直接…...

编程日记 2026/3/21 18:31:22

【无标题】ABP更换MySql数据库

原因&#xff1a;ABP默认使用的数据库是sqlServer&#xff0c;本地没有安装sqlServer&#xff0c;安装的是mysql&#xff0c;需要更换数据库 ABP版本&#xff1a;9.0 此处以官网TodoApp项目为例 打开EntityFrameworkCore程序集&#xff0c;可以看到默认使用的是sqlServer&…...

编程日记 2026/3/31 11:02:18

掌握Git：从入门到精通的完整指南

Git是什么&#xff1f; Git是一个分布式版本控制系统&#xff0c;最初由Linus Torvalds在2005年为管理Linux内核开发而创建 它的主要功能是跟踪文件的更改&#xff0c;协调多个开发者之间的工作&#xff0c;并帮助团队高效地管理项目代码。Git不仅适用于大型开源项目&#xf…...

编程日记 2026/2/21 6:12:08

Windows上使用go-ios实现iOS17自动化

前言 在Windows上运行iOS的自动化&#xff0c;tidevice对于iOS17以上并不支持&#xff0c;原因是iOS 17 引入新通信协议 ‌RemoteXPCQUIC‌&#xff0c;改变了 XCUITest 的启动方式。 一、go-ios的安装 1、安装命令&#xff1a;npm i go-ios 2、安装完成后输入命令which io…...

编程日记 2026/3/30 22:06:40

服务器硬防的优势有哪些？

服务器硬防也可以称为硬件防火墙&#xff0c;是一种专门用来保护网络不会受到未经授权访问所设计的设备&#xff0c;硬件防火墙是一个独立的设备&#xff0c;同时也是集成在路由器或者是其它网络设备中的一部分&#xff0c;下面&#xff0c;小编就来为大家介绍一下服务器硬防的…...

编程日记 2026/3/23 18:31:22

Grok3使用体验与模型版本对比分析

文章目录 Grok的功能DeepSearch思考功能绘画功能Grok 3的独特功能 Grok 3的版本和特点与其他AI模型的比较 最新新闻&#xff1a;Grok3被誉为“地球上最聪明的AI” 最近&#xff0c;xAI公司正式发布了Grok3&#xff0c;并宣称其在多项基准测试中展现了惊艳的表现。据官方消息&am…...

编程日记 2026/3/31 7:35:06

JavaScript——前端基础3

目录 JavaScript简介 优点 可做的事情 运行 第一个JavaScript程序 搭建开发环境 安装的软件 操作 在浏览器中使用JavaScript文件 分离JS 使用node运行JS文件 语法 变量与常量 原生数据类型 模板字符串 字符串的内置方法 数组 对象 对象数组和JSON if条件语…...

编程日记 2026/3/23 22:37:48

零基础学习机器学习分类模型

下面将带你通过一个简单的机器学习项目&#xff0c;使用Python实现一个常见的分类问题。我们将使用著名的Iris数据集&#xff0c;来构建一个机器学习模型&#xff0c;进行花卉品种的分类。整个过程会包含&#xff1a; 原理介绍&#xff1a;机器学习的基本概念。数据加载和预处…...

编程日记 2026/3/1 6:38:49

Spring 源码硬核解析系列专题（十）：Spring Data JPA 的 ORM 源码解析

在前几期中，我们从 Spring 核心到 Spring Boot、Spring Cloud、Spring Security 和 Spring Batch，逐步揭示了 Spring 生态的多样性。在企业级开发中，数据访问是不可或缺的部分，而 Spring Data JPA 通过简化 JPA（Java Persistence API）操作，成为主流的 ORM 框架。本篇将深…...

编程日记 2025/8/8 9:26:29

视频推拉流EasyDSS点播平台云端录像播放异常问题的排查与解决

EasyDSS视频直播点播平台是一个功能全面的系统&#xff0c;提供视频转码、点播、直播、视频推拉流以及H.265视频播放等一站式服务。该平台与RTMP高清摄像头配合使用&#xff0c;能够接收无人机设备的实时视频流&#xff0c;实现无人机视频推流直播和巡检等多种应用。 最近&…...

编程日记 2026/3/20 7:30:39