Vue程序下载

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"));

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ShenNiusModularity项目源码学习(14:ShenNius.Infrastructure项目分析)

ShenNius.Infrastructure项目用于定义ShenNius.Admin.Mvc项目和ShenNius.Admin.API项目共用的特性类、数据操作接口实现类、上下文类、通讯类&#xff0c;主要文件的用途如下&#xff1a;   Attributes文件夹保存特性类或过滤器类定义&#xff0c;主要包括&#xff1a;   …

音乐游戏Pump It Up(PIU)模拟器

文章目录 &#xff08;一&#xff09;Pump It Up&#xff08;1.1&#xff09;基本情况&#xff08;1.2&#xff09;机体 &#xff08;二&#xff09;模拟器&#xff08;2.1&#xff09;主程序&#xff08;2.2&#xff09;模拟器主题 &#xff08;三&#xff09;曲谱文件&#x…

Flink同步数据mysql到doris问题合集

Flink同步数据mysql到doris 官方同步流程Doris安装下载地址导入镜像启动配置 Flink-cdc安装&#xff08;自制&#xff09;下载地址导入镜像启动命令 启动问题修复Flink报错Could not acquire the minimum required resources.作业报错 Mysql8.0 Public Key Retrieval is not al…

STM32呼吸灯实验手册(TIM定时器)

一、实验目标 使用TIM定时器的PWM模式控制LED亮度实现LED渐亮渐灭的呼吸灯效果掌握HAL库的TIM配置方法 二、硬件准备 开发板&#xff1a;STM32F103C8T6LED模块&#xff1a;LED串联220Ω电阻两组USB-TTL调试器硬件连接 三、软件配置&#xff08;STM32CubeMX&#xff09; 打开…

vue框架后遗症∶被遗忘的dom操作

用多了vue、react等前端框架&#xff0c;不得不说用数据驱动视图来开发真的很香&#xff0c;但是也免不了会有不用这些框架的项目&#xff0c;dom操作还是很有必要的&#xff0c;一开始学习网页设计的时候就教过&#xff0c;后面一直开发项目基本上用框架。虽然有些想不起来了&…

Centos7源码编译安装Sqlite最新版本

下载源码 https://www.sqlite.org/download.html 复制下载链接&#xff0c;然后用 wget 下载 wget https://www.sqlite.org/2025/sqlite-autoconf-3490100.tar.gz 解压缩编译安装 tar -zxf sqlite-autoconf-3490100.tar.gz cd sqlite-autoconf-3490100 ./configure --prefi…

数据结构秘籍(二)图(含图的概念、存储以及图的两大搜索)

1 引言 线性数据结构的元素满足唯一的线性关系&#xff0c;每个元素&#xff08;初第一个和最后一个外&#xff09;只有一个直接前趋和一个直接后继。树形数据结构的元素之间有着明显的层次关系。但是图形结构的元素之间的关系是任意的。 什么是图&#xff1f; 简单来说&…

遗传算法详解及在matlab中的使用

遗传算法分析 一 遗传算法概述1 算法概念2 基本特点3 启发式算法 二 原理与方法1 实现步骤1.1 个体编码1.2 种群初始化1.3 适应度计算1.4 选择运算1.5 交叉运算1.6 变异运算 2 总结 三 应用实例1 GA工具使用教程2 设置目标函数3 搜索最小值4 搜索最大值 一 遗传算法概述 本章简…

pytorch基础-nn.linear

import torch import torch.nn as nn# 定义线性层 linear_layer nn.Linear(in_features10, out_features5, biasTrue)# 输入数据 input_data torch.randn(32, 10) # (batch_size32, in_features10)# 前向传播 output linear_layer(input_data) print(output.shape) # 输出…

Is Noise Conditioning Necessary for Denoising Generative Models?论文阅读笔记

很吸引人的一个标题&#xff0c;很吸引人的一个作者&#xff0c;来读一读明神的新作&#xff0c;讲的是怎么把去噪领域的一些有意思的思想&#xff0c;特别是blind denoising和noise-level estimation的思想&#xff0c;应用到denoising diffusion模型中&#xff0c;从而去掉de…

PDF文档中表格以及形状解析

我们在做PDF文档解析时有时需要解析PDF文档中的表格、形状等数据。跟解析文本类似的常见的解决方案也是两种。文档解析跟ocr技术处理。下面我们来看看使用文档解析的方案来做PDF文档中的表格、图形解析&#xff08;使用pdfium库&#xff09;。 表格解析&#xff1a; 在pdfium库…

ESP32-S3 42引脚 语音控制模块、设备运转展示 GOOUUU TECH 果云科技S3-N16R8 控制舵机 LED开关 直流电机

最近还是想玩了下esp32&#xff0c;基于原来的开发板&#xff0c;看见佬做了一个语音识别的项目&#xff0c;通过这个语音识别可以控制LED开关和直流电机这些&#xff0c;详情可见视频&#xff08;推荐&#xff09;具体硬件就在下方。 信泰微】ESP32-S3 42引脚 语音控制模块、…

RabbitMQ快速入门

目录 MQ简介 1、同步通信 图片 2、异步通信 图片 RabbitMQ快速上手 基本介绍&#xff1a; Producer和Consumer Connection和Channel Virtual host Queue Exchange 工作流程 AMQP Java编写RabbitMQ生产者消费者 生产者 1.建立连接 2.开启信道 3.声明交换机 4.声…

【Qt】编程基础

目录 一、Qt体系框架&#xff1a; ​编辑二、布局方式&#xff1a; 1.绝对布局 setGeometry()函数 2.盒子布局&#xff1a; QHBoxLayout:水平布局管理器 QVBoxLayout:垂直布局管理器 QGridLayout:网格布局管理器 三、基本控件及其函数 标签类 &#xff1a;QLabel 按…

温湿度监控设备融入智慧物联网

当医院的温湿度监控设备融入智慧物联网&#xff0c;将会带来许多新的体验&#xff0c;可以帮助医院温湿度监控设备智能化管理&#xff0c;实现设备之间的互联互通&#xff0c;方便医院对温湿度数据进行统一管理和分析。 添加智慧物联网技术&#xff0c;实现对医院温湿度的实时…

登录次数限制

文章目录 一、应用场景与设计目的1. 应用场景2. 设计目的 二、功能设计1. 登录限制规则2. 解锁机制3. 适用维度 三、技术实现1. 数据存储2. 逻辑流程3. 实现代码示例4. 动态锁定时间 四、安全增强与扩展1. 防止用户名枚举2. 加入验证码3. 监控与报警4. 分布式支持 五、设计思考…

人工智能销售客服app开发,OpenAI宣布GPT-5免费使用?Deepseek让AI巨头全跪了

人工智能技术的飞速发展&#xff0c;正在深刻改变着各行各业&#xff0c;销售客服领域也不例外。随着 GPT-5 等大型语言模型的不断进化&#xff0c;AI 销售客服系统也迎来了前所未有的变革&#xff0c;开启了智能客服的新时代。 传统客服痛点亟待解决&#xff1a; 传统的销售…

vscode集成DeepSeek

vscode 扩展 安装 Cline Meet Cline&#xff0c;一个可以使用你的CLI和编辑器的AI助手。 得益于 Claude 3.5 Sonnet的代理编码功能&#xff0c;Cline 可以逐步处理复杂的软件开发任务。借助让他创建和编辑文件、探索大型项目、使用浏览器和执行终端命令(在您授予权限后)的工具&…

2.27-1笔记1

一、新建表 二、建表语句 create table student( id int primary key , name char(20), sex char(10), age int(3), mobile char(20), class char(10), english int(10), chinese int(10), math int(10) )engineinnodb default charsetutf8; insert into student values (1,小…

30.[前端开发-JavaScript基础]Day07-数组Array-高阶函数-日期Date-DOM

JavaScript的DOM操作 &#xff08;一&#xff09; 1 什么是DOM&#xff1f; 认识DOM和BOM 深入理解DOM 2 认识DOM Tree DOM Tree的理解 3 DOM的整体结构 DOM的学习顺序 DOM的继承关系图 document对象 4 节点、元素导航 节点&#xff08;Node&#xff09;之间的导航&…