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

Vue程序下载

news 2026/4/5 6:08:44

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…...

编程日记 2025/3/2 21:26:18

【UCB CS 61B SP24】Lecture 17 - Data Structures 3: B-Trees学习笔记

本文以 2-3-4 树详细讲解了 B 树的概念&#xff0c;逐步分析其操作&#xff0c;并用 Java 实现了标准的 B 树。 1. 2-3 & 2-3-4 Trees 上一节课中讲到的二叉搜索树当数据是随机顺序插入的时候能够使得树变得比较茂密&#xff0c;如下图右侧所示&#xff0c;时间复杂度也就…...

编程日记 2025/3/2 21:23:12

机器学习决策树

一、香农公式 熵&#xff1a; 信息增益&#xff1a; 信息增益信息熵-条件熵 前者是初始信息熵大小&#xff0c;后者是因为条件加入后带来的确定性增加 信息增益表示得知特征X的信息而使得类Y的信息的不确定性减少的程度 信息增益越大说明影响越大 二、代码 ""&…...

编程日记 2025/3/2 21:22:11

Spring Boot + MyBatis 实现 RESTful API 的完整流程

后端开发&#xff1a;Spring Boot 快速开发实战 引言 在现代后端开发中&#xff0c;Spring Boot 因其轻量级、快速开发的特性而备受开发者青睐。本文将带你从零开始&#xff0c;使用 Spring Boot MyBatis 实现一个完整的 RESTful API&#xff0c;并深入探讨如何优雅地处理异…...

编程日记 2025/3/2 21:20:09

通过 ANSYS Discovery 进行 CFD 分析，增强工程设计

概括 工程师使用计算流体动力学 (CFD) 分析来研究和优化各种应用中的流体流动和传热分析。ANSYS Discovery 是一个用户友好的软件平台&#xff0c;使工程师能够轻松设置和解决 CFD 模型&#xff0c;并能够通知设计修改 在这篇博文中&#xff0c;我们将重点介绍在 Ansys Disc…...

编程日记 2025/3/2 21:18:07

家用可燃气体探测器——家庭燃气安全的坚实防线

随着社会的发展和变迁&#xff0c;天然气为我们的生活带来了诸多便利&#xff0c;无论是烹饪美食&#xff0c;还是温暖取暖&#xff0c;都离不开它的支持。然而&#xff0c;燃气安全隐患如影随形&#xff0c;一旦发生泄漏&#xff0c;可能引发爆炸、火灾等严重事故&#xff0c;…...

编程日记 2025/3/2 21:17:05

ListControl双击实现可编辑

为Edit Control控件添加丢失输入焦点事件，可见设为false 为List Control控件添加双击事件 控件和成员变量之间交换数据 CListCtrl ListPrint1; //列表输出 CEdit...

编程日记 2025/3/2 21:13:01

ave-form.vue 组件中 如何将产品名称发送给后端 ？

如何将产品名称发送给后端。 在这段代码中&#xff0c;产品名称&#xff08;productName&#xff09;的处理和发送主要发生在 save() 方法中。让我逐步分析&#xff1a; 产品ID的选择&#xff1a; <w-form-selectv-model"form.productId"label"涉及产品&q…...

编程日记 2025/3/2 21:11:59

DeepSeek行业应用实践报告-智灵动力【112页PPT全】

DeepSeek&#xff08;深度搜索&#xff09;近期引发广泛关注并成为众多企业/开发者争相接入的现象&#xff0c;主要源于其在技术突破、市场需求适配性及生态建设等方面的综合优势。以下是关键原因分析&#xff1a; 一、技术核心优势 开源与低成本 DeepSeek基于开源架构&#xf…...

编程日记 2025/3/2 21:09:57

【Markdown 语法简洁讲解】

Markdown 语法简洁语法讲解 什么是 Markdown1. 标题2. 列表3.文本样式4. 链接与图片5. 代码6. 表格7. 分割线8. 流程图9. 数学公式10. 快捷键11. 字体、字号与颜色 什么是 Markdown Markdown 是一种轻量级标记语言&#xff0c;通过简单的符号实现排版格式化&#xff0c;专注于…...

编程日记 2025/3/2 21:08:55

250301-OpenWebUI配置DeepSeek-火山方舟+硅基流动+联网搜索+推理显示

A. 最终效果 B. 火山方舟配置&#xff08;一定要点击添加&#xff09; C. 硅基流动配置&#xff08;最好要点击添加&#xff0c;否则会自动弹出所有模型&#xff09; D. 联网搜索配置 E. 推理过程显示 默认是没有下面的推理过程的显示的 设置步骤&#xff1a; 在Functions函…...

编程日记 2025/3/2 21:05:52

【3天快速入门WPF】12-MVVM

目录 1. 什么是MVVM2. 实现简单MVVM2.1. Part 12.2. Part 21. 什么是MVVM MVVM 是 Model-View-ViewModel 的缩写，是一种用于构建用户界面的设计模式，是一种简化用户界面的事件驱动编程方式。 MVVM 的目标是实现用户界面和业务逻辑之间的彻底分离，以便更好地管理和维护应用…...

编程日记 2025/3/2 21:04:51

查找Excel包含关键字的行（の几种简单快速方法）

需求&#xff1a;数据在后缀为xlsx的Excel的sheet1中且量比较大&#xff0c;比如几十万行几百列&#xff1b;想查找一个关键字所在的行,比如"全网首发"&#xff1b; 情况①知道关键字在哪一列 情况②不确定在哪一列&#xff0c;很多列相似又不同&#xff0c;本文演…...

编程日记 2025/3/2 21:03:50

性能测试分析和调优

步骤 性能调优的步骤 性能调优的步骤&#xff1a; 1.确定问题&#xff1a;根据性能测试的结果来分析确定bug。–测试人员职责 2.分析原因&#xff1a;分析问题产生的原因。----开发人员职责 3.给出解决方案&#xff1a;可以是修改软件配置、增加硬件资源配置、修改代码等----…...

编程日记 2025/3/2 21:00:45

（视频教程）Compass代谢分析详细流程及python版-R语言版下游分析和可视化

不想做太多的前情解说了&#xff0c;有点累了&#xff0c;做了很久的内容&#xff0c;包括整个分析&#xff0c;从软件安装和报错解决到后期下游python版-R语言版下游分析和可视化&#xff01;单细胞代谢分析我们写过很多了&#xff0c;唯独少了最“高级”的compass&#xff0c…...

编程日记 2025/3/2 20:52:34

【SQL】MySQL中的字符串处理函数：concat 函数拼接字符串，COALESCE函数处理NULL字符串

MySQL中的字符串处理函数&#xff1a;concat 函数 一、concat &#xff08;&#xff09;函数 1.1、基本语法1.2、示例1.3、特殊用途 二、COALESCE&#xff08;&#xff09;函数 2.1、基本语法2.2、示例2.3、用途 三、进阶练习 3.1 条件和 SQL 语句3.2、解释 一、concat &…...

编程日记 2025/3/2 20:51:33

c++中深拷贝和浅拷贝的联系和区别

在 C 编程里&#xff0c;深拷贝和浅拷贝是两种不同的对象复制方式&#xff0c;它们在实现方式、资源管理和适用场景等方面存在显著差异。下面为你详细介绍它们的区别。 1. 基本概念 浅拷贝&#xff1a;浅拷贝仅仅复制对象的成员变量值。对于基本数据类型&#xff08;如 int、d…...

编程日记 2025/3/2 20:46:26

Autotestplat 在多个平台和公司推荐使用！

1、 51Testing软件测试网 开源好用&#xff01;推荐一款更轻量化的自动化测试平台&#xff01; 2、程序员杨叔 从繁琐到简单&#xff01;Autotestplat自动化测试平台搭建使用 3、一飞开源 [开源]一站式自动化测试平台及解决方案&#xff0c;支持接口、性能、UI测试 4、github h…...

编程日记 2025/3/2 20:45:24

字符串最后一个单词的长度

一&#xff1a;题目 二&#xff1a;思路 用rfind()函数倒着找第一个空格&#xff0c;返回的值为pos&#xff0c;然后打印size()-(pos1)&#xff0c;posnpos就代表只有一个单词&#xff0c;则直接返回size #include <iostream> using namespace std; int main() {strin…...

编程日记 2025/3/2 20:42:20

【Linux】learning notes（3）make、copy、move、remove

文章目录 1、mkdir &#xff08;make directory&#xff09;2、rmdir &#xff08;remove directory&#xff09;3、rm&#xff08;remove&#xff09;4、>5、touch 新建文件6、mv&#xff08;move&#xff09;7、cp&#xff08;copy&#xff09; 1、mkdir &#xff08;make…...

编程日记 2025/3/2 20:37:14

（六）openEuler欧拉系统LVM动态扩容实战：从规划到文件系统在线扩展

1. 为什么需要动态扩容&#xff1f; 最近接手了一个跑在openEuler上的业务系统&#xff0c;数据量每天都在疯涨。上周监控突然报警&#xff0c;根目录只剩下10%的空间&#xff0c;眼看着就要撑爆了。这种情况要是放在以前&#xff0c;估计得停机扩容&#xff0c;但现在有了LVM&…...

编程新知 2026/4/5 5:41:36

基于Agent框架的雪女-斗罗大陆-造相Z-Turbo自动化创作系统

基于Agent框架的雪女-斗罗大陆-造相Z-Turbo自动化创作系统 你有没有过这样的经历&#xff1f;脑子里有一个特别酷的画面&#xff0c;比如“一个悲伤的魂师&#xff0c;独自站在漫天飞雪的冰原上&#xff0c;眼神里藏着故事”&#xff0c;但当你打开绘画软件&#xff0c;或者尝…...

编程新知 2026/4/5 5:33:13

HUNYUAN-MT赋能微信小程序：实时跨语言聊天翻译功能实现

HUNYUAN-MT赋能微信小程序&#xff1a;实时跨语言聊天翻译功能实现 最近在帮一个做跨境电商的朋友琢磨他的小程序&#xff0c;他愁的是用户来自世界各地&#xff0c;聊天时语言不通&#xff0c;客服压力巨大。这让我想到了一个挺有意思的方向&#xff1a;能不能在小程序里&…...

编程新知 2026/4/5 5:18:55

快速部署Qwen3-ASR-1.7B：实现多语言语音转文字功能实战教程

快速部署Qwen3-ASR-1.7B&#xff1a;实现多语言语音转文字功能实战教程 1. 引言&#xff1a;语音识别技术的新选择 语音转文字技术正在改变我们处理音频内容的方式。Qwen3-ASR-1.7B作为阿里通义千问推出的中等规模语音识别模型&#xff0c;凭借17亿参数的平衡设计&#xff0c…...

编程新知 2026/4/5 5:18:55

从同源到同站：浏览器安全机制的核心逻辑与实战解析

1. 同源与同站&#xff1a;浏览器安全的两道防线 浏览器就像一位严格的保安&#xff0c;时刻守护着用户数据的安全。它有两套不同的安检标准&#xff1a;同源策略和同站策略。这两套标准看似相似&#xff0c;实则有着本质区别。 先来看个生活场景&#xff1a;假设你住在一栋公寓…...

编程新知 2026/4/5 4:58:30

避坑指南：YOLOv5单目测距项目里，为什么你的距离值总是不准？

YOLOv5单目测距实战&#xff1a;五大误差源深度解析与精准优化方案 当你兴奋地跑通了YOLOv5单目测距代码&#xff0c;却发现测量结果与实际距离相差甚远时&#xff0c;这种挫败感我深有体会。本文将带你系统排查那些容易被忽视的关键误差源&#xff0c;并提供可直接落地的解决方…...

编程新知 2026/4/5 4:34:09

OpenClaw+百川2-13B-4bits量化模型：个人知识管理自动化方案

OpenClaw百川2-13B-4bits量化模型&#xff1a;个人知识管理自动化方案 1. 为什么需要自动化知识管理 作为一个长期与技术文档打交道的开发者&#xff0c;我的知识库在过去三年膨胀到了2000篇杂乱无章的Markdown文件。每次查找资料时&#xff0c;要么记不清文件名&#xff0c;…...

编程新知 2026/4/5 4:28:06

钙钛矿材料的“电控开关“：罗格斯大学实现光发射强度近100%调节

这项由美国罗格斯大学物理与天文系以及英国帝国理工学院化学系联合开展的研究发表于2026年3月17日&#xff0c;研究成果展现了一种全新的光电器件控制方式。感兴趣深入了解的读者可以查阅完整论文获取更多技术细节。如果把发光材料比作一个可调光的台灯&#xff0c;那么传统方法…...

编程新知 2026/4/5 2:38:47

OpenClaw日志排查助手：千问3.5-9B自动化分析开发日志

OpenClaw日志排查助手&#xff1a;千问3.5-9B自动化分析开发日志 1. 为什么需要日志自动化分析 作为一个长期与代码打交道的开发者&#xff0c;我每天至少有30%的时间花在查看日志上。从服务器报错到本地调试输出&#xff0c;海量的日志信息常常让我陷入"信息过载"…...

编程新知 2026/4/5 2:14:15

嵌入式R-Tree空间索引：轻量级矩形碰撞检测与地理围栏实现

1. R-Tree库技术解析&#xff1a;面向嵌入式平台的空间索引实现1.1 库定位与工程价值R-Tree是一种经典的动态空间索引数据结构&#xff0c;由Antonin Guttman于1984年提出&#xff0c;核心目标是高效支持多维空间对象&#xff08;如矩形、点、多边形&#xff09;的范围查询、邻…...

编程新知 2026/4/5 1:06:59